@lumx/core 4.17.0-next.1 → 4.17.0-next.2

package/js/components/Menu/MenuButton.d.ts

@@ -1,5 +1,24 @@
 import type { JSXElement, LumxClassName } from '../../types';
+export type MenuButtonVariant = 'button' | 'icon-button' | 'chip' | 'link';
+/** ARIA keys set by MenuButton on the trigger — omitted from variant component props. */
+type MenuButtonAriaKeys = 'aria-haspopup' | 'aria-controls' | 'aria-expanded';
+/** Per-variant keys internally managed by MenuButton — omitted from variant component props. */
+type MenuButtonVariantsInternalKeys = {
+    button: MenuButtonAriaKeys;
+    'icon-button': MenuButtonAriaKeys;
+    chip: MenuButtonAriaKeys | 'isClickable';
+    link: MenuButtonAriaKeys | 'href' | 'linkAs';
+};
+/** Discriminated union of MenuButton props across all trigger variants. */
+export type MenuButtonVariantsProps<TBase, TVariantProps extends Record<MenuButtonVariant, any>> = {
+    [V in MenuButtonVariant]: TBase & (V extends 'button' ? {
+        variant?: V;
+    } : {
+        variant: V;
+    }) & Omit<TVariantProps[V], MenuButtonVariantsInternalKeys[V] | keyof TBase>;
+}[MenuButtonVariant];
 export interface MenuButtonProps {
+    variant?: MenuButtonVariant;
     label?: JSXElement;
     children?: JSXElement;
     triggerProps?: Record<string, any>;
@@ -7,9 +26,13 @@ export interface MenuButtonProps {
     onOpen?: (isOpen: boolean) => void;
 }
 export interface MenuButtonComponents {
-    Menu: any;
+    MenuProvider: any;
+    MenuTrigger: any;
+    MenuPopover: any;
+    MenuList: any;
 }
 export declare const COMPONENT_NAME = "MenuButton";
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 /** Menu button core template (composition of menu provider, trigger, popover and list) */
-export declare const MenuButton: (props: MenuButtonProps, { Menu }: MenuButtonComponents) => import("react").JSX.Element;
+export declare const MenuButton: (props: MenuButtonProps, { MenuProvider, MenuTrigger, MenuPopover, MenuList }: MenuButtonComponents) => import("react").JSX.Element;
+export {};

package/js/components/Menu/MenuButtonStories.d.ts

@@ -1,10 +1,11 @@
 import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ components: { MenuButton, MenuItem, MenuDivider }, }: SetupStoriesOptions<{
+export declare function setup({ components: { MenuButton, MenuItem, MenuDivider }, decorators: { withCombinations }, }: SetupStoriesOptions<{
     components: {
         MenuButton: any;
         MenuItem: any;
         MenuDivider: any;
     };
+    decorators: 'withCombinations';
 }>): {
     meta: {
         component: any;
@@ -20,22 +21,30 @@ export declare function setup({ components: { MenuButton, MenuItem, MenuDivider
     };
     Default: {
         argTypes: {
-            onProfile: {
+            onItemClick: {
                 action: boolean;
             };
-            onSettings: {
-                action: boolean;
-            };
-            onHelp: {
+        };
+        render: ({ onItemClick, ...args }: any) => import("react").JSX.Element;
+    };
+    Variants: {
+        argTypes: {
+            onItemClick: {
                 action: boolean;
             };
-            onLogout: {
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: (args: any) => () => import("react").JSX.Element;
+    };
+    WithLinkItems: {
+        argTypes: {
+            onItemClick: {
                 action: boolean;
             };
         };
         args: {
+            label: string;
             emphasis: string;
         };
-        render: ({ onProfile, onSettings, onHelp, onLogout, ...args }: any) => import("react").JSX.Element;
     };
 };

package/js/components/Menu/MenuButtonTests.d.ts

@@ -1,6 +1,6 @@
 type RenderResult = {
     unmount: () => void;
-    container: HTMLElement;
+    container: Element;
 };
 /**
  * Options to set up the MenuButton test suite.
@@ -12,11 +12,23 @@ export interface MenuButtonTestSetup {
         MenuItem: any;
     };
     /**
-     * Render a MenuButton template.
+     * Render a MenuButton template, forwarding optional framework-specific render options
+     * (e.g. `{ wrapper }` in React, `{ global }` in Vue).
      *
      * @param template JSX render function returning the element to render.
+     * @param options  Framework-specific render options (e.g. wrapper component).
      */
-    render: (template: () => any) => RenderResult;
+    render: (template: () => any, options?: Record<string, any>) => RenderResult;
 }
-export default function menuButtonTests({ components, render }: MenuButtonTestSetup): void;
+export default function menuButtonTests({ components, render }: MenuButtonTestSetup): {
+    setup: (propsOverride?: Record<string, any>, options?: Record<string, any>) => {
+        props: {
+            label: string;
+        };
+        container: Element;
+        element: HTMLElement;
+        trigger: HTMLElement;
+    };
+    triggerClassName: "lumx-menu-trigger";
+};
 export {};

package/js/components/Menu/MenuPopover.d.ts

@@ -1,25 +1,9 @@
-import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
-import type { Placement } from '../Popover/constants';
+import type { HasClassName, JSXElement, LumxClassName } from '../../types';
+import { PopoverProps } from '../Popover';
 /** MenuPopover props. */
-export interface MenuPopoverProps extends HasClassName {
+export interface MenuPopoverProps extends HasClassName, Pick<PopoverProps, 'placement' | 'anchorRef' | 'isOpen' | 'handleClose'> {
     /** Popover content (a `Menu`). */
     children?: JSXElement;
-    /** Whether the popover is open. */
-    isOpen?: boolean;
-    /** Placement relative to the anchor. Defaults to `'bottom-start'`. */
-    placement?: Placement;
-    /** Reference to the anchor element. */
-    anchorRef?: CommonRef;
-    /** Callback invoked when the popover requests to close (click away, escape). */
-    handleClose?(): void;
-    /** Whether the popover should close when clicking outside. Default: true. */
-    closeOnClickAway?: boolean;
-    /** Whether the popover should close on Escape. Default: true. */
-    closeOnEscape?: boolean;
-    /** Whether to render in a portal. Default: false (avoid stacking-context surprises). */
-    usePortal?: boolean;
-    /** Whether to focus the anchor on close. Default: true. */
-    focusAnchorOnClose?: boolean;
 }
 /** Framework components injected by wrappers. */
 export interface MenuPopoverComponents {

package/js/components/Menu/MenuTrigger.d.ts

@@ -3,6 +3,8 @@ import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../t
 export interface MenuTriggerProps extends HasClassName {
     /** Content of the trigger (label / icon / etc.). */
     children?: JSXElement;
+    /** The id of the trigger element. */
+    id?: string;
     /** The id of the menu container (for `aria-controls`). */
     menuId?: string;
     /** Whether the menu is currently open. */

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.17.0-next.1",
+        "@lumx/icons": "^4.17.0-next.2",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -66,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.17.0-next.1",
+    "version": "4.17.0-next.2",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",