@fibery/ui-kit 1.37.0 → 1.38.1

package/src/kbd.tsx

@@ -0,0 +1,46 @@
+import {css, cx} from "@linaria/core";
+import {border, lineHeight, space, textStyles, themeVars} from "./design-system";
+import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
+
+export const kbdCss = css`
+  ${{
+    ...textStyles.small,
+    ...textStyles.numeric.tabularOn,
+  }}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${space.s18}px;
+  height: ${space.s18}px;
+  padding: ${space.s2}px;
+  border-radius: ${border.radius4}px;
+  border: ${themeVars.shortcutBorderColor};
+  color: ${themeVars.shortcutTextColor};
+  line-height: ${lineHeight.nowrap};
+  white-space: nowrap;
+  user-select: none;
+`;
+
+export const Kbd = ({className, ...props}: React.ComponentProps<"kbd">): JSX.Element | null => {
+  const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
+  if (!isSupportHardwareKeyboard) {
+    return null;
+  }
+  return <kbd className={cx(kbdCss, className)} {...props} />;
+};
+
+export const KbdGroup = ({className, ...props}: React.ComponentProps<"kbd">) => {
+  return (
+    <kbd
+      className={cx(
+        className,
+        css`
+          display: flex;
+          align-items: center;
+          gap: ${space.s2}px;
+        `
+      )}
+      {...props}
+    />
+  );
+};

package/src/layout-styles.ts

@@ -5,18 +5,38 @@ import {
   sidebarMenuItemHeightVar,
   sidebarMenuIconSizeVar,
   textStyles,
+  menuItemHeightVar,
 } from "./design-system";
