@pushwoosh/dumb-components 1.1.230 → 1.1.231

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -4,8 +4,9 @@ import { useState, useEffect, useCallback } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { Place } from './styles';
 import { useLayer } from '../../../hooks';
-import { DropdownContext, DropdownZIndexContext } from '../../context';
+import { DropdownColorContext, DropdownContext, DropdownZIndexContext, SubmenuRegistryContext } from '../../context';
 import { renderChildren } from '../../shared/renderChildren';
+import { useSubmenuRegistry } from '../../shared/useSubmenuRegistry';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
 /**
  * Floating dropdown menu anchored to a custom trigger (`renderHandler`), with
@@ -32,6 +33,7 @@ export const DropdownMenu = ({
   children
 }) => {
   const [isOpen, setIsOpen] = useState(openOnMount);
+  const submenus = useSubmenuRegistry();
   const [width, setWidth] = useState(windowWidth);
   const handleClose = useCallback(() => {
     setIsOpen(false);
@@ -111,7 +113,13 @@ export const DropdownMenu = ({
         "$fitContent": windowWidth === null && !fullWidth,
         "$scrollable": isScrollable,
         "$zIndex": resolvedZIndex,
-        children: renderChildren(children)
+        children: _jsx(DropdownColorContext.Provider, {
+          value: color,
+          children: _jsx(SubmenuRegistryContext.Provider, {
+            value: submenus,
+            children: renderChildren(children)
+          })
+        })
       })
     }), document.body)]
   });

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { flip, shift, useFloating } from '@floating-ui/react-dom';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { autoUpdate, flip, shift, size, useFloating } from '@floating-ui/react-dom';
+import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { SubmenuTriggerInner } from './styles';
-import { DropdownContext, DropdownZIndexContext } from '../../context';
+import { DropdownColorContext, DropdownContext, DropdownZIndexContext, SubmenuRegistryContext } from '../../context';
 import { renderChildren } from '../../shared/renderChildren';
-import { DropdownMenuItemStyled, Place } from '../../shared/styles';
+import { DropdownMenuItemStyled, Place, SCROLLABLE_MAX_HEIGHT } from '../../shared/styles';
+import { useSubmenuRegistry } from '../../shared/useSubmenuRegistry';
 const OPEN_DELAY = 100;
 const CLOSE_DELAY = 200;
 /**
@@ -22,25 +23,35 @@ export const DropdownMenuSubmenu = ({
   label,
   isDanger,
   disabled,
+  isScrollable,
   children
 }) => {
   const parentClose = useContext(DropdownContext);
   const parentZIndex = useContext(DropdownZIndexContext);
+  const parentSubmenus = useContext(SubmenuRegistryContext);
+  const color = useContext(DropdownColorContext);
+  const submenus = useSubmenuRegistry();
+  const id = useId();
   const submenuZIndex = (parentZIndex ?? 10001) + 1;
   const [isOpen, setIsOpen] = useState(false);
   const openedByClick = useRef(false);
+  const [availableHeight, setAvailableHeight] = useState();
   const {
     refs,
     floatingStyles
   } = useFloating({
     strategy: 'fixed',
     placement: 'right-start',
+    whileElementsMounted: autoUpdate,
     middleware: [flip({
-      fallbackPlacements: ['left-start'],
-      boundary: document.body
+      fallbackPlacements: ['left-start']
     }), shift({
+      padding: 4
+    }), size({
       padding: 4,
-      boundary: document.body
+      apply: ({
+        availableHeight: height
+      }) => setAvailableHeight(height)
     })]
   });
   const openTimer = useRef(null);
@@ -52,6 +63,18 @@ export const DropdownMenuSubmenu = ({
     closeTimer.current = null;
   }, []);
   useEffect(() => () => clearTimers(), [clearTimers]);
+  const maxHeight = isScrollable ? Math.min(availableHeight ?? SCROLLABLE_MAX_HEIGHT, SCROLLABLE_MAX_HEIGHT) : availableHeight;
+  const close = useCallback(() => {
+    clearTimers();
+    openedByClick.current = false;
+    setIsOpen(false);
+  }, [clearTimers]);
+  useEffect(() => parentSubmenus?.register(id, close), [parentSubmenus, id, close]);
+  useEffect(() => {
+    if (isOpen) {
+      parentSubmenus?.closeOthers(id);
+    }
+  }, [isOpen, parentSubmenus, id]);
   const scheduleOpen = useCallback(() => {
     if (disabled) return;
     openedByClick.current = false;
@@ -94,15 +117,24 @@ export const DropdownMenuSubmenu = ({
             size: "small"
           })]
         })
-      }), isOpen && createPortal(_jsx(Place, {
-        ref: refs.setFloating,
-        style: floatingStyles,
-        "$fitContent": true,
-        "$zIndex": submenuZIndex,
-        onMouseEnter: clearTimers,
-        onMouseLeave: scheduleClose,
-        onClick: e => e.stopPropagation(),
-        children: renderChildren(children)
+      }), isOpen && createPortal(_jsx(SubmenuRegistryContext.Provider, {
+        value: submenus,
+        children: _jsx(Place, {
+          ref: refs.setFloating,
+          style: {
+            ...floatingStyles,
+            maxHeight,
+            overflowY: maxHeight ? 'auto' : undefined
+          },
+          "$color": color,
+          "$scrollable": isScrollable,
+          "$fitContent": true,
+          "$zIndex": submenuZIndex,
+          onMouseEnter: clearTimers,
+          onMouseLeave: scheduleClose,
+          onClick: e => e.stopPropagation(),
+          children: renderChildren(children)
+        })
       }), document.body)]
     })
   });

package/DropdownMenu/components/DropdownMenuSubmenu/types.d.ts

@@ -7,6 +7,8 @@ export type DropdownMenuSubmenuProps = {
     isDanger?: boolean;
     /** Disable the submenu. */
     disabled?: boolean;
