@fluxo-dev/shell 0.0.29 → 0.0.30

package/index.esm.js

@@ -1,16 +1,17 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, Suspense, forwardRef, createElement as createElement$2, useEffect, useCallback, createContext, useContext, useLayoutEffect, useRef, useMemo, memo, isValidElement, cloneElement, useImperativeHandle, lazy } from 'react';
+import React__default, { useState, Suspense, forwardRef, createElement as createElement$2, useEffect, useCallback, useMemo, createContext, useRef, useLayoutEffect, useReducer, useContext, useImperativeHandle, Fragment as Fragment$1, cloneElement, memo, isValidElement, lazy } from 'react';
 import { useSelector, Provider } from 'react-redux';
 import { useLocation, Navigate, Outlet, useNavigate, Link, useOutlet, Route, useSearchParams, createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { DataCard, useFlxNavigate, NoData, ConfirmModal, ShellPage, ErrorPage as ErrorPage$1, WaitData, FlxRoutes } from '@fluxo-dev/ui-components';
 import { ModuleLoader } from '@fluxo-dev/shell-mfe';
-import { Text, TextInput, ActionIcon, useMantineTheme, AppShell, Stack, Group, Burger, Badge, Drawer, NavLink, Popover, Avatar, Center, Divider, Button, Tabs, Anchor, Tooltip, Space, useMantineColorScheme, UnstyledButton, Box, ThemeIcon, Collapse, ScrollArea, rem, Loader, Grid, PasswordInput, ColorSwatch, FileButton, NumberInput, Alert, ColorInput, Checkbox, Modal, Switch, Select, Chip, LoadingOverlay, Image as Image$1, Menu, Table, MultiSelect, Card, MantineProvider } from '@mantine/core';
+import { Text, TextInput, ActionIcon, useMantineTheme, AppShell, Stack, Group, Burger, Badge, Drawer, NavLink, Popover, Avatar, Center, Divider, Button, Tabs, Anchor, Tooltip, Space, useMantineColorScheme, UnstyledButton, Box, ThemeIcon, Collapse, ScrollArea, rem, Loader, Grid, PasswordInput, ColorSwatch, FileButton, NumberInput, Alert, ColorInput, Checkbox, Modal, Switch, Select, Chip, LoadingOverlay, Image as Image$1, Menu as Menu$1, Table, MultiSelect, Card, MantineProvider } from '@mantine/core';
 import { openSpotlight, Spotlight } from '@mantine/spotlight';
 import { useOs, useHotkeys, useIdle } from '@mantine/hooks';
 import { AppType, AppState, FluxoStateDispatcher, FluxoClientSys, UserService, AppMenuContextType, ApiKeyService, DomainRoleService, EmailServerProviderType } from '@fluxo-dev/api-client-base';
 import { showNotification, Notifications } from '@mantine/notifications';
 import { useAppSelector, store as store$4 } from '@fluxo-dev/state';
+import { unstable_batchedUpdates, flushSync as flushSync$1, createPortal } from 'react-dom';
 import { useForm } from '@mantine/form';
 import { RestApiDocumentation } from '@fluxo-dev/shell-korebi';
 import { DatePickerInput, DatesProvider } from '@mantine/dates';
@@ -4449,7 +4450,7 @@ function AppBar(props) {
           backgroundColor: (_b = (_a = props.previewMode) === null || _a === void 0 ? void 0 : _a.headerColor) !== null && _b !== void 0 ? _b : fluxoTheme.colors['brand'][7]
         },
         children: [jsxs(Group, {
-          children: [jsx(Burger, {
+          children: [props.shellUi.navigation === ShellUINavigation.Sidebar && jsx(Burger, {
             tabIndex: -1,
             disabled: props.previewMode !== undefined,
             color: '#fff',
@@ -4841,7 +4842,10 @@ function AppContent(props) {
       }
     }
   }, [location]);
-  return jsx(Fragment, {
+  return jsx("div", {
+    style: {
+      top: props.shellUi.navigation === ShellUINavigation.Sidebar ? 48 : 96
+    },
     children: props.withMultipleSessions ? jsxs(Tabs, {
       value: sessionContext.getCurrentSessionId(),
       keepMounted: true,
@@ -5174,7 +5178,1592 @@ IconFactory.icons = [{
   })
 }];
 
-function Navbar() {
+const isMenuOpen = state => !!state && state[0] === 'o';
+const batchedUpdates = unstable_batchedUpdates || (callback => callback());
+const values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));
+const floatEqual = (a, b, diff = 0.0001) => Math.abs(a - b) < diff;
+const getTransition = (transition, name) => transition === true || !!(transition && transition[name]);
+const safeCall = (fn, arg) => typeof fn === 'function' ? fn(arg) : fn;
+const internalKey = '_szhsinMenu';
+const getName = component => component[internalKey];
+const mergeProps = (target, source) => {
+  source && Object.keys(source).forEach(key => {
+    const targetProp = target[key];
+    const sourceProp = source[key];
+    if (typeof sourceProp === 'function' && targetProp) {
+      target[key] = (...arg) => {
+        sourceProp(...arg);
+        targetProp(...arg);
+      };
+    } else {
+      target[key] = sourceProp;
+    }
+  });
+  return target;
+};
+const parsePadding = paddingStr => {
+  if (typeof paddingStr !== 'string') return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+  const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
+  const top = !isNaN(padding[0]) ? padding[0] : 0;
+  const right = !isNaN(padding[1]) ? padding[1] : top;
+  return {
+    top,
+    right,
+    bottom: !isNaN(padding[2]) ? padding[2] : top,
+    left: !isNaN(padding[3]) ? padding[3] : right
+  };
+};
+const getScrollAncestor = node => {
+  while (node) {
+    node = node.parentNode;
+    if (!node || node === document.body || !node.parentNode) return;
+    const {
+      overflow,
+      overflowX,
+      overflowY
+    } = getComputedStyle(node);
+    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
+  }
+};
+function commonProps(isDisabled, isHovering) {
+  return {
+    'aria-disabled': isDisabled || undefined,
+    tabIndex: isHovering ? 0 : -1
+  };
+}
+function indexOfNode(nodeList, node) {
+  for (let i = 0; i < nodeList.length; i++) {
+    if (nodeList[i] === node) return i;
+  }
+  return -1;
+}
+
+const stylePropTypes = name => ({
+  [name ? `${name}ClassName` : 'className']: propTypes.exports.oneOfType([propTypes.exports.string, propTypes.exports.func])
+});
+const menuPropTypes = {
+  className: propTypes.exports.string,
+  ...stylePropTypes('menu'),
+  arrowProps: propTypes.exports.object,
+  focusProps: propTypes.exports.object,
+  menuStyle: propTypes.exports.object,
+  arrow: propTypes.exports.bool,
+  setDownOverflow: propTypes.exports.bool,
+  gap: propTypes.exports.number,
+  shift: propTypes.exports.number,
+  align: /*#__PURE__*/propTypes.exports.oneOf(['start', 'center', 'end']),
+  direction: /*#__PURE__*/propTypes.exports.oneOf(['left', 'right', 'top', 'bottom']),
+  position: /*#__PURE__*/propTypes.exports.oneOf(['auto', 'anchor', 'initial']),
+  overflow: /*#__PURE__*/propTypes.exports.oneOf(['auto', 'visible', 'hidden'])
+};
+const rootMenuPropTypes = {
+  ...menuPropTypes,
+  containerProps: propTypes.exports.object,
+  initialMounted: propTypes.exports.bool,
+  unmountOnClose: propTypes.exports.bool,
+  transition: /*#__PURE__*/propTypes.exports.oneOfType([propTypes.exports.bool, /*#__PURE__*/propTypes.exports.exact({
+    open: propTypes.exports.bool,
+    close: propTypes.exports.bool,
+    item: propTypes.exports.bool
+  })]),
+  transitionTimeout: propTypes.exports.number,
+  boundingBoxRef: propTypes.exports.object,
+  boundingBoxPadding: propTypes.exports.string,
+  reposition: /*#__PURE__*/propTypes.exports.oneOf(['auto', 'initial']),
+  repositionFlag: /*#__PURE__*/propTypes.exports.oneOfType([propTypes.exports.string, propTypes.exports.number]),
+  viewScroll: /*#__PURE__*/propTypes.exports.oneOf(['auto', 'close', 'initial']),
+  submenuOpenDelay: propTypes.exports.number,
+  submenuCloseDelay: propTypes.exports.number,
+  portal: /*#__PURE__*/propTypes.exports.oneOfType([propTypes.exports.bool, /*#__PURE__*/propTypes.exports.exact({
+    target: propTypes.exports.object,
+    stablePosition: propTypes.exports.bool
+  })]),
+  theming: propTypes.exports.string,
+  onItemClick: propTypes.exports.func
+};
+const uncontrolledMenuPropTypes = {
+  instanceRef: /*#__PURE__*/propTypes.exports.oneOfType([propTypes.exports.object, propTypes.exports.func]),
+  onMenuChange: propTypes.exports.func
+};
+
+const useBEM = ({
+  block,
+  element,
+  modifiers,
+  className
+}) => useMemo(() => {
+  const blockElement = element ? `${block}__${element}` : block;
+  let classString = blockElement;
+  modifiers && Object.keys(modifiers).forEach(name => {
+    const value = modifiers[name];
+    if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
+  });
+  let expandedClassName = typeof className === 'function' ? className(modifiers) : className;
+  if (typeof expandedClassName === 'string') {
+    expandedClassName = expandedClassName.trim();
+    if (expandedClassName) classString += ` ${expandedClassName}`;
+  }
+  return classString;
+}, [block, element, modifiers, className]);
+
+const menuContainerClass = 'szh-menu-container';
+const menuClass = 'szh-menu';
+const menuArrowClass = 'arrow';
+const menuItemClass = 'item';
+const HoverItemContext = /*#__PURE__*/createContext();
+const MenuListItemContext = /*#__PURE__*/createContext({});
+const MenuListContext = /*#__PURE__*/createContext({});
+const EventHandlersContext = /*#__PURE__*/createContext({});
+const RadioGroupContext = /*#__PURE__*/createContext({});
+const SettingsContext = /*#__PURE__*/createContext({});
+const Keys = /*#__PURE__*/Object.freeze({
+  ENTER: 'Enter',
+  ESC: 'Escape',
+  SPACE: ' ',
+  HOME: 'Home',
+  END: 'End',
+  LEFT: 'ArrowLeft',
+  RIGHT: 'ArrowRight',
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown'
+});
+const HoverActionTypes = /*#__PURE__*/Object.freeze({
+  RESET: 0,
+  SET: 1,
+  UNSET: 2,
+  INCREASE: 3,
+  DECREASE: 4,
+  FIRST: 5,
+  LAST: 6,
+  SET_INDEX: 7
+});
+const CloseReason = /*#__PURE__*/Object.freeze({
+  CLICK: 'click',
+  CANCEL: 'cancel',
+  BLUR: 'blur',
+  SCROLL: 'scroll'
+});
+const FocusPositions = /*#__PURE__*/Object.freeze({
+  FIRST: 'first',
+  LAST: 'last'
+});
+const MenuStateMap = /*#__PURE__*/Object.freeze({
+  entering: 'opening',
+  entered: 'open',
+  exiting: 'closing',
+  exited: 'closed'
+});
+const positionAbsolute = 'absolute';
+const roleNone = 'presentation';
+const roleMenuitem = 'menuitem';
+const dummyItemProps = {
+  'aria-hidden': true,
+  role: roleMenuitem
+};
+
+const MenuContainer = ({
+  className,
+  containerRef,
+  containerProps,
+  children,
+  isOpen,
+  theming,
+  transition,
+  onClose
+}) => {
+  const itemTransition = getTransition(transition, 'item');
+  const onKeyDown = ({
+    key
+  }) => {
+    switch (key) {
+      case Keys.ESC:
+        safeCall(onClose, {
+          key,
+          reason: CloseReason.CANCEL
+        });
+        break;
+    }
+  };
+  const onBlur = e => {
+    if (isOpen && !e.currentTarget.contains(e.relatedTarget)) {
+      safeCall(onClose, {
+        reason: CloseReason.BLUR
+      });
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    ...mergeProps({
+      onKeyDown,
+      onBlur
+    }, containerProps),
+    className: useBEM({
+      block: menuContainerClass,
+      modifiers: useMemo(() => ({
+        theme: theming,
+        itemTransition
+      }), [theming, itemTransition]),
+      className
+    }),
+    style: {
+      position: 'absolute',
+      ...(containerProps == null ? void 0 : containerProps.style)
+    },
+    ref: containerRef,
+    children: children
+  });
+};
+
+const createSubmenuCtx = () => {
+  let timer,
+    count = 0;
+  return {
+    toggle: isOpen => {
+      isOpen ? count++ : count--;
+      count = Math.max(count, 0);
+    },
+    on: (closeDelay, pending, settled) => {
+      if (count) {
+        if (!timer) timer = setTimeout(() => {
+          timer = 0;
+          pending();
+        }, closeDelay);
+      } else {
+        settled == null || settled();
+      }
+    },
+    off: () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = 0;
+      }
+    }
+  };
+};
+
+const useItems = (menuRef, focusRef) => {
+  const [hoverItem, setHoverItem] = useState();
+  const stateRef = useRef({
+    items: [],
+    hoverIndex: -1,
+    sorted: false
+  });
+  const mutableState = stateRef.current;
+  const updateItems = useCallback((item, isMounted) => {
+    const {
+      items
+    } = mutableState;
+    if (!item) {
+      mutableState.items = [];
+    } else if (isMounted) {
+      items.push(item);
+    } else {
+      const index = items.indexOf(item);
+      if (index > -1) {
+        items.splice(index, 1);
+        if (item.contains(document.activeElement)) {
+          focusRef.current.focus();
+          setHoverItem();
+        }
+      }
+    }
+    mutableState.hoverIndex = -1;
+    mutableState.sorted = false;
+  }, [mutableState, focusRef]);
+  const dispatch = useCallback((actionType, item, nextIndex) => {
+    const {
+      items,
+      hoverIndex
+    } = mutableState;
+    const sortItems = () => {
+      if (mutableState.sorted) return;
+      const orderedNodes = menuRef.current.querySelectorAll('.szh-menu__item');
+      items.sort((a, b) => indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b));
+      mutableState.sorted = true;
+    };
+    let index = -1,
+      newItem = undefined;
+    switch (actionType) {
+      case HoverActionTypes.RESET:
+        break;
+      case HoverActionTypes.SET:
+        newItem = item;
+        break;
+      case HoverActionTypes.UNSET:
+        newItem = prevItem => prevItem === item ? undefined : prevItem;
+        break;
+      case HoverActionTypes.FIRST:
+        sortItems();
+        index = 0;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.LAST:
+        sortItems();
+        index = items.length - 1;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.SET_INDEX:
+        sortItems();
+        index = nextIndex;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.INCREASE:
+        sortItems();
+        index = hoverIndex;
+        if (index < 0) index = items.indexOf(item);
+        index++;
+        if (index >= items.length) index = 0;
+        newItem = items[index];
+        break;
+      case HoverActionTypes.DECREASE:
+        sortItems();
+        index = hoverIndex;
+        if (index < 0) index = items.indexOf(item);
+        index--;
+        if (index < 0) index = items.length - 1;
+        newItem = items[index];
+        break;
+      default:
+        if (process.env.NODE_ENV !== 'production') throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
+    }
+    if (!newItem) index = -1;
+    setHoverItem(newItem);
+    mutableState.hoverIndex = index;
+  }, [menuRef, mutableState]);
+  return {
+    hoverItem,
+    dispatch,
+    updateItems
+  };
+};
+
+const getNativeDimension = (transformed, untransformed) => Math.round(transformed) === untransformed ? transformed : untransformed;
+const getNormalizedClientRect = element => {
+  const rect = element.getBoundingClientRect();
+  rect.width = getNativeDimension(rect.width, element.offsetWidth);
+  rect.height = getNativeDimension(rect.height, element.offsetHeight);
+  return rect;
+};
+
+const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
+  const menuRect = getNormalizedClientRect(menuRef.current);
+  const containerRect = containerRef.current.getBoundingClientRect();
+  const boundingRect = menuScroll === window ? {
+    left: 0,
+    top: 0,
+    right: document.documentElement.clientWidth,
+    bottom: window.innerHeight
+  } : menuScroll.getBoundingClientRect();
+  const padding = parsePadding(boundingBoxPadding);
+  const getLeftOverflow = x => x + containerRect.left - boundingRect.left - padding.left;
+  const getRightOverflow = x => x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
+  const getTopOverflow = y => y + containerRect.top - boundingRect.top - padding.top;
+  const getBottomOverflow = y => y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
+  const confineHorizontally = x => {
+    let leftOverflow = getLeftOverflow(x);
+    if (leftOverflow < 0) {
+      x -= leftOverflow;
+    } else {
+      const rightOverflow = getRightOverflow(x);
+      if (rightOverflow > 0) {
+        x -= rightOverflow;
+        leftOverflow = getLeftOverflow(x);
+        if (leftOverflow < 0) x -= leftOverflow;
+      }
+    }
+    return x;
+  };
+  const confineVertically = y => {
+    let topOverflow = getTopOverflow(y);
+    if (topOverflow < 0) {
+      y -= topOverflow;
+    } else {
+      const bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0) {
+        y -= bottomOverflow;
+        topOverflow = getTopOverflow(y);
+        if (topOverflow < 0) y -= topOverflow;
+      }
+    }
+    return y;
+  };
+  return {
+    menuRect,
+    containerRect,
+    getLeftOverflow,
+    getRightOverflow,
+    getTopOverflow,
+    getBottomOverflow,
+    confineHorizontally,
+    confineVertically
+  };
+};
+
+const placeArrowVertical = ({
+  arrowRef,
+  menuY,
+  anchorRect,
+  containerRect,
+  menuRect
+}) => {
+  let y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
+  const offset = arrowRef.current.offsetHeight * 1.25;
+  y = Math.max(offset, y);
+  y = Math.min(y, menuRect.height - offset);
+  return y;
+};
+
+const placeLeftorRight = ({
+  anchorRect,
+  containerRect,
+  menuRect,
+  placeLeftorRightY,
+  placeLeftX,
+  placeRightX,
+  getLeftOverflow,
+  getRightOverflow,
+  confineHorizontally,
+  confineVertically,
+  arrowRef,
+  arrow,
+  direction,
+  position
+}) => {
+  let computedDirection = direction;
+  let y = placeLeftorRightY;
+  if (position !== 'initial') {
+    y = confineVertically(y);
+    if (position === 'anchor') {
+      y = Math.min(y, anchorRect.bottom - containerRect.top);
+      y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height);
+    }
+  }
+  let x, leftOverflow, rightOverflow;
+  if (computedDirection === 'left') {
+    x = placeLeftX;
+    if (position !== 'initial') {
+      leftOverflow = getLeftOverflow(x);
+      if (leftOverflow < 0) {
+        rightOverflow = getRightOverflow(placeRightX);
+        if (rightOverflow <= 0 || -leftOverflow > rightOverflow) {
+          x = placeRightX;
+          computedDirection = 'right';
+        }
+      }
+    }
+  } else {
+    x = placeRightX;
+    if (position !== 'initial') {
+      rightOverflow = getRightOverflow(x);
+      if (rightOverflow > 0) {
+        leftOverflow = getLeftOverflow(placeLeftX);
+        if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
+          x = placeLeftX;
+          computedDirection = 'left';
+        }
+      }
+    }
+  }
+  if (position === 'auto') x = confineHorizontally(x);
+  const arrowY = arrow ? placeArrowVertical({
+    menuY: y,
+    arrowRef,
+    anchorRect,
+    containerRect,
+    menuRect
+  }) : undefined;
+  return {
+    arrowY,
+    x,
+    y,
+    computedDirection
+  };
+};
+
+const placeArrowHorizontal = ({
+  arrowRef,
+  menuX,
+  anchorRect,
+  containerRect,
+  menuRect
+}) => {
+  let x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
+  const offset = arrowRef.current.offsetWidth * 1.25;
+  x = Math.max(offset, x);
+  x = Math.min(x, menuRect.width - offset);
+  return x;
+};
+
+const placeToporBottom = ({
+  anchorRect,
+  containerRect,
+  menuRect,
+  placeToporBottomX,
+  placeTopY,
+  placeBottomY,
+  getTopOverflow,
+  getBottomOverflow,
+  confineHorizontally,
+  confineVertically,
+  arrowRef,
+  arrow,
+  direction,
+  position
+}) => {
+  let computedDirection = direction === 'top' ? 'top' : 'bottom';
+  let x = placeToporBottomX;
+  if (position !== 'initial') {
+    x = confineHorizontally(x);
+    if (position === 'anchor') {
+      x = Math.min(x, anchorRect.right - containerRect.left);
+      x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width);
+    }
+  }
+  let y, topOverflow, bottomOverflow;
+  if (computedDirection === 'top') {
+    y = placeTopY;
+    if (position !== 'initial') {
+      topOverflow = getTopOverflow(y);
+      if (topOverflow < 0) {
+        bottomOverflow = getBottomOverflow(placeBottomY);
+        if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) {
+          y = placeBottomY;
+          computedDirection = 'bottom';
+        }
+      }
+    }
+  } else {
+    y = placeBottomY;
+    if (position !== 'initial') {
+      bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0) {
+        topOverflow = getTopOverflow(placeTopY);
+        if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
+          y = placeTopY;
+          computedDirection = 'top';
+        }
+      }
+    }
+  }
+  if (position === 'auto') y = confineVertically(y);
+  const arrowX = arrow ? placeArrowHorizontal({
+    menuX: x,
+    arrowRef,
+    anchorRect,
+    containerRect,
+    menuRect
+  }) : undefined;
+  return {
+    arrowX,
+    x,
+    y,
+    computedDirection
+  };
+};
+
+const positionMenu = ({
+  arrow,
+  align,
+  direction,
+  gap,
+  shift,
+  position,
+  anchorRect,
+  arrowRef,
+  positionHelpers
+}) => {
+  const {
+    menuRect,
+    containerRect
+  } = positionHelpers;
+  const isHorizontal = direction === 'left' || direction === 'right';
+  let horizontalOffset = isHorizontal ? gap : shift;
+  let verticalOffset = isHorizontal ? shift : gap;
+  if (arrow) {
+    const arrowElt = arrowRef.current;
+    if (isHorizontal) {
+      horizontalOffset += arrowElt.offsetWidth;
+    } else {
+      verticalOffset += arrowElt.offsetHeight;
+    }
+  }
+  const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
+  const placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
+  const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;
+  const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset;
+  let placeToporBottomX, placeLeftorRightY;
+  if (align === 'end') {
+    placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width;
+    placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height;
+  } else if (align === 'center') {
+    placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2;
+    placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2;
+  } else {
+    placeToporBottomX = anchorRect.left - containerRect.left;
+    placeLeftorRightY = anchorRect.top - containerRect.top;
+  }
+  placeToporBottomX += horizontalOffset;
+  placeLeftorRightY += verticalOffset;
+  const options = {
+    ...positionHelpers,
+    anchorRect,
+    placeLeftX,
+    placeRightX,
+    placeLeftorRightY,
+    placeTopY,
+    placeBottomY,
+    placeToporBottomX,
+    arrowRef,
+    arrow,
+    direction,
+    position
+  };
+  switch (direction) {
+    case 'left':
+    case 'right':
+      return placeLeftorRight(options);
+    case 'top':
+    case 'bottom':
+    default:
+      return placeToporBottom(options);
+  }
+};
+
+const useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+
+function setRef$1(ref, instance) {
+  typeof ref === 'function' ? ref(instance) : ref.current = instance;
+}
+const useCombinedRef = (refA, refB) => useMemo(() => {
+  if (!refA) return refB;
+  if (!refB) return refA;
+  return instance => {
+    setRef$1(refA, instance);
+    setRef$1(refB, instance);
+  };
+}, [refA, refB]);
+
+const offScreen = -9999;
+const MenuList = ({
+  ariaLabel,
+  menuClassName,
+  menuStyle,
+  arrow,
+  arrowProps = {},
+  anchorPoint,
+  anchorRef,
+  containerRef,
+  containerProps,
+  focusProps,
+  externalRef,
+  parentScrollingRef,
+  align = 'start',
+  direction = 'bottom',
+  position = 'auto',
+  overflow = 'visible',
+  setDownOverflow,
+  repositionFlag,
+  captureFocus = true,
+  state,
+  endTransition,
+  isDisabled,
+  menuItemFocus,
+  gap = 0,
+  shift = 0,
+  children,
+  onClose,
+  ...restProps
+}) => {
+  const [menuPosition, setMenuPosition] = useState({
+    x: offScreen,
+    y: offScreen
+  });
+  const [arrowPosition, setArrowPosition] = useState({});
+  const [overflowData, setOverflowData] = useState();
+  const [expandedDirection, setExpandedDirection] = useState(direction);
+  const [submenuCtx] = useState(createSubmenuCtx);
+  const [reposSubmenu, forceReposSubmenu] = useReducer(c => c + 1, 1);
+  const {
+    transition,
+    boundingBoxRef,
+    boundingBoxPadding,
+    rootMenuRef,
+    rootAnchorRef,
+    scrollNodesRef,
+    reposition,
+    viewScroll,
+    submenuCloseDelay
+  } = useContext(SettingsContext);
+  const {
+    submenuCtx: parentSubmenuCtx,
+    reposSubmenu: reposFlag = repositionFlag
+  } = useContext(MenuListContext);
+  const menuRef = useRef(null);
+  const focusRef = useRef();
+  const arrowRef = useRef();
+  const prevOpen = useRef(false);
+  const latestMenuSize = useRef({
+    width: 0,
+    height: 0
+  });
+  const latestHandlePosition = useRef(() => {});
+  const {
+    hoverItem,
+    dispatch,
+    updateItems
+  } = useItems(menuRef, focusRef);
+  const isOpen = isMenuOpen(state);
+  const openTransition = getTransition(transition, 'open');
+  const closeTransition = getTransition(transition, 'close');
+  const scrollNodes = scrollNodesRef.current;
+  const onKeyDown = e => {
+    switch (e.key) {
+      case Keys.HOME:
+        dispatch(HoverActionTypes.FIRST);
+        break;
+      case Keys.END:
+        dispatch(HoverActionTypes.LAST);
+        break;
+      case Keys.UP:
+        dispatch(HoverActionTypes.DECREASE, hoverItem);
+        break;
+      case Keys.DOWN:
+        dispatch(HoverActionTypes.INCREASE, hoverItem);
+        break;
+      case Keys.SPACE:
+        if (e.target && e.target.className.indexOf(menuClass) !== -1) {
+          e.preventDefault();
+        }
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const onAnimationEnd = () => {
+    if (state === 'closing') {
+      setOverflowData();
+    }
+    safeCall(endTransition);
+  };
+  const onPointerMove = e => {
+    e.stopPropagation();
+    submenuCtx.on(submenuCloseDelay, () => {
+      dispatch(HoverActionTypes.RESET);
+      focusRef.current.focus();
+    });
+  };
+  const onPointerLeave = e => {
+    if (e.target === e.currentTarget) submenuCtx.off();
+  };
+  const handlePosition = useCallback(noOverflowCheck => {
+    var _anchorRef$current;
+    const anchorRect = anchorRef ? (_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.getBoundingClientRect() : anchorPoint ? {
+      left: anchorPoint.x,
+      right: anchorPoint.x,
+      top: anchorPoint.y,
+      bottom: anchorPoint.y,
+      width: 0,
+      height: 0
+    } : null;
+    if (!anchorRect) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[React-Menu] Menu might not be positioned properly as one of the anchorRef or anchorPoint prop should be provided. If `anchorRef` is provided, the anchor must be mounted before menu is open.');
+      }
+      return;
+    }
+    if (!scrollNodes.menu) {
+      scrollNodes.menu = (boundingBoxRef ? boundingBoxRef.current : getScrollAncestor(rootMenuRef.current)) || window;
+    }
+    const positionHelpers = getPositionHelpers(containerRef, menuRef, scrollNodes.menu, boundingBoxPadding);
+    let {
+      arrowX,
+      arrowY,
+      x,
+      y,
+      computedDirection
+    } = positionMenu({
+      arrow,
+      align,
+      direction,
+      gap,
+      shift,
+      position,
+      anchorRect,
+      arrowRef,
+      positionHelpers
+    });
+    const {
+      menuRect
+    } = positionHelpers;
+    let menuHeight = menuRect.height;
+    if (!noOverflowCheck && overflow !== 'visible') {
+      const {
+        getTopOverflow,
+        getBottomOverflow
+      } = positionHelpers;
+      let height, overflowAmt;
+      const prevHeight = latestMenuSize.current.height;
+      const bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0 || floatEqual(bottomOverflow, 0) && floatEqual(menuHeight, prevHeight)) {
+        height = menuHeight - bottomOverflow;
+        overflowAmt = bottomOverflow;
+      } else {
+        const topOverflow = getTopOverflow(y);
+        if (topOverflow < 0 || floatEqual(topOverflow, 0) && floatEqual(menuHeight, prevHeight)) {
+          height = menuHeight + topOverflow;
+          overflowAmt = 0 - topOverflow;
+          if (height >= 0) y -= topOverflow;
+        }
+      }
+      if (height >= 0) {
+        menuHeight = height;
+        setOverflowData({
+          height,
+          overflowAmt
+        });
+      } else {
+        setOverflowData();
+      }
+    }
+    if (arrow) setArrowPosition({
+      x: arrowX,
+      y: arrowY
+    });
+    setMenuPosition({
+      x,
+      y
+    });
+    setExpandedDirection(computedDirection);
+    latestMenuSize.current = {
+      width: menuRect.width,
+      height: menuHeight
+    };
+  }, [arrow, align, boundingBoxPadding, direction, gap, shift, position, overflow, anchorPoint, anchorRef, containerRef, boundingBoxRef, rootMenuRef, scrollNodes]);
+  useIsomorphicLayoutEffect$2(() => {
+    if (isOpen) {
+      handlePosition();
+      if (prevOpen.current) forceReposSubmenu();
+    }
+    prevOpen.current = isOpen;
+    latestHandlePosition.current = handlePosition;
+  }, [isOpen, handlePosition, reposFlag]);
+  useIsomorphicLayoutEffect$2(() => {
+    if (overflowData && !setDownOverflow) menuRef.current.scrollTop = 0;
+  }, [overflowData, setDownOverflow]);
+  useIsomorphicLayoutEffect$2(() => updateItems, [updateItems]);
+  useEffect(() => {
+    let {
+      menu: menuScroll
+    } = scrollNodes;
+    if (!isOpen || !menuScroll) return;
+    menuScroll = menuScroll.addEventListener ? menuScroll : window;
+    if (!scrollNodes.anchors) {
+      scrollNodes.anchors = [];
+      let anchorScroll = getScrollAncestor(rootAnchorRef && rootAnchorRef.current);
+      while (anchorScroll && anchorScroll !== menuScroll) {
+        scrollNodes.anchors.push(anchorScroll);
+        anchorScroll = getScrollAncestor(anchorScroll);
+      }
+    }
+    let scroll = viewScroll;
+    if (scrollNodes.anchors.length && scroll === 'initial') scroll = 'auto';
+    if (scroll === 'initial') return;
+    const handleScroll = () => {
+      if (scroll === 'auto') {
+        batchedUpdates(() => handlePosition(true));
+      } else {
+        safeCall(onClose, {
+          reason: CloseReason.SCROLL
+        });
+      }
+    };
+    const scrollObservers = scrollNodes.anchors.concat(viewScroll !== 'initial' ? menuScroll : []);
+    scrollObservers.forEach(o => o.addEventListener('scroll', handleScroll));
+    return () => scrollObservers.forEach(o => o.removeEventListener('scroll', handleScroll));
+  }, [rootAnchorRef, scrollNodes, isOpen, onClose, viewScroll, handlePosition]);
+  const hasOverflow = !!overflowData && overflowData.overflowAmt > 0;
+  useEffect(() => {
+    if (hasOverflow || !isOpen || !parentScrollingRef) return;
+    const handleScroll = () => batchedUpdates(handlePosition);
+    const parentScroll = parentScrollingRef.current;
+    parentScroll.addEventListener('scroll', handleScroll);
+    return () => parentScroll.removeEventListener('scroll', handleScroll);
+  }, [isOpen, hasOverflow, parentScrollingRef, handlePosition]);
+  useEffect(() => {
+    if (typeof ResizeObserver !== 'function' || reposition === 'initial') return;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      const {
+        borderBoxSize,
+        target
+      } = entry;
+      let width, height;
+      if (borderBoxSize) {
+        const {
+          inlineSize,
+          blockSize
+        } = borderBoxSize[0] || borderBoxSize;
+        width = inlineSize;
+        height = blockSize;
+      } else {
+        const borderRect = getNormalizedClientRect(target);
+        width = borderRect.width;
+        height = borderRect.height;
+      }
+      if (width === 0 || height === 0) return;
+      if (floatEqual(width, latestMenuSize.current.width, 1) && floatEqual(height, latestMenuSize.current.height, 1)) return;
+      flushSync$1(() => {
+        latestHandlePosition.current();
+        forceReposSubmenu();
+      });
+    });
+    const observeTarget = menuRef.current;
+    resizeObserver.observe(observeTarget, {
+      box: 'border-box'
+    });
+    return () => resizeObserver.unobserve(observeTarget);
+  }, [reposition]);
+  useEffect(() => {
+    if (!isOpen) {
+      dispatch(HoverActionTypes.RESET);
+      if (!closeTransition) setOverflowData();
+      return;
+    }
+    const {
+      position,
+      alwaysUpdate
+    } = menuItemFocus || {};
+    const setItemFocus = () => {
+      if (position === FocusPositions.FIRST) {
+        dispatch(HoverActionTypes.FIRST);
+      } else if (position === FocusPositions.LAST) {
+        dispatch(HoverActionTypes.LAST);
+      } else if (position >= -1) {
+        dispatch(HoverActionTypes.SET_INDEX, undefined, position);
+      }
+    };
+    if (alwaysUpdate) {
+      setItemFocus();
+    } else if (captureFocus) {
+      const id = setTimeout(() => {
+        const menuElt = menuRef.current;
+        if (menuElt && !menuElt.contains(document.activeElement)) {
+          focusRef.current.focus();
+          setItemFocus();
+        }
+      }, openTransition ? 170 : 100);
+      return () => clearTimeout(id);
+    }
+  }, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
+  const itemContext = useMemo(() => ({
+    isParentOpen: isOpen,
+    submenuCtx,
+    dispatch,
+    updateItems
+  }), [isOpen, submenuCtx, dispatch, updateItems]);
+  let maxHeight, overflowAmt;
+  if (overflowData) {
+    setDownOverflow ? overflowAmt = overflowData.overflowAmt : maxHeight = overflowData.height;
+  }
+  const listContext = useMemo(() => ({
+    reposSubmenu,
+    submenuCtx,
+    overflow,
+    overflowAmt,
+    parentMenuRef: menuRef,
+    parentDir: expandedDirection
+  }), [reposSubmenu, submenuCtx, overflow, overflowAmt, expandedDirection]);
+  const overflowStyle = maxHeight >= 0 ? {
+    maxHeight,
+    overflow
+  } : undefined;
+  const modifiers = useMemo(() => ({
+    state,
+    align,
+    dir: expandedDirection
+  }), [state, align, expandedDirection]);
+  const arrowModifiers = useMemo(() => ({
+    dir: expandedDirection
+  }), [expandedDirection]);
+  const _arrowClassName = useBEM({
+    block: menuClass,
+    element: menuArrowClass,
+    modifiers: arrowModifiers,
+    className: arrowProps.className
+  });
+  const menu = /*#__PURE__*/jsxs("ul", {
+    role: "menu",
+    "aria-label": ariaLabel,
+    ...commonProps(isDisabled),
+    ...mergeProps({
+      onPointerEnter: parentSubmenuCtx == null ? void 0 : parentSubmenuCtx.off,
+      onPointerMove,
+      onPointerLeave,
+      onKeyDown,
+      onAnimationEnd
+    }, restProps),
+    ref: useCombinedRef(externalRef, menuRef),
+    className: useBEM({
+      block: menuClass,
+      modifiers,
+      className: menuClassName
+    }),
+    style: {
+      ...menuStyle,
+      ...overflowStyle,
+      margin: 0,
+      display: state === 'closed' ? 'none' : undefined,
+      position: positionAbsolute,
+      left: menuPosition.x,
+      top: menuPosition.y
+    },
+    children: [/*#__PURE__*/jsx("li", {
+      tabIndex: -1,
+      style: {
+        position: positionAbsolute,
+        left: 0,
+        top: 0,
+        display: 'block',
+        outline: 'none'
+      },
+      ref: focusRef,
+      ...dummyItemProps,
+      ...focusProps
+    }), arrow && /*#__PURE__*/jsx("li", {
+      ...dummyItemProps,
+      ...arrowProps,
+      className: _arrowClassName,
+      style: {
+        display: 'block',
+        position: positionAbsolute,
+        left: arrowPosition.x,
+        top: arrowPosition.y,
+        ...arrowProps.style
+      },
+      ref: arrowRef
+    }), /*#__PURE__*/jsx(MenuListContext.Provider, {
+      value: listContext,
+      children: /*#__PURE__*/jsx(MenuListItemContext.Provider, {
+        value: itemContext,
+        children: /*#__PURE__*/jsx(HoverItemContext.Provider, {
+          value: hoverItem,
+          children: safeCall(children, modifiers)
+        })
+      })
+    })]
+  });
+  return containerProps ? /*#__PURE__*/jsx(MenuContainer, {
+    ...containerProps,
+    isOpen: isOpen,
+    children: menu
+  }) : menu;
+};
+
+const ControlledMenu = /*#__PURE__*/forwardRef(function ControlledMenu({
+  'aria-label': ariaLabel,
+  className,
+  containerProps,
+  initialMounted,
+  unmountOnClose,
+  transition,
+  transitionTimeout,
+  boundingBoxRef,
+  boundingBoxPadding,
+  reposition = 'auto',
+  submenuOpenDelay = 300,
+  submenuCloseDelay = 150,
+  viewScroll = 'initial',
+  portal,
+  theming,
+  onItemClick,
+  ...restProps
+}, externalRef) {
+  const containerRef = useRef(null);
+  const scrollNodesRef = useRef({});
+  const {
+    anchorRef,
+    state,
+    onClose
+  } = restProps;
+  const settings = useMemo(() => ({
+    initialMounted,
+    unmountOnClose,
+    transition,
+    transitionTimeout,
+    boundingBoxRef,
+    boundingBoxPadding,
+    rootMenuRef: containerRef,
+    rootAnchorRef: anchorRef,
+    scrollNodesRef,
+    reposition,
+    viewScroll,
+    submenuOpenDelay,
+    submenuCloseDelay
+  }), [initialMounted, unmountOnClose, transition, transitionTimeout, anchorRef, boundingBoxRef, boundingBoxPadding, reposition, viewScroll, submenuOpenDelay, submenuCloseDelay]);
+  const eventHandlers = useMemo(() => ({
+    handleClick(event, isCheckorRadio) {
+      if (!event.stopPropagation) safeCall(onItemClick, event);
+      let keepOpen = event.keepOpen;
+      if (keepOpen === undefined) {
+        keepOpen = isCheckorRadio && event.key === Keys.SPACE;
+      }
+      if (!keepOpen) {
+        safeCall(onClose, {
+          value: event.value,
+          key: event.key,
+          reason: CloseReason.CLICK
+        });
+      }
+    },
+    handleClose(key) {
+      safeCall(onClose, {
+        key,
+        reason: CloseReason.CLICK
+      });
+    }
+  }), [onItemClick, onClose]);
+  if (!state) return null;
+  const menuList = /*#__PURE__*/jsx(SettingsContext.Provider, {
+    value: settings,
+    children: /*#__PURE__*/jsx(EventHandlersContext.Provider, {
+      value: eventHandlers,
+      children: /*#__PURE__*/jsx(MenuList, {
+        ...restProps,
+        ariaLabel: ariaLabel || 'Menu',
+        externalRef: externalRef,
+        containerRef: containerRef,
+        containerProps: {
+          className,
+          containerRef,
+          containerProps,
+          theming,
+          transition,
+          onClose
+        }
+      })
+    })
+  });
+  if (portal === true && typeof document !== 'undefined') {
+    return /*#__PURE__*/createPortal(menuList, document.body);
+  } else if (portal) {
+    return portal.target ? /*#__PURE__*/createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+  }
+  return menuList;
+});
+process.env.NODE_ENV !== "production" ? ControlledMenu.propTypes = {
+  ...rootMenuPropTypes,
+  state: /*#__PURE__*/propTypes.exports.oneOf( /*#__PURE__*/values(MenuStateMap)),
+  anchorPoint: /*#__PURE__*/propTypes.exports.exact({
+    x: propTypes.exports.number,
+    y: propTypes.exports.number
+  }),
+  anchorRef: propTypes.exports.object,
+  captureFocus: propTypes.exports.bool,
+  menuItemFocus: /*#__PURE__*/propTypes.exports.exact({
+    position: /*#__PURE__*/propTypes.exports.oneOfType([propTypes.exports.string, propTypes.exports.number]),
+    alwaysUpdate: propTypes.exports.bool
+  }),
+  onClose: propTypes.exports.func
+} : void 0;
+
+const PRE_ENTER = 0;
+const ENTERING = 1;
+const ENTERED = 2;
+const PRE_EXIT = 3;
+const EXITING = 4;
+const EXITED = 5;
+const UNMOUNTED = 6;
+const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+const getState = status => ({
+  _s: status,
+  status: STATUS[status],
+  isEnter: status < PRE_EXIT,
+  isMounted: status !== UNMOUNTED,
+  isResolved: status === ENTERED || status > EXITING
+});
+const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
+const getEndStatus = (status, unmountOnExit) => {
+  switch (status) {
+    case ENTERING:
+    case PRE_ENTER:
+      return ENTERED;
+    case EXITING:
+    case PRE_EXIT:
+      return startOrEnd(unmountOnExit);
+  }
+};
+const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
+const nextTick = (transitState, status) => setTimeout(() => {
+  // Reading document.body.offsetTop can force browser to repaint before transition to the next state
+  isNaN(document.body.offsetTop) || transitState(status + 1);
+}, 0);
+
+const updateState = (status, setState, latestState, timeoutId, onChange) => {
+  clearTimeout(timeoutId.current);
+  const state = getState(status);
+  setState(state);
+  latestState.current = state;
+  onChange && onChange({
+    current: state
+  });
+};
+const useTransition = ({
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
+  const latestState = useRef(state);
+  const timeoutId = useRef();
+  const [enterTimeout, exitTimeout] = getTimeout(timeout);
+  const endTransition = useCallback(() => {
+    const status = getEndStatus(latestState.current._s, unmountOnExit);
+    status && updateState(status, setState, latestState, timeoutId, onChange);
+  }, [onChange, unmountOnExit]);
+  const toggle = useCallback(toEnter => {
+    const transitState = status => {
+      updateState(status, setState, latestState, timeoutId, onChange);
+      switch (status) {
+        case ENTERING:
+          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
+          break;
+        case EXITING:
+          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
+          break;
+        case PRE_ENTER:
+        case PRE_EXIT:
+          timeoutId.current = nextTick(transitState, status);
+          break;
+      }
+    };
+    const enterStage = latestState.current.isEnter;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+    if (toEnter) {
+      !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
+    } else {
+      enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+    }
+  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  useEffect(() => () => clearTimeout(timeoutId.current), []);
+  return [state, toggle, endTransition];
+};
+
+const useMenuState = ({
+  initialOpen,
+  initialMounted,
+  unmountOnClose,
+  transition,
+  transitionTimeout = 500
+} = {}) => {
+  const [{
+    status
+  }, toggleMenu, endTransition] = useTransition({
+    initialEntered: initialOpen,
+    mountOnEnter: !initialMounted,
+    unmountOnExit: unmountOnClose,
+    timeout: transitionTimeout,
+    enter: getTransition(transition, 'open'),
+    exit: getTransition(transition, 'close')
+  });
+  return [{
+    state: MenuStateMap[status],
+    endTransition
+  }, toggleMenu];
+};
+
+const useMenuStateAndFocus = options => {
+  const [menuProps, toggleMenu] = useMenuState(options);
+  const [menuItemFocus, setMenuItemFocus] = useState();
+  const openMenu = (position, alwaysUpdate) => {
+    setMenuItemFocus({
+      position,
+      alwaysUpdate
+    });
+    toggleMenu(true);
+  };
+  return [{
+    menuItemFocus,
+    ...menuProps
+  }, toggleMenu, openMenu];
+};
+
+const useClick = (state, onToggle) => {
+  if (process.env.NODE_ENV !== 'production' && typeof onToggle !== 'function') {
+    throw new Error('[React-Menu] useClick/useHover requires a function in the second parameter.');
+  }
+  const [skipOpen] = useState({});
+  return {
+    onMouseDown: () => {
+      skipOpen.v = state && state !== 'closed';
+    },
+    onClick: e => skipOpen.v ? skipOpen.v = false : onToggle(true, e)
+  };
+};
+
+const useMenuChange = (onMenuChange, isOpen) => {
+  const prevOpen = useRef(isOpen);
+  useEffect(() => {
+    if (prevOpen.current !== isOpen) safeCall(onMenuChange, {
+      open: isOpen
+    });
+    prevOpen.current = isOpen;
+  }, [onMenuChange, isOpen]);
+};
+
+const Menu = /*#__PURE__*/forwardRef(function Menu({
+  'aria-label': ariaLabel,
+  captureFocus: _,
+  initialOpen: _1,
+  menuButton,
+  instanceRef,
+  onMenuChange,
+  ...restProps
+}, externalRef) {
+  const [stateProps, toggleMenu, openMenu] = useMenuStateAndFocus(restProps);
+  const {
+    state
+  } = stateProps;
+  const isOpen = isMenuOpen(state);
+  const buttonRef = useRef(null);
+  const anchorProps = useClick(state, (_, e) => openMenu(!e.detail ? FocusPositions.FIRST : undefined));
+  const handleClose = useCallback(e => {
+    toggleMenu(false);
+    if (e.key) buttonRef.current.focus();
+  }, [toggleMenu]);
+  const onKeyDown = e => {
+    switch (e.key) {
+      case Keys.UP:
+        openMenu(FocusPositions.LAST);
+        break;
+      case Keys.DOWN:
+        openMenu(FocusPositions.FIRST);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+  const button = safeCall(menuButton, {
+    open: isOpen
+  });
+  if (!button || !button.type) throw new Error('Menu requires a menuButton prop.');
+  const buttonProps = {
+    ref: useCombinedRef(button.ref, buttonRef),
+    ...mergeProps({
+      onKeyDown,
+      ...anchorProps
+    }, button.props)
+  };
+  if (getName(button.type) === 'MenuButton') {
+    buttonProps.isOpen = isOpen;
+  }
+  const renderButton = /*#__PURE__*/cloneElement(button, buttonProps);
+  useMenuChange(onMenuChange, isOpen);
+  useImperativeHandle(instanceRef, () => ({
+    openMenu,
+    closeMenu: () => toggleMenu(false)
+  }));
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [renderButton, /*#__PURE__*/jsx(ControlledMenu, {
+      ...restProps,
+      ...stateProps,
+      "aria-label": ariaLabel || (typeof button.props.children === 'string' ? button.props.children : 'Menu'),
+      anchorRef: buttonRef,
+      ref: externalRef,
+      onClose: handleClose
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" ? Menu.propTypes = {
+  ...rootMenuPropTypes,
+  ...uncontrolledMenuPropTypes,
+  menuButton: propTypes.exports.oneOfType([propTypes.exports.element, propTypes.exports.func]).isRequired
+} : void 0;
+
+const withHovering = (name, WrappedComponent) => {
+  const Component = /*#__PURE__*/memo(WrappedComponent);
+  const WithHovering = /*#__PURE__*/forwardRef((props, ref) => {
+    const itemRef = useRef(null);
+    return /*#__PURE__*/jsx(Component, {
+      ...props,
+      itemRef: itemRef,
+      externalRef: ref,
+      isHovering: useContext(HoverItemContext) === itemRef.current
+    });
+  });
+  WithHovering.displayName = `WithHovering(${name})`;
+  return WithHovering;
+};
+
+const useItemEffect = (isDisabled, itemRef, updateItems) => {
+  useIsomorphicLayoutEffect$2(() => {
+    if (process.env.NODE_ENV !== 'production' && !updateItems) {
+      throw new Error(`[React-Menu] This menu item or submenu should be rendered under a menu: ${itemRef.current.outerHTML}`);
+    }
+    if (isDisabled) return;
+    const item = itemRef.current;
+    updateItems(item, true);
+    return () => {
+      updateItems(item);
+    };
+  }, [isDisabled, itemRef, updateItems]);
+};
+
+const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
+  const {
+    submenuCloseDelay
+  } = useContext(SettingsContext);
+  const {
+    isParentOpen,
+    submenuCtx,
+    dispatch,
+    updateItems
+  } = useContext(MenuListItemContext);
+  const setHover = () => {
+    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+  };
+  const unsetHover = () => {
+    !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current);
+  };
+  const onBlur = e => {
+    if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover();
+  };
+  const onPointerMove = e => {
+    if (!isDisabled) {
+      e.stopPropagation();
+      submenuCtx.on(submenuCloseDelay, setHover, setHover);
+    }
+  };
+  const onPointerLeave = (_, keepHover) => {
+    submenuCtx.off();
+    !keepHover && unsetHover();
+  };
+  useItemEffect(isDisabled, itemRef, updateItems);
+  useEffect(() => {
+    if (isHovering && isParentOpen) {
+      focusRef.current && focusRef.current.focus();
+    }
+  }, [focusRef, isHovering, isParentOpen]);
+  return {
+    setHover,
+    onBlur,
+    onPointerMove,
+    onPointerLeave
+  };
+};
+
+const MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem({
+  className,
+  value,
+  href,
+  type,
+  checked,
+  disabled,
+  children,
+  onClick,
+  isHovering,
+  itemRef,
+  externalRef,
+  ...restProps
+}) {
+  const isDisabled = !!disabled;
+  const {
+    setHover,
+    ...restStateProps
+  } = useItemState(itemRef, itemRef, isHovering, isDisabled);
+  const eventHandlers = useContext(EventHandlersContext);
+  const radioGroup = useContext(RadioGroupContext);
+  const isRadio = type === 'radio';
+  const isCheckBox = type === 'checkbox';
+  const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
+  const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
+  const handleClick = e => {
+    if (isDisabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    const event = {
+      value,
+      syntheticEvent: e
+    };
+    if (e.key !== undefined) event.key = e.key;
+    if (isCheckBox) event.checked = !isChecked;
+    if (isRadio) event.name = radioGroup.name;
+    safeCall(onClick, event);
+    if (isRadio) safeCall(radioGroup.onRadioChange, event);
+    eventHandlers.handleClick(event, isCheckBox || isRadio);
+  };
+  const handleKeyDown = e => {
+    if (!isHovering) return;
+    switch (e.key) {
+      case Keys.ENTER:
+        e.preventDefault();
+      case Keys.SPACE:
+        isAnchor ? itemRef.current.click() : handleClick(e);
+    }
+  };
+  const modifiers = useMemo(() => ({
+    type,
+    disabled: isDisabled,
+    hover: isHovering,
+    checked: isChecked,
+    anchor: isAnchor
+  }), [type, isDisabled, isHovering, isChecked, isAnchor]);
+  const mergedProps = mergeProps({
+    ...restStateProps,
+    onPointerDown: setHover,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick
+  }, restProps);
+  const menuItemProps = {
+    role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : roleMenuitem,
+    'aria-checked': isRadio || isCheckBox ? isChecked : undefined,
+    ...commonProps(isDisabled, isHovering),
+    ...mergedProps,
+    ref: useCombinedRef(externalRef, itemRef),
+    className: useBEM({
+      block: menuClass,
+      element: menuItemClass,
+      modifiers,
+      className
+    }),
+    children: useMemo(() => safeCall(children, modifiers), [children, modifiers])
+  };
+  return isAnchor ? /*#__PURE__*/jsx("li", {
+    role: roleNone,
+    children: /*#__PURE__*/jsx("a", {
+      href: href,
+      ...menuItemProps
+    })
+  }) : /*#__PURE__*/jsx("li", {
+    ...menuItemProps
+  });
+});
+process.env.NODE_ENV !== "production" ? MenuItem.propTypes = {
+  ...stylePropTypes(),
+  value: propTypes.exports.any,
+  href: propTypes.exports.string,
+  type: /*#__PURE__*/propTypes.exports.oneOf(['checkbox', 'radio']),
+  checked: propTypes.exports.bool,
+  disabled: propTypes.exports.bool,
+  children: /*#__PURE__*/propTypes.exports.oneOfType([propTypes.exports.node, propTypes.exports.func]),
+  onClick: propTypes.exports.func
+} : void 0;
+
+function Navbar(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
     navbarOpened,
     appMenu
@@ -5185,26 +6774,112 @@ function Navbar() {
       return !a.hasPermissions || FluxoClientSys.Instance.security.currentUser.hasPermissions((_a = a.permissions) !== null && _a !== void 0 ? _a : []);
     });
   };
-  return jsx(AppShell.Navbar, {
-    children: jsx(AppShell.Section, {
-      grow: true,
-      my: "md",
-      component: ScrollArea,
-      children: jsx(Stack, {
-        justify: "center",
+  return jsxs(Fragment, {
+    children: [props.shellUi.navigation === ShellUINavigation.Sidebar && jsx(AppShell.Navbar, {
+      children: jsx(AppShell.Section, {
+        grow: true,
+        my: "md",
+        component: ScrollArea,
+        children: jsx(Stack, {
+          justify: "center",
+          align: 'center',
+          gap: 8,
+          children: getPermittedNavBarItems().map((e, i) => {
+            const IconComponent = e.icon ? IconFactory.getIcon(e.icon) : IconFactory.getIcon('Dashboard');
+            return jsx(NavBarItem, {
+              level: 0,
+              routerLink: e.routerLink,
+              icon: IconComponent,
+              label: e.label,
+              links: e.children && e.children.length > 0 ? e.children : undefined
+            }, i);
+          })
+        })
+      })
+    }), props.shellUi.navigation === ShellUINavigation.Topbar && jsx(AppShell.Header, {
+      style: {
+        top: 48,
+        height: 40,
+        background: '#fff',
+        boxShadow: 'rgba(33, 33, 33, 0.1) 2px 1px 1px'
+      },
+      children: jsx(Group, {
         align: 'center',
-        gap: 8,
+        gap: 0,
         children: getPermittedNavBarItems().map((e, i) => {
-          const IconComponent = e.icon ? IconFactory.getIcon(e.icon) : IconFactory.getIcon('Dashboard');
-          return jsx(NavBarItem, {
-            level: 0,
-            routerLink: e.routerLink,
-            icon: IconComponent,
-            label: e.label,
-            links: e.children && e.children.length > 0 ? e.children : undefined
+          return jsx(HorizontalRecursiveMenuItem, {
+            item: e
           }, i);
         })
       })
+    })]
+  });
+}
+function HorizontalRecursiveMenuItem(props) {
+  var _a;
+  const theme = useMantineTheme();
+  const colorScheme = useMantineColorScheme();
+  const IconComponent = props.item.icon ? IconFactory.getIcon(props.item.icon) : IconFactory.getIcon('Dashboard');
+  const InnerMenuItemComponent = props => {
+    const InnerIconComponent = props.item.icon ? IconFactory.getIcon(props.item.icon) : IconFactory.getIcon('Dashboard');
+    if (props.item.children && props.item.children.length > 0) {
+      return jsxs(Group, {
+        pl: props.withPaddingLR ? 12 : 'inherit',
+        pr: props.withPaddingLR ? 12 : 'inherit',
+        children: [InnerIconComponent, jsx(Text, {
+          size: 'sm',
+          children: props.item.label
+        })]
+      });
+    } else {
+      return jsx(Link, {
+        style: {
+          color: colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+          textDecoration: 'none'
+        },
+        state: {
+          title: props.item.label
+        },
+        to: '/' + props.item.routerLink,
+        children: jsxs(Group, {
+          children: [InnerIconComponent, jsx(Text, {
+            size: 'sm',
+            children: props.item.label
+          })]
+        })
+      }, props.item.label + '_' + props.item);
+    }
+  };
+  if (props.item.children && props.item.children.length === 0) {
+    return jsx(InnerMenuItemComponent, {
+      withPaddingLR: true,
+      item: props.item
+    });
+  }
+  return jsx(Menu, {
+    align: 'start',
+    arrow: true,
+    gap: -12,
+    menuButton: jsxs(Group, {
+      h: 40,
+      style: {
+        paddingLeft: 12,
+        cursor: 'pointer'
+      },
+      children: [IconComponent, jsx(Text, {
+        size: 'sm',
+        children: props.item.label
+      }), jsx(Divider, {
+        orientation: 'vertical'
+      })]
+    }),
+    children: (_a = props.item.children) === null || _a === void 0 ? void 0 : _a.map((e, i) => {
+      return jsx(MenuItem, {
+        children: jsx(InnerMenuItemComponent, {
+          withPaddingLR: false,
+          item: e
+        })
+      }, i);
     })
   });
 }
@@ -5314,11 +6989,18 @@ function AppLayout(props) {
       transitionDuration: 0,
       layout: 'default',
       children: [jsx(AppBar, {
+        shellUi: props.ui,
         brandName: props.brandName
-      }), jsx(Navbar, {}), jsx(AppShell.Main, {
+      }), jsx(Navbar, {
+        shellUi: props.ui
+      }), jsx(AppShell.Main, {
+        style: {
+          paddingTop: props.ui.navigation === ShellUINavigation.Topbar ? 88 : 'inherit'
+        },
         children: jsx(Suspense, {
           fallback: jsx(Loader, {}),
           children: jsx(AppContent, {
+            shellUi: props.ui,
             withMultipleSessions: props.withMultipleSessions
           })
         })
@@ -5738,6 +7420,9 @@ function Ui() {
             },
             p: 0,
             children: jsx(AppBar, {
+              shellUi: {
+                navigation: ShellUINavigation.Sidebar
+              },
               previewMode: {
                 logo: newLogoBase64,
                 logoHeight: newLogoHeight,
@@ -7340,7 +9025,7 @@ var ResizeObserverController = (function () {
     return ResizeObserverController;
 }());
 
-var ResizeObserver = (function () {
+var ResizeObserver$1 = (function () {
     function ResizeObserver(callback) {
         if (arguments.length === 0) {
             throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -19540,7 +21225,7 @@ function AnimateHeight(props) {
         open: { opacity: 1, height: "auto" },
         close: { opacity: 0, height: 0 },
     } : _b, children = props.children;
-    var _c = useMeasure({ polyfill: ResizeObserver }), ref = _c[0], height = _c[1].height;
+    var _c = useMeasure({ polyfill: ResizeObserver$1 }), ref = _c[0], height = _c[1].height;
     var _d = useState(isVisible), isVisibleChildren = _d[0], setIsVisibleChildren = _d[1];
     var _e = useState(isVisible), isVisibleContainer = _e[0], setIsVisibleContainer = _e[1];
     var _f = useState(false), transition = _f[0], setTransition = _f[1];
@@ -27793,30 +29478,30 @@ function AppItem(props) {
       }), jsx(Badge, {
         color: 'gray',
         children: moment(props.app.installationDate).format("DD/MM/yyyy")
-      }), jsxs(Menu, {
+      }), jsxs(Menu$1, {
         shadow: "md",
         width: 200,
-        children: [jsx(Menu.Target, {
+        children: [jsx(Menu$1.Target, {
           children: jsx(ActionIcon, {
             children: jsx(IconDotsVertical, {
               size: 18
             })
           })
-        }), jsxs(Menu.Dropdown, {
-          children: [jsx(Menu.Item, {
+        }), jsxs(Menu$1.Dropdown, {
+          children: [jsx(Menu$1.Item, {
             leftSection: jsx(IconCircleOff, {
               size: 14
             }),
             onClick: props.app.state == AppState.Active ? disable : enable,
             children: props.app.state == AppState.Active ? 'Disattiva' : 'Attiva'
-          }), jsx(Menu.Item, {
+          }), jsx(Menu$1.Item, {
             onClick: () => setShowUpgradeAppModal(true),
             leftSection: jsx(IconArrowUp, {
               color: 'green',
               size: 14
             }),
             children: "Aggiorna"
-          }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
+          }), jsx(Menu$1.Divider, {}), jsx(Menu$1.Item, {
             color: 'red',
             onClick: () => setShowDeleteModal(true),
             leftSection: jsx(IconTrash, {
@@ -28004,23 +29689,23 @@ function AppJitItem(props) {
       }), jsx(Badge, {
         color: 'gray',
         children: moment(props.app.installationDate).format("DD/MM/yyyy")
-      }), jsxs(Menu, {
+      }), jsxs(Menu$1, {
         shadow: "md",
         width: 200,
-        children: [jsx(Menu.Target, {
+        children: [jsx(Menu$1.Target, {
           children: jsx(ActionIcon, {
             children: jsx(IconDotsVertical, {
               size: 18
             })
           })
-        }), jsxs(Menu.Dropdown, {
-          children: [jsx(Menu.Item, {
+        }), jsxs(Menu$1.Dropdown, {
+          children: [jsx(Menu$1.Item, {
             leftSection: jsx(IconCircleOff, {
               size: 14
             }),
             onClick: props.app.state == AppState.Active ? disable : enable,
             children: props.app.state == AppState.Active ? 'Disattiva' : 'Attiva'
-          }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
+          }), jsx(Menu$1.Divider, {}), jsx(Menu$1.Item, {
             color: 'red',
             onClick: () => setShowDeleteModal(true),
             leftSection: jsx(IconTrash, {
@@ -29063,17 +30748,17 @@ function DomainRoleGrid() {
                 }), jsx(Table.Td, {
                   w: 100,
                   align: "right",
-                  children: jsxs(Menu, {
+                  children: jsxs(Menu$1, {
                     shadow: "md",
                     width: 200,
-                    children: [jsx(Menu.Target, {
+                    children: [jsx(Menu$1.Target, {
                       children: jsx(ActionIcon, {
                         children: jsx(IconDotsVertical, {
                           size: 18
                         })
                       })
-                    }), jsxs(Menu.Dropdown, {
-                      children: [jsx(Menu.Item, {
+                    }), jsxs(Menu$1.Dropdown, {
+                      children: [jsx(Menu$1.Item, {
                         leftSection: jsx(IconGridDots, {
                           size: 14
                         }),
@@ -29082,7 +30767,7 @@ function DomainRoleGrid() {
                           setUpdateDomainFrontendsModal(true);
                         },
                         children: "Aree funzionali"
-                      }), jsx(Menu.Item, {
+                      }), jsx(Menu$1.Item, {
                         leftSection: jsx(IconLock, {
                           size: 14
                         }),
@@ -29091,7 +30776,7 @@ function DomainRoleGrid() {
                           setUpdateDomainRolePermissionsModal(true);
                         },
                         children: "Permessi"
-                      }), jsx(Menu.Item, {
+                      }), jsx(Menu$1.Item, {
                         onClick: () => {
                           setCurrentDomainRole(element);
                           setDomainRoleModalOpen(true);
@@ -29100,7 +30785,7 @@ function DomainRoleGrid() {
                           size: 14
                         }),
                         children: "Modifica"
-                      }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
+                      }), jsx(Menu$1.Divider, {}), jsx(Menu$1.Item, {
                         color: 'red',
                         onClick: () => deleteDomainRole(element.id),
                         leftSection: jsx(IconTrash, {
@@ -29424,17 +31109,17 @@ function UsersGrid() {
               })
             }), jsx(Table.Td, {
               align: "right",
-              children: jsxs(Menu, {
+              children: jsxs(Menu$1, {
                 shadow: "md",
                 width: 200,
-                children: [jsx(Menu.Target, {
+                children: [jsx(Menu$1.Target, {
                   children: jsx(ActionIcon, {
                     children: jsx(IconDotsVertical, {
                       size: 18
                     })
                   })
-                }), jsxs(Menu.Dropdown, {
-                  children: [jsx(Menu.Item, {
+                }), jsxs(Menu$1.Dropdown, {
+                  children: [jsx(Menu$1.Item, {
                     onClick: () => {
                       setCurrentUser(element);
                       setNewUserModalOpen(true);
@@ -29443,7 +31128,7 @@ function UsersGrid() {
                       size: 14
                     }),
                     children: "Modifica"
-                  }), jsx(Menu.Item, {
+                  }), jsx(Menu$1.Item, {
                     color: 'red',
                     onClick: () => deletion(element.id),
                     leftSection: jsx(IconTrash, {
@@ -30480,6 +32165,11 @@ function FrontendSwitcher(props) {
   });
 }
 
+var ShellUINavigation;
+(function (ShellUINavigation) {
+  ShellUINavigation[ShellUINavigation["Sidebar"] = 1] = "Sidebar";
+  ShellUINavigation[ShellUINavigation["Topbar"] = 2] = "Topbar";
+})(ShellUINavigation || (ShellUINavigation = {}));
 function FluxoShell(props) {
   const [initialOperationsFinished, setInitialOperationsFinished] = useState(false);
   const [router, setRouter] = useState();
@@ -30658,6 +32348,7 @@ function FluxoShell(props) {
         const FrontendLayout = () => {
           var _a, _b;
           return (_a = frontendByRender === null || frontendByRender === void 0 ? void 0 : frontendByRender.layout) !== null && _a !== void 0 ? _a : jsx(AppLayout, {
+            ui: props.ui,
             withMultipleSessions: props.withMultipleSessions,
             brandName: (_b = props.brandName) !== null && _b !== void 0 ? _b : 'Fluxo',
             appVersion: props.appVersion
@@ -30880,4 +32571,4 @@ function AppInner(props) {
   });
 }
 
-export { FluxoShell, FrontendSwitch };
+export { FluxoShell, FrontendSwitch, ShellUINavigation };