@pushwoosh/dumb-components 2.7.1 → 2.7.2

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

@@ -2,14 +2,16 @@ import { type FC } from 'react';
 import { type DropdownMenuProps } from './types';
 /**
  * Floating dropdown menu anchored to a custom trigger (`renderHandler`), with
- * auto-placement, click-outside close and layered z-index. Fill it with
- * {@link DropdownMenuItem}, {@link DropdownMenuSection} and {@link DropdownMenuSubmenu}.
+ * auto-placement, click-outside close and layered z-index. Children are {@link DropdownMenuSection}s
+ * holding {@link DropdownMenuItem}s and {@link DropdownMenuSubmenu}s — the surface itself has no padding.
  *
  * @example
  * <DropdownMenu renderHandler={({ ref, onClick, isOpen }) => (
  *   <Button boxRef={ref} onClick={onClick} isOpen={isOpen} color="secondary">Menu</Button>
  * )}>
- *   <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>
+ *   <DropdownMenuSection>
+ *     <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>
+ *   </DropdownMenuSection>
  * </DropdownMenu>
  */
 export declare const DropdownMenu: FC<DropdownMenuProps>;

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -10,14 +10,16 @@ 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
- * auto-placement, click-outside close and layered z-index. Fill it with
- * {@link DropdownMenuItem}, {@link DropdownMenuSection} and {@link DropdownMenuSubmenu}.
+ * auto-placement, click-outside close and layered z-index. Children are {@link DropdownMenuSection}s
+ * holding {@link DropdownMenuItem}s and {@link DropdownMenuSubmenu}s — the surface itself has no padding.
  *
  * @example
  * <DropdownMenu renderHandler={({ ref, onClick, isOpen }) => (
  *   <Button boxRef={ref} onClick={onClick} isOpen={isOpen} color="secondary">Menu</Button>
  * )}>
- *   <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>
+ *   <DropdownMenuSection>
+ *     <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>
+ *   </DropdownMenuSection>
  * </DropdownMenu>
  */
 export const DropdownMenu = ({

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.d.ts

@@ -5,7 +5,9 @@ import { type DropdownMenuButtonProps } from './types';
  *
  * @example
  * <DropdownMenuButton label="Actions" color="secondary">
- *   <DropdownMenuItem onClick={remove} isDanger>Delete</DropdownMenuItem>
+ *   <DropdownMenuSection>
+ *     <DropdownMenuItem onClick={remove} isDanger>Delete</DropdownMenuItem>
+ *   </DropdownMenuSection>
  * </DropdownMenuButton>
  */
 export declare const DropdownMenuButton: FC<DropdownMenuButtonProps>;

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js

@@ -6,7 +6,9 @@ import { DropdownMenu } from '../DropdownMenu';
  *
  * @example
  * <DropdownMenuButton label="Actions" color="secondary">
- *   <DropdownMenuItem onClick={remove} isDanger>Delete</DropdownMenuItem>
+ *   <DropdownMenuSection>
+ *     <DropdownMenuItem onClick={remove} isDanger>Delete</DropdownMenuItem>
+ *   </DropdownMenuSection>
  * </DropdownMenuButton>
  */
 export const DropdownMenuButton = ({

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

@@ -1,7 +1,7 @@
 /**
  * Clickable row inside a {@link DropdownMenu}, with active (checked), danger and
  * disabled states. A disabled item with `hint` stays focusable and explains itself in a tooltip.
- * Must be rendered inside a {@link DropdownMenu}.
+ * Must be rendered inside a {@link DropdownMenuSection} of a {@link DropdownMenu}.
  *
  * @example
  * <DropdownMenuItem onClick={select} isActive={selected}>Option</DropdownMenuItem>

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js

@@ -7,7 +7,7 @@ import { DropdownContext } from '../../context';
 /**
  * Clickable row inside a {@link DropdownMenu}, with active (checked), danger and
  * disabled states. A disabled item with `hint` stays focusable and explains itself in a tooltip.
- * Must be rendered inside a {@link DropdownMenu}.
+ * Must be rendered inside a {@link DropdownMenuSection} of a {@link DropdownMenu}.
  *
  * @example
  * <DropdownMenuItem onClick={select} isActive={selected}>Option</DropdownMenuItem>

package/DropdownMenu/components/DropdownMenuSection/DropdownMenuSection.d.ts

@@ -1,7 +1,8 @@
 import { type FC } from 'react';
 import { type DropdownMenuSectionProps } from './types';
 /**
- * Groups {@link DropdownMenuItem}s under an optional heading inside a {@link DropdownMenu}.
+ * Required wrapper for {@link DropdownMenuItem}s inside a {@link DropdownMenu}: gives the rows their
+ * 8px vertical padding and a divider between sections. `title` is optional, the section is not.
  *
  * @example
  * <DropdownMenuSection title="Account">

package/DropdownMenu/components/DropdownMenuSection/DropdownMenuSection.js

@@ -4,7 +4,8 @@ import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
 import { DropdownMenuSectionRoot } from './styles';
 /**
- * Groups {@link DropdownMenuItem}s under an optional heading inside a {@link DropdownMenu}.
+ * Required wrapper for {@link DropdownMenuItem}s inside a {@link DropdownMenu}: gives the rows their
+ * 8px vertical padding and a divider between sections. `title` is optional, the section is not.
  *
  * @example
  * <DropdownMenuSection title="Account">

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

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 /** Props of {@link DropdownMenuSection}. */
 export type DropdownMenuSectionProps = PropsWithChildren<{
-    /** Optional uppercase section heading. */
+    /** Optional uppercase section heading; the section itself is required around menu rows. */
     title?: string;
     /** Background color of the section. */
     bgColor?: string;

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

@@ -2,11 +2,13 @@ import { type FC } from 'react';
 import { type DropdownMenuSubmenuProps } from './types';
 /**
  * Nested submenu inside a {@link DropdownMenu}: a trigger row that opens a flyout
- * of further items on hover or click. Must be rendered inside a {@link DropdownMenu}.
+ * of further items on hover or click. Must be rendered inside a {@link DropdownMenuSection}.
  *
  * @example
- * <DropdownMenuSubmenu label="More">
- *   <DropdownMenuItem onClick={archive}>Archive</DropdownMenuItem>
- * </DropdownMenuSubmenu>
+ * <DropdownMenuSection>
+ *   <DropdownMenuSubmenu label="More">
+ *     <DropdownMenuItem onClick={archive}>Archive</DropdownMenuItem>
+ *   </DropdownMenuSubmenu>
+ * </DropdownMenuSection>
  */
 export declare const DropdownMenuSubmenu: FC<DropdownMenuSubmenuProps>;

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -12,12 +12,14 @@ const OPEN_DELAY = 100;
 const CLOSE_DELAY = 200;
 /**
  * Nested submenu inside a {@link DropdownMenu}: a trigger row that opens a flyout
- * of further items on hover or click. Must be rendered inside a {@link DropdownMenu}.
+ * of further items on hover or click. Must be rendered inside a {@link DropdownMenuSection}.
  *
  * @example
- * <DropdownMenuSubmenu label="More">
- *   <DropdownMenuItem onClick={archive}>Archive</DropdownMenuItem>
- * </DropdownMenuSubmenu>
+ * <DropdownMenuSection>
+ *   <DropdownMenuSubmenu label="More">
+ *     <DropdownMenuItem onClick={archive}>Archive</DropdownMenuItem>
+ *   </DropdownMenuSubmenu>
+ * </DropdownMenuSection>
  */
 export const DropdownMenuSubmenu = ({
   label,

package/package.json

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