@pushwoosh/dumb-components 1.1.124 → 1.1.126

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { flushSync } from 'react-dom';
 import { Place } from './styles';
 import { DropdownContext } from '../../context';
+import { renderChildren } from '../../shared/renderChildren';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
 export const DropdownMenu = ({
   renderHandler,
@@ -81,5 +82,5 @@ export const DropdownMenu = ({
     "$fitContent": windowWidth === null && !fullWidth,
     "$scrollable": isScrollable,
     "$zIndex": menuZIndex
-  }, typeof children === 'function' ? children() : children));
+  }, renderChildren(children)));
 };

package/DropdownMenu/components/DropdownMenu/styles.d.ts

@@ -1,62 +1 @@
-export declare const Place: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-} & {
-    $color?: string;
-    $width: number | null;
-    $fitContent?: boolean;
-    $zIndex?: number;
-    $scrollable?: boolean;
-}, "$gridAutoFlow">;
+export { Place } from '../../shared/styles';

package/DropdownMenu/components/DropdownMenu/styles.js

@@ -1,22 +1 @@
-import styled, { css } from 'styled-components';
-import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
-const scrollableCss = css(["max-height:248px;overflow-y:auto;"]);
-const getWidth = ($width, $fitContent) => {
-  if ($fitContent) return 'max-content';
-  if ($width) return `${$width}px`;
-  return 'auto';
-};
-export const Place = styled(Vertical).withConfig({
-  displayName: "Place",
-  componentId: "sc-ij8wqc-0"
-})(["border:1px solid ", ";background:", ";width:", ";min-width:140px;max-width:480px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, ({
-  $color
-}) => $color || Color.FROZEN, ({
-  $width,
-  $fitContent
-}) => getWidth($width, $fitContent), ({
-  $scrollable
-}) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
-  $zIndex
-}) => $zIndex || 10);
+export { Place } from '../../shared/styles';

package/DropdownMenu/components/DropdownMenuItem/styles.d.ts

@@ -1,4 +1 @@
-export declare const DropdownMenuItemStyled: import("styled-components").StyledComponent<"button", any, {
-    $active?: boolean;
-    $danger?: boolean;
-}, never>;
+export { DropdownMenuItemStyled } from '../../shared/styles';

package/DropdownMenu/components/DropdownMenuItem/styles.js

@@ -1,12 +1 @@
-import styled from 'styled-components';
-import { Color, UnitSize } from '@pushwoosh/kit-constants';
-export const DropdownMenuItemStyled = styled.button.withConfig({
-  displayName: "DropdownMenuItemStyled",
-  componentId: "sc-1wmyvxp-0"
-})(["appearance:none;display:flex;align-items:center;white-space:nowrap;padding:0 12px;min-height:", ";border:none;overflow:hidden;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], UnitSize.FIELD_HEIGHT, ({
-  $active,
-  $danger
-}) => {
-  if ($danger) return Color.DANGER;
-  return $active ? Color.PRIMARY : Color.MAIN;
-}, Color.SOFT_LIGHT, Color.MAIN, Color.LOCKED);
+export { DropdownMenuItemStyled } from '../../shared/styles';

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type DropdownMenuSubmenuProps } from './types';
+export declare const DropdownMenuSubmenu: FC<DropdownMenuSubmenuProps>;

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -0,0 +1,85 @@
+import { flip, shift, useFloating } from '@floating-ui/react-dom';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { SubmenuTriggerInner } from './styles';
+import { DropdownContext } from '../../context';
+import { renderChildren } from '../../shared/renderChildren';
+import { DropdownMenuItemStyled, Place } from '../../shared/styles';
+const OPEN_DELAY = 100;
+const CLOSE_DELAY = 200;
+export const DropdownMenuSubmenu = ({
+  label,
+  isDanger,
+  disabled,
+  children
+}) => {
+  const parentClose = useContext(DropdownContext);
+  const [isOpen, setIsOpen] = useState(false);
+  const openedByClick = useRef(false);
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    strategy: 'fixed',
+    placement: 'right-start',
+    middleware: [flip({
+      fallbackPlacements: ['left-start'],
+      boundary: document.body
+    }), shift({
+      padding: 4,
+      boundary: document.body
+    })]
+  });
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clearTimers = useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  }, []);
+  useEffect(() => () => clearTimers(), [clearTimers]);
+  const scheduleOpen = useCallback(() => {
+    if (disabled) return;
+    openedByClick.current = false;
+    clearTimers();
+    openTimer.current = setTimeout(() => setIsOpen(true), OPEN_DELAY);
+  }, [disabled, clearTimers]);
+  const scheduleClose = useCallback(() => {
+    if (openedByClick.current) return;
+    clearTimers();
+    closeTimer.current = setTimeout(() => setIsOpen(false), CLOSE_DELAY);
+  }, [clearTimers]);
+  const closeChain = useCallback(() => {
+    openedByClick.current = false;
+    setIsOpen(false);
+    parentClose === null || parentClose === void 0 || parentClose(false);
+  }, [parentClose]);
+  return React.createElement(DropdownContext.Provider, {
+    value: closeChain
+  }, React.createElement(DropdownMenuItemStyled, {
+    ref: refs.setReference,
+    type: "button",
+    "$active": isOpen,
+    "$danger": isDanger,
+    disabled: disabled,
+    onMouseEnter: scheduleOpen,
+    onMouseLeave: scheduleClose,
+    onClick: () => {
+      if (disabled) return;
+      clearTimers();
+      openedByClick.current = !isOpen;
+      setIsOpen(prev => !prev);
+    }
+  }, React.createElement(SubmenuTriggerInner, null, React.createElement("span", null, label), React.createElement(ChevronIcon, {
+    direction: "right",
+    size: "small"
+  }))), isOpen && React.createElement(Place, {
+    ref: refs.setFloating,
+    style: floatingStyles,
+    "$width": null,
+    "$fitContent": true,
+    onMouseEnter: clearTimers,
+    onMouseLeave: scheduleClose
+  }, renderChildren(children)));
+};

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

