@pushwoosh/dumb-components 1.1.229 → 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/RichMessageEditor/RichMessageEditor.js

@@ -25,7 +25,9 @@ export const RichMessageEditor = ({
   title,
   initialValue,
   minHeight,
+  placeholder,
   error,
+  isErrored,
   canUsePersonalization,
   canUseEmoji,
   onChange,
@@ -123,6 +125,8 @@ export const RichMessageEditor = ({
       }),
       children: [_jsx(SlateEditable, {
         minHeight: minHeight,
+        placeholder: placeholder,
+        isErrored: isErrored || !!error,
         onFocus: () => {
           setIsFocused(true);
           const {

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -24,8 +24,12 @@ export type RichMessageEditorProps = {
     onChange: (value: string) => void;
     /** Minimum editor height (CSS value). */
     minHeight?: string;
+    /** Hint shown while the editor is empty. */
+    placeholder?: string;
     /** Error message; switches the field to the error state. */
     error?: ReactNode;
+    /** Draw the error border without an error message. */
+    isErrored?: boolean;
     /** Enable inserting personalization (dynamic-content) tokens. */
     canUsePersonalization?: boolean;
     /** Enable the emoji picker. */

package/RichMessageEditor/slate/SlateEditor.d.ts

@@ -12,6 +12,8 @@ type SlateEditor = {
 export declare const SlateEditor: FC<SlateEditor>;
 type SlateEditableProps = {
     minHeight?: string;
+    placeholder?: string;
+    isErrored?: boolean;
     onFocus?: () => void;
     onDelete: () => void;
 };

package/RichMessageEditor/slate/SlateEditor.js

@@ -26,6 +26,8 @@ export const SlateEditor = ({
 };
 export const SlateEditable = ({
   minHeight,
+  placeholder,
+  isErrored,
   onFocus,
   onDelete
 }) => {
@@ -34,6 +36,8 @@ export const SlateEditable = ({
   });
   return _jsx(EditableStyled, {
     "$minHeight": minHeight,
+    "$isErrored": isErrored,
+    placeholder: placeholder,
     renderElement: renderElementPersistent,
     onFocus: onFocus
   });

package/RichMessageEditor/slate/SlateEditor.styled.d.ts

@@ -15,4 +15,5 @@ export declare const EditableStyled: import("styled-components").StyledComponent
     disableDefaultStyles?: boolean | undefined;
 } & import("react").TextareaHTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $minHeight?: string;
+    $isErrored?: boolean;
 }, never>;

package/RichMessageEditor/slate/SlateEditor.styled.js

@@ -4,6 +4,8 @@ import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constan
 export const EditableStyled = styled(Editable).withConfig({
   displayName: "EditableStyled",
   componentId: "sc-1frhl1f-0"
-})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;", " &:focus{border-color:", ";outline:none;}& > p{margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FORM, ShapeRadius.CONTROL, ({
+})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;", " & [data-slate-placeholder='true']{color:", ";opacity:1 !important;}&:focus{border-color:", ";outline:none;}& > p{position:relative;margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, ({
   $minHeight
-}) => $minHeight && `min-height: ${$minHeight};`, Color.BRIGHT);
+}) => $minHeight && `min-height: ${$minHeight};`, Color.PHANTOM, Color.BRIGHT);

package/package.json

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