-import {mobileRootClassName} from "./mobile-styles";
+import {
+  keyboardHeightVar,
+  keyboardInsetBottomVar,
+  mobileRootClassName,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+  safeAreaInsetBottomVar,
+} from "./mobile-styles";
 
 export const layoutStyles = css`
   :global() {
     html:root {
+      ${safeAreaInsetLeftVar}: var(--app-safe-area-inset-left, env(safe-area-inset-left));
+      ${safeAreaInsetRightVar}: var(--app-safe-area-inset-right, env(safe-area-inset-right));
+      ${safeAreaInsetTopVar}: var(--app-safe-area-inset-top, env(safe-area-inset-top));
+      ${safeAreaInsetBottomVar}: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom));
+      ${keyboardInsetBottomVar}: var(--app-current-keyboard-height, 0px);
+      ${keyboardHeightVar}: 350px;
+
+      ${menuItemHeightVar}: ${layout.menuItemHeight}px;
       ${sidebarMenuItemHeightVar}: ${layout.newMenuItemHeight}px;
       ${sidebarMenuIconSizeVar}: ${layout.newMenuIconSize}px;
       ${listRowSurfaceFontSizeVar}: ${textStyles.regular.fontSize}px;
+
       &.${mobileRootClassName} {
+        ${menuItemHeightVar}: ${layout.mobileMenuItemHeight}px;
         ${sidebarMenuItemHeightVar}: ${layout.mobileSidebarMenuItemHeight}px;
         ${sidebarMenuIconSizeVar}: ${layout.mobileSidebarIconSize}px;
+        ${listRowSurfaceFontSizeVar}: ${textStyles.big.fontSize}px;
       }
     }
   }

package/src/lists/actions-menu-row-surface.tsx

@@ -7,6 +7,7 @@ import {useActionsMenuContext} from "../actions-menu";
 import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
 import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
 import {colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {useIsSupportHover} from "../use-is-support-hover";
 import {
   ListRowContent,
   ListRowContentProps,
@@ -66,6 +67,7 @@ export const actionMenuItemSurface = css`
 export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSurfaceProps>(
   ({testId, className, loading, selected, hovered, focused, title, disabled, children, dangerous, ...props}, ref) => {
     const id = useId();
+    const platformSupportsHover = useIsSupportHover();
     const activeDangerousRow = useActiveDangerousRow();
     const showWarning = activeDangerousRow === id;
     const onSelect = useCallbackRef(props.onSelect || _.noop);
@@ -100,7 +102,7 @@ export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSu
           listRowSurfaceStylesBase,
           actionMenuItemSurface,
           className,
-          hovered === undefined && NATURAL_HOVER_CLASS,
+          platformSupportsHover && hovered === undefined && NATURAL_HOVER_CLASS,
           focused === undefined && NATURAL_FOCUS_CLASS,
           focused && "focus",
           disabled && "done",

package/src/lists/list-row-surface.tsx

@@ -1,6 +1,8 @@
 import {css, cx} from "@linaria/core";
 import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
 import {border, layoutVars, space, textStyles, themeVars, transition} from "../design-system";
+import {useIsSupportHover} from "../use-is-support-hover";
+import {mobileRootSelector} from "../mobile-styles";
 
 interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
@@ -152,6 +154,7 @@ export const listRowSurfaceStatesDark = css`
 
 export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
   ({selected, focused, darker, hovered, done, className, children, ...rest}, ref) => {
+    const platformSupportsHover = useIsSupportHover();
     return (
       <div
         {...rest}
@@ -159,7 +162,7 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
           listRowSurfaceStylesBase,
           darker ? listRowSurfaceStatesDark : listRowSurfaceStatesDefault,
           className,
-          hovered === undefined && NATURAL_HOVER_CLASS,
+          platformSupportsHover && hovered === undefined && NATURAL_HOVER_CLASS,
           focused === undefined && NATURAL_FOCUS_CLASS,
           focused && "focus",
           hovered && "hover",
@@ -204,6 +207,9 @@ const ListRowContentSegment = css`
   min-width: 0; // allows ellipsis in flex contexts :)
   max-width: 100%;
   width: 100%;
+  ${mobileRootSelector} & {
+    ${textStyles.big}
+  }
 `;
 export const ListRowContent = forwardRef<HTMLDivElement, ListRowContentProps>(
   (

package/src/mobile-keyboard-aware-popup.tsx

@@ -0,0 +1,87 @@
+import {ReactNode, useEffect, useRef} from "react";
+import {createPortal} from "react-dom";
+import _ from "lodash";
+import {css, cx} from "@linaria/core";
+import {border, space, themeVars} from "./design-system";
+import {keyboardInsetBottomVar, safeAreaInsetBottomVar} from "./mobile-styles";
+
+export const mobileKeyboardAwarePopupZIndex = 1001;
+
+export function MobileKeyboardAwarePopup({children, className}: {children: ReactNode; className?: string}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return _.noop;
+    }
+
+    const manualKeyboardModeHandler = document.documentElement.classList.contains("fibery-manual-keyboard-mode");
+
+    let pendingUpdate = false;
+    const layoutViewport = document.getElementById("root") as HTMLDivElement;
+    const timeoutId = setTimeout(() => {
+      if (viewport.offsetTop >= 0 && ref.current) {
+        ref.current.style.transform = `translateY(${
+          manualKeyboardModeHandler
+            ? viewport.offsetTop
+            : viewport.height - layoutViewport.getBoundingClientRect().height + viewport.offsetTop
+        }px)`;
+      }
+    }, 0);
+
+    function viewportHandler() {
+      clearTimeout(timeoutId);
+      if (pendingUpdate) {
+        return;
+      }
+      pendingUpdate = true;
+
+      requestAnimationFrame(() => {
+        pendingUpdate = false;
+
+        if (viewport && viewport.offsetTop >= 0 && ref.current) {
+          ref.current.style.transform = `translateY(${
+            manualKeyboardModeHandler
+              ? viewport.offsetTop
+              : viewport.height - layoutViewport.getBoundingClientRect().height + viewport.offsetTop
+          }px)`;
+        }
+      });
+    }
+
+    viewport.addEventListener("scroll", viewportHandler);
+    viewport.addEventListener("resize", viewportHandler);
+    return () => {
+      clearTimeout(timeoutId);
+      viewport.removeEventListener("scroll", viewportHandler);
+      viewport.removeEventListener("resize", viewportHandler);
+    };
+  }, []);
+  return createPortal(
+    <div
+      ref={ref}
+      className={cx(
+        css`
+          box-shadow: ${themeVars.shadow200};
+          background-color: ${themeVars.actionMenuBg};
+          position: fixed;
+          bottom: max(max(var(${keyboardInsetBottomVar}), var(${safeAreaInsetBottomVar})), 8px);
+          left: 0;
+          right: 0;
+          z-index: ${mobileKeyboardAwarePopupZIndex};
+          transform: translateY(0px);
+          border-radius: ${border.radius16}px;
+          border: 1px solid ${themeVars.separatorColor};
+          margin: 0 ${space.s8}px;
+          .fibery-manual-keyboard-mode & {
+            margin-bottom: 8px;
+          }
+        `,
+        className
+      )}
+    >
+      {children}
+    </div>,
+    document.body
+  );
+}

package/src/mobile-styles.ts

@@ -1,2 +1,10 @@
 export const mobileRootClassName = "fibery-mobile";
 export const mobileRootSelector = `.${mobileRootClassName}`;
+export const mobileKeyboardOpenClassName = "fibery-mobile-keyboard-open";
+export const mobileKeyboardOpenSelector = `.${mobileKeyboardOpenClassName}`;
+export const keyboardHeightVar = "--fibery-on-screen-keyboard-height";
+export const safeAreaInsetLeftVar = "--safe-area-inset-left";
+export const safeAreaInsetRightVar = "--safe-area-inset-right";
+export const safeAreaInsetTopVar = "--safe-area-inset-top";
+export const safeAreaInsetBottomVar = "--safe-area-inset-bottom";
+export const keyboardInsetBottomVar = "--keyboard-inset-bottom";

package/src/modal-menu/contexts/modal-menu-context.tsx

@@ -0,0 +1,22 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+export type SubmenuItem = {
+  id: string;
+  title: string;
+};
+
+export type ModalMenuContext = {
+  open: boolean;
+  title: string;
+  submenuStack: SubmenuItem[];
+  contentContainer: HTMLDivElement | null;
+  setContentContainer: (el: HTMLDivElement | null) => void;
+  onOpenSubmenu: (item: SubmenuItem) => void;
+  onNavigateBack: () => void;
+  onOpenChange: (open: boolean) => void;
+  height?: string;
+};
+
+const [ModalMenuContextProvider, useModalMenu] = createContext<ModalMenuContext>("ModalMenuContext");
+
+export {ModalMenuContextProvider, useModalMenu};

package/src/modal-menu/contexts/modal-submenu-context.tsx

@@ -0,0 +1,16 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+export type ModalSubmenuContext = {
+  id: string;
+  title: string;
+  depth: number;
+};
+
+// The default value below is only used to provide initial depth of 0
+const [ModalSubmenuContextPovider, useModalSubmenu] = createContext<ModalSubmenuContext>("ModalSubmenuContext", {
+  id: "root",
+  title: "Root",
+  depth: 0,
+});
+
+export {ModalSubmenuContextPovider, useModalSubmenu};

package/src/modal-menu/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * This is designed to be drop-in compatible with dropdown-menu or context-menu
+ */
+
+export {ModalMenuRoot as Root} from "./modal-menu-root";
+export {ModalMenuTrigger as Trigger} from "./modal-menu-trigger";
+export {ModalMenuContent as Content} from "./modal-menu-content";
+export {ModalMenuItem as Item} from "./modal-menu-item";
+export {ModalMenuSeparator as Separator} from "./modal-menu-separator";
+export {ModalMenuLabel as Label} from "./modal-menu-label";
+export {ModalMenuGroup as Group} from "./modal-menu-group";
+export {ModalSubmenu as Sub} from "./modal-submenu";
+export {ModalSubmenuTrigger as SubTrigger} from "./modal-submenu-trigger";
+export {ModalSubmenuContent as SubContent} from "./modal-submenu-content";

package/src/modal-menu/modal-menu-content.tsx

@@ -0,0 +1,68 @@
+import {ReactNode} from "react";
+import {createPortal} from "react-dom";
+import {css} from "@linaria/core";
+import {MobilePopup} from "../popover";
+import {space, themeVars} from "../design-system";
+import {getPopupContainerElement} from "../utils-dom";
+import {CommandMenuList, CommandMenuRoot} from "../command-menu";
+import {useModalMenu} from "./contexts/modal-menu-context";
+
+interface ModalMenuContentProps {
+  children?: ReactNode;
+}
+
+export const ModalMenuContent = ({children}: ModalMenuContentProps) => {
+  const {open, title, submenuStack, setContentContainer, onOpenChange, onNavigateBack, height} = useModalMenu();
+
+  if (!open) {
+    return null;
+  }
+
+  const content = (
+    <div
+      ref={setContentContainer}
+      className={css`
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        & ${CommandMenuRoot}:is(${CommandMenuRoot}) {
+          padding: 0 ${space.s4}px;
+          width: 100%;
+        }
+        & ${CommandMenuList}:is(${CommandMenuList}) {
+          max-height: unset;
+        }
+      `}
+    >
+      <div
+        className={css`
+          position: absolute;
+          background: ${themeVars.actionMenuBg};
+          inset: 0;
+          overflow-y: auto;
+        `}
+      >
+        {children}
+      </div>
+      {/* Here the submenus will render via portals */}
+    </div>
+  );
+
+  return createPortal(
+    <MobilePopup
+      height={height}
+      title={submenuStack.at(-1)?.title ?? title}
+      content={content}
+      onClose={() => onOpenChange(false)}
+      onNavigateBack={
+        submenuStack.length === 0
+          ? undefined
+          : () => {
+              onNavigateBack();
+            }
+      }
+    />,
+    getPopupContainerElement()
+  );
+};

package/src/modal-menu/modal-menu-group.tsx

@@ -0,0 +1,10 @@
+import {css} from "@linaria/core";
+import {ReactNode} from "react";
+
+interface ModalMenuGroupProps {
+  children?: ReactNode;
+}
+
+export const ModalMenuGroup = ({children}: ModalMenuGroupProps) => {
+  return <div className={css``}>{children}</div>;
+};

package/src/modal-menu/modal-menu-item.tsx

@@ -0,0 +1,45 @@
+import {css, cx} from "@linaria/core";
+import {ComponentProps, ReactNode} from "react";
+import {space, textStyles} from "../design-system";
+import {useModalMenu} from "./contexts/modal-menu-context";
+
+interface ModalMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  disabled?: boolean;
+  onSelect?: (event: Event) => void;
+  children?: ReactNode;
+}
+
+export const ModalMenuItem = ({children, disabled, onSelect, ...otherProps}: ModalMenuItemProps) => {
+  const {onOpenChange} = useModalMenu();
+
+  return (
+    <div
+      role="button"
+      {...otherProps}
+      className={cx(
+        otherProps.className,
+        css`
+          ${textStyles.big}
+          padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        `,
+        disabled &&
+          css`
+            opacity: 0.4;
+          `
+      )}
+      onClick={(event) => {
+        otherProps.onClick?.(event);
+        if (disabled) {
+          return;
+        }
+        const selectionEvent = new CustomEvent("modal-menu-select", {bubbles: true, cancelable: true});
+        onSelect?.(selectionEvent);
+        if (!selectionEvent.defaultPrevented) {
+          onOpenChange(false);
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/modal-menu/modal-menu-label.tsx

@@ -0,0 +1,24 @@
+import {css} from "@linaria/core";
+import {ReactNode} from "react";
+import {layoutVars, space, textStyles, themeVars} from "../design-system";
+
+interface ModalMenuLabelProps {
+  children?: ReactNode;
+}
+
+export const ModalMenuLabel = ({children}: ModalMenuLabelProps) => {
+  return (
+    <div
+      className={css`
+        ${textStyles.big}
+        display: flex;
+        align-items: center;
+        padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        min-height: ${layoutVars.sidebarMenuItemHeight};
+        color: ${themeVars.accentTextColor} !important;
+      `}
+    >
+      {children}
+    </div>
+  );
+};

package/src/modal-menu/modal-menu-root.tsx

@@ -0,0 +1,57 @@
+import {ReactNode, RefObject, useCallback, useMemo, useState} from "react";
+import {ModalMenuContextProvider, SubmenuItem} from "./contexts/modal-menu-context";
+
+interface ModalMenuRootProps {
+  open?: boolean;
+  title?: string;
+  height?: string;
+  contentRef?: RefObject<HTMLDivElement>;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+
+export const ModalMenuRoot = ({
+  open,
+  title = "Actions",
+  children,
+  onOpenChange: _onOpenChange,
+  height,
+}: ModalMenuRootProps) => {
+  const [submenuStack, setSubmenuStack] = useState<SubmenuItem[]>([]);
+  const [contentContainer, setContentContainer] = useState<HTMLDivElement | null>(null);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      _onOpenChange?.(open);
+      if (!open) {
+        setSubmenuStack([]);
+      }
+    },
+    [_onOpenChange]
+  );
+
+  const onOpenSubmenu = useCallback((item: SubmenuItem) => {
+    setSubmenuStack((stack) => [...stack, item]);
+  }, []);
+
+  const onNavigateBack = useCallback(() => {
+    setSubmenuStack((stack) => stack.slice(0, -1));
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      title,
+      open: open ?? false,
+      submenuStack,
+      contentContainer,
+      setContentContainer,
+      onOpenChange,
+      onOpenSubmenu,
+      onNavigateBack,
+      height,
+    }),
+    [open, title, submenuStack, contentContainer, onOpenChange, onOpenSubmenu, onNavigateBack, height]
+  );
+
+  return <ModalMenuContextProvider value={contextValue}>{children}</ModalMenuContextProvider>;
+};

package/src/modal-menu/modal-menu-separator.tsx

@@ -0,0 +1,14 @@
+import {css} from "@linaria/core";
+import {space, themeVars} from "../design-system";
+
+export const ModalMenuSeparator = () => {
+  return (
+    <hr
+      className={css`
+        border: none;
+        border-bottom: 1px solid ${themeVars.separatorColor};
+        margin: ${space.s4}px 0;
+      `}
+    />
+  );
+};

package/src/modal-menu/modal-menu-trigger.tsx

@@ -0,0 +1,54 @@
+import {cx} from "@linaria/core";
+import {cloneElement, ComponentProps, ReactHTMLElement, ReactNode} from "react";
+import {useModalMenu} from "./contexts/modal-menu-context";
+
+interface ModalMenuTriggerProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+  triggerEvent?: "click" | "context-menu";
+  children: ReactHTMLElement<HTMLDivElement> | ReactNode;
+}
+
+export const ModalMenuTrigger = ({
+  asChild,
+  triggerEvent,
+  children,
+  onClick,
+  onContextMenu,
+  ...otherProps
+}: ModalMenuTriggerProps) => {
+  const {open, onOpenChange} = useModalMenu();
+
+  if (asChild) {
+    const className = (children as ReactHTMLElement<HTMLDivElement>)?.props?.className;
+    return cloneElement(children as ReactHTMLElement<HTMLDivElement>, {
+      ...otherProps,
+      className: cx(className, otherProps.className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (triggerEvent === "click") {
+          onOpenChange(!open);
+        }
+      },
+      onContextMenu: (event) => {
+        onContextMenu?.(event);
+        if (triggerEvent === "context-menu") {
+          onOpenChange(!open);
+        }
+      },
+    });
+  }
+
+  return (
+    <div
+      role="button"
+      {...otherProps}
+      className={otherProps.className}
+      onClick={(event) => {
+        onClick?.(event);
+        onOpenChange(!open);
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/modal-menu/modal-submenu-content.tsx

@@ -0,0 +1,49 @@
+import {ReactNode} from "react";
+import {createPortal} from "react-dom";
+import {css} from "@linaria/core";
+import {themeVars, transition} from "../design-system";
+import {useModalMenu} from "./contexts/modal-menu-context";
+import {useModalSubmenu} from "./contexts/modal-submenu-context";
+
+interface ModalSubmenuContentProps {
+  children?: ReactNode;
+}
+
+export const ModalSubmenuContent = ({children}: ModalSubmenuContentProps) => {
+  const {contentContainer, submenuStack} = useModalMenu();
+  const {id, depth} = useModalSubmenu();
+
+  const open = submenuStack.some((item) => item.id === id);
+
+  if (!contentContainer || !open) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={css`
+        position: absolute;
+        background: ${themeVars.actionMenuBg};
+        inset: 0;
+        overflow-y: auto;
+
+        transition: transform ${transition}, opacity ${transition};
+        transform: translateX(0);
+        opacity: 1;
+
+        @media (prefers-reduced-motion: no-preference) {
+          @starting-style {
+            transform: translateX(20%);
+            opacity: 0;
+          }
+        }
+      `}
+      style={{
+        zIndex: depth,
+      }}
+    >
+      {children}
+    </div>,
+    contentContainer
+  );
+};

package/src/modal-menu/modal-submenu-trigger.tsx

@@ -0,0 +1,34 @@
+import {css, cx} from "@linaria/core";
+import {ComponentProps, ReactHTMLElement} from "react";
+import {space, textStyles} from "../design-system";
+import {useModalMenu} from "./contexts/modal-menu-context";
+import {useModalSubmenu} from "./contexts/modal-submenu-context";
+
+interface ModalSubmenuTriggerProps extends ComponentProps<"div"> {
+  children: ReactHTMLElement<HTMLButtonElement>;
+}
+
+export const ModalSubmenuTrigger = ({children, ...otherProps}: ModalSubmenuTriggerProps) => {
+  const {onOpenSubmenu} = useModalMenu();
+  const {id, title} = useModalSubmenu();
+
+  return (
+    <div
+      role="button"
+      {...otherProps}
+      className={cx(
+        otherProps.className,
+        css`
+          ${textStyles.big}
+          padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        `
+      )}
+      onClick={(event) => {
+        otherProps.onClick?.(event);
+        onOpenSubmenu({id, title});
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/modal-menu/modal-submenu.tsx

@@ -0,0 +1,17 @@
+import {ReactNode, useId, useMemo} from "react";
+import {ModalSubmenuContextPovider, useModalSubmenu} from "./contexts/modal-submenu-context";
+
+interface ModalSubmenuProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  children?: ReactNode;
+}
+
+export const ModalSubmenu = ({title = "Submenu", children}: ModalSubmenuProps) => {
+  const id = useId();
+  const {depth} = useModalSubmenu();
+  const contextValue = useMemo(() => ({id, title, depth: depth + 1}), [id, title, depth]);
+
+  return <ModalSubmenuContextPovider value={contextValue}>{children}</ModalSubmenuContextPovider>;
+};