+    /** Cap the flyout height and scroll its contents. */
+    isScrollable?: boolean;
     /** Submenu contents — nodes, or a function returning nodes. */
     children: (() => ReactNode) | ReactNode;
 };

package/DropdownMenu/context.d.ts

@@ -1,2 +1,9 @@
+import type { Color } from '@pushwoosh/kit-constants';
 export declare const DropdownContext: import("react").Context<((isOpen: false) => void) | null>;
 export declare const DropdownZIndexContext: import("react").Context<number | undefined>;
+export type SubmenuRegistry = {
+    register: (id: string, close: () => void) => () => void;
+    closeOthers: (id: string) => void;
+};
+export declare const SubmenuRegistryContext: import("react").Context<SubmenuRegistry | null>;
+export declare const DropdownColorContext: import("react").Context<Color.FROZEN | Color.CLEAR | undefined>;

package/DropdownMenu/context.js

@@ -1,3 +1,5 @@
 import { createContext } from 'react';
 export const DropdownContext = createContext(null);
-export const DropdownZIndexContext = createContext(undefined);
+export const DropdownZIndexContext = createContext(undefined);
+export const SubmenuRegistryContext = createContext(null);
+export const DropdownColorContext = createContext(undefined);

package/DropdownMenu/shared/styles.d.ts

@@ -1,3 +1,4 @@
+export declare const SCROLLABLE_MAX_HEIGHT = 248;
 export declare const Place: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;

package/DropdownMenu/shared/styles.js

@@ -1,7 +1,8 @@
 import styled, { css } from 'styled-components';
 import { Color, Shadow, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
-const scrollableCss = css(["max-height:248px;overflow-y:auto;"]);
+export const SCROLLABLE_MAX_HEIGHT = 248;
+const scrollableCss = css(["max-height:", "px;overflow-y:auto;"], SCROLLABLE_MAX_HEIGHT);
 const getWidth = ($width, $fitContent) => {
   if ($fitContent) return 'max-content';
   if ($width) return `${$width}px`;

package/DropdownMenu/shared/useSubmenuRegistry.d.ts

@@ -0,0 +1,6 @@
+import type { SubmenuRegistry } from '../context';
+/**
+ * Registry of the submenus rendered on one menu level: opening a submenu closes
+ * its siblings through it, and never the branch it hangs from.
+ */
+export declare function useSubmenuRegistry(): SubmenuRegistry;

package/DropdownMenu/shared/useSubmenuRegistry.js

@@ -0,0 +1,23 @@
+import { useMemo, useRef } from 'react';
+/**
+ * Registry of the submenus rendered on one menu level: opening a submenu closes
+ * its siblings through it, and never the branch it hangs from.
+ */
+export function useSubmenuRegistry() {
+  const entries = useRef(new Map());
+  return useMemo(() => ({
+    register: (id, close) => {
+      entries.current.set(id, close);
+      return () => {
+        entries.current.delete(id);
+      };
+    },
+    closeOthers: id => {
+      entries.current.forEach((close, key) => {
+        if (key !== id) {
+          close();
+        }
+      });
+    }
+  }), []);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.230",
+  "version": "1.1.231",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",