@@ -0,0 +1 @@
+export { DropdownMenuSubmenu } from './DropdownMenuSubmenu';

package/DropdownMenu/components/DropdownMenuSubmenu/index.js

@@ -0,0 +1 @@
+export { DropdownMenuSubmenu } from './DropdownMenuSubmenu';

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

@@ -0,0 +1 @@
+export declare const SubmenuTriggerInner: import("styled-components").StyledComponent<"span", any, {}, never>;

package/DropdownMenu/components/DropdownMenuSubmenu/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const SubmenuTriggerInner = styled.span.withConfig({
+  displayName: "SubmenuTriggerInner",
+  componentId: "sc-yns7at-0"
+})(["display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;"]);

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export type DropdownMenuSubmenuProps = {
+    label: ReactNode;
+    isDanger?: boolean;
+    disabled?: boolean;
+    children: (() => ReactNode) | ReactNode;
+};

package/DropdownMenu/components/DropdownMenuSubmenu/types.js

@@ -0,0 +1 @@
+export {};

package/DropdownMenu/index.d.ts

@@ -2,3 +2,4 @@ export { DropdownMenu } from './components/DropdownMenu';
 export { DropdownMenuButton } from './components/DropdownMenuButton';
 export { DropdownMenuItem } from './components/DropdownMenuItem';
 export { DropdownMenuSection } from './components/DropdownMenuSection';
+export { DropdownMenuSubmenu } from './components/DropdownMenuSubmenu';

package/DropdownMenu/index.js

@@ -1,4 +1,5 @@
 export { DropdownMenu } from './components/DropdownMenu';
 export { DropdownMenuButton } from './components/DropdownMenuButton';
 export { DropdownMenuItem } from './components/DropdownMenuItem';
-export { DropdownMenuSection } from './components/DropdownMenuSection';
+export { DropdownMenuSection } from './components/DropdownMenuSection';
+export { DropdownMenuSubmenu } from './components/DropdownMenuSubmenu';

package/DropdownMenu/shared/renderChildren.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export declare const renderChildren: (children: ReactNode | (() => ReactNode)) => ReactNode;

package/DropdownMenu/shared/renderChildren.js

@@ -0,0 +1 @@
+export const renderChildren = children => typeof children === 'function' ? children() : children;

package/DropdownMenu/shared/styles.d.ts

@@ -0,0 +1,66 @@
+export declare const Place: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $color?: string;
+    $width: number | null;
+    $fitContent?: boolean;
+    $zIndex?: number;
+    $scrollable?: boolean;
+}, "$gridAutoFlow">;
+export declare const DropdownMenuItemStyled: import("styled-components").StyledComponent<"button", any, {
+    $active?: boolean;
+    $danger?: boolean;
+}, never>;

package/DropdownMenu/shared/styles.js

@@ -0,0 +1,32 @@
+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;"]);
+const getWidth = ($width, $fitContent) => {
+  if ($fitContent) return 'max-content';
+  if ($width) return `${$width}px`;
+  return 'auto';
+};
+export const Place = styled(Vertical).withConfig({
+  displayName: "Place",
+  componentId: "sc-hlq2pz-0"
+})(["border:1px solid ", ";background:", ";width:", ";min-width:140px;max-width:480px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, ({
+  $color
+}) => $color || Color.FROZEN, ({
+  $width,
+  $fitContent
+}) => getWidth($width, $fitContent), ({
+  $scrollable
+}) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
+  $zIndex
+}) => $zIndex || 10);
+export const DropdownMenuItemStyled = styled.button.withConfig({
+  displayName: "DropdownMenuItemStyled",
+  componentId: "sc-hlq2pz-1"
+})(["appearance:none;display:flex;align-items:center;white-space:nowrap;padding:0 12px;min-height:", ";border:none;overflow:hidden;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], UnitSize.FIELD_HEIGHT, ({
+  $active,
+  $danger
+}) => {
+  if ($danger) return Color.DANGER;
+  return $active ? Color.PRIMARY : Color.MAIN;
+}, Color.SOFT_LIGHT, Color.MAIN, Color.LOCKED);

package/index.d.ts

@@ -8,7 +8,7 @@ export { CrashScreen } from './CrashScreen';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, } from './Calendar';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField, } from './DateTimePicker';
-export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, } from './DropdownMenu';
+export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu, } from './DropdownMenu';
 export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';

package/index.js

@@ -8,7 +8,7 @@ export { CrashScreen } from './CrashScreen';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
 export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct } from './Calendar';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField } from './DateTimePicker';
-export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem } from './DropdownMenu';
+export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu } from './DropdownMenu';
 export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';

package/package.json

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