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

package/index.d.ts

@@ -1,7 +1,7 @@
 import { HorizontalAlignment as HorizontalAlignment$1, Orientation as Orientation$1, Alignment as Alignment$1, Size as Size$1, AspectRatio as AspectRatio$1, ColorPalette as ColorPalette$1, Kind as Kind$1, Emphasis as Emphasis$1, Theme as Theme$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { ValueOf as ValueOf$1, GenericProps as GenericProps$1, HasTheme as HasTheme$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, NamedProps, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
+import { ValueOf as ValueOf$1, GenericProps as GenericProps$1, HasTheme as HasTheme$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1, NamedProps } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes } from 'react';
@@ -3472,7 +3472,26 @@ interface LinkPreviewProps extends GenericProps$1, ReactToJSX<LinkPreviewProps$1
  */
 declare const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement>;
 
+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. */
+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];
 interface MenuButtonProps$1 {
+    variant?: MenuButtonVariant;
     label?: JSXElement;
     children?: JSXElement;
     triggerProps?: Record<string, any>;
@@ -3481,25 +3500,9 @@ interface MenuButtonProps$1 {
 }
 
 /** MenuPopover props. */
-interface MenuPopoverProps$1 extends HasClassName {
+interface MenuPopoverProps$1 extends HasClassName, Pick<PopoverProps$1, '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;
 }
 
 /** Popover props forwarded to the inner Popover (minus managed props). */
@@ -3509,35 +3512,27 @@ interface MenuPopoverProps extends ReactToJSX<MenuPopoverProps$1, 'isOpen' | 'an
     children: ReactNode;
 }
 
-/** Keys managed by MenuButton — omitted from the polymorphic trigger props. */
-type OmittedTriggerKeys = 'aria-haspopup' | 'aria-controls' | 'aria-expanded' | 'label' | 'children' | 'ref';
-/** Polymorphic trigger props with index signature stripped and managed keys removed. */
-type TriggerProps$1<E extends ElementType$1> = Omit<NamedProps<React__default.ComponentProps<E>>, OmittedTriggerKeys>;
-/** Menu button props */
-type MenuButtonProps<E extends ElementType$1 = typeof Button> = TriggerProps$1<E> & ReactToJSX<MenuButtonProps$1, 'triggerProps'> & {
-    /** Customize the rendered trigger component. */
-    as?: E;
+/** Props that MenuButton explicitly declares. */
+type MenuButtonBase = ReactToJSX<MenuButtonProps$1, 'triggerProps' | 'variant'> & {
     children?: React__default.ReactNode;
     popoverProps?: MenuPopoverProps;
     onOpen?: (isOpen: boolean) => void;
+    label: string;
 };
+/** MenuButton props — discriminated union over the variant to inherit the target component's props. */
+type MenuButtonProps = MenuButtonVariantsProps<MenuButtonBase, {
+    button: ButtonProps;
+    'icon-button': IconButtonProps;
+    chip: ChipProps;
+    link: LinkProps;
+}>;
 /**
  * MenuButton component.
  *
  * @param  props Component props.
  * @return React element.
  */
-declare const MenuButton: (<E extends ElementType$1 = Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>(props: TriggerProps$1<E> & ReactToJSX<MenuButtonProps$1, "triggerProps"> & {
-    /** Customize the rendered trigger component. */
-    as?: E | undefined;
-    children?: React__default.ReactNode;
-    popoverProps?: MenuPopoverProps;
-    onOpen?: (isOpen: boolean) => void;
-} & React__default.ComponentProps<E> & {
-    ref?: ComponentRef<E> | undefined;
-}) => React__default.JSX.Element) & {
-    displayName: string;
-};
+declare const MenuButton: Comp<MenuButtonProps, HTMLElement>;
 
 /** MenuItem props. */
 interface MenuItemProps$1 extends HasClassName {
@@ -3573,6 +3568,8 @@ interface MenuItemProps<E extends ElementType$1 = 'button'> extends GenericProps
     onClick?(event: SyntheticEvent): void;
     /** MDI icon rendered as `<Icon size="xs" />` prepended to the `before` slot. */
     icon?: string;
+    /** MDI icon rendered as `<Icon size="xs" />` appended to the `after` slot. */
+    afterIcon?: string;
     /** Foreground color applied to the icon and label text. */
     color?: ColorPalette$1;
     /** Content rendered before the label (rendered AFTER `icon` if both are provided). */

package/index.js

@@ -46,6 +46,7 @@ import range from 'lodash/range.js';
 import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline.js';
 import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline.js';
 import chunk from 'lodash/chunk.js';
+import { mdiDotsVertical } from '@lumx/icons/esm/dots-vertical.js';
 import take from 'lodash/take.js';
 import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
 import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked.js';
@@ -14709,23 +14710,45 @@ const COMPONENT_NAME$J = 'MenuButton';
 
 /** Menu button core template (composition of menu provider, trigger, popover and list) */
 const MenuButton$1 = (props, {
-  Menu
+  MenuProvider,
+  MenuTrigger,
+  MenuPopover,
+  MenuList
 }) => {
   const {
     label,
     children,
     triggerProps,
     popoverProps,
-    onOpen
+    onOpen,
+    variant
   } = props;
-  return /*#__PURE__*/jsxs(Menu.Provider, {
+  const extraTriggerProps = {};
+  if (variant === 'chip') {
+    // Chip render as clickable (since the component cannot detect this automatically)
+    extraTriggerProps.isClickable = true;
+  }
+  let triggerChildren;
+  if (variant === 'icon-button') {
+    // Label as prop (renders as tooltip label)
+    extraTriggerProps.label = label;
+    // Default icon
+    if (!triggerProps?.icon) {
+      extraTriggerProps.icon = mdiDotsVertical;
+    }
+  } else {
+    // Only set the label as children when we are not displaying an icon-button
+    triggerChildren = label;
+  }
+  return /*#__PURE__*/jsxs(MenuProvider, {
     onOpen: onOpen,
-    children: [/*#__PURE__*/jsx(Menu.Trigger, {
+    children: [/*#__PURE__*/jsx(MenuTrigger, {
       ...triggerProps,
-      children: label
-    }), /*#__PURE__*/jsx(Menu.Popover, {
+      ...extraTriggerProps,
+      children: triggerChildren
+    }), /*#__PURE__*/jsx(MenuPopover, {
       ...popoverProps,
-      children: /*#__PURE__*/jsx(Menu.List, {
+      children: /*#__PURE__*/jsx(MenuList, {
         children: children
       })
     })]
@@ -15060,11 +15083,11 @@ function setupMenu(options = {}) {
 
 const MenuContext = /*#__PURE__*/createContext(undefined);
 
-/** Use Menu context. @throws if used outside `Menu.Provider`. */
+/** Use Menu context. @throws if used outside `MenuProvider`. */
 function useMenuContext() {
   const context = useContext(MenuContext);
   if (!context) {
-    throw new Error('Menu sub-components must be used within a Menu.Provider');
+    throw new Error('Menu sub-components must be used within a MenuProvider');
   }
   return context;
 }
@@ -15235,10 +15258,6 @@ const MenuPopover$1 = (props, {
     placement = 'bottom-start',
     anchorRef,
     handleClose,
-    closeOnClickAway = true,
-    closeOnEscape = true,
-    usePortal = false,
-    focusAnchorOnClose = true,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Popover, {
@@ -15247,10 +15266,10 @@ const MenuPopover$1 = (props, {
     anchorRef: anchorRef,
     isOpen: isOpen,
     onClose: handleClose,
-    closeOnClickAway: closeOnClickAway,
-    closeOnEscape: closeOnEscape,
-    usePortal: usePortal,
-    focusAnchorOnClose: focusAnchorOnClose,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    usePortal: false,
+    focusAnchorOnClose: true,
     withFocusTrap: false,
     closeMode: "hide",
     fitToAnchorWidth: false,
@@ -15364,18 +15383,17 @@ const MenuList = forwardRef((props, ref) => {
 MenuList.displayName = COMPONENT_NAME$G;
 MenuList.className = CLASSNAME$H;
 
-const Menu = {
-  Provider: MenuProvider,
-  Trigger: MenuTrigger,
-  Popover: MenuPopover,
-  List: MenuList
-};
-
-/** Keys managed by MenuButton — omitted from the polymorphic trigger props. */
+/** Props that MenuButton explicitly declares. */
 
-/** Polymorphic trigger props with index signature stripped and managed keys removed. */
+/** MenuButton props — discriminated union over the variant to inherit the target component's props. */
 
-/** Menu button props */
+/** Menu trigger button component by variant */
+const TRIGGER_COMPONENTS = {
+  button: Button,
+  'icon-button': IconButton,
+  chip: Chip,
+  link: Link
+};
 
 /**
  * MenuButton component.
@@ -15383,37 +15401,34 @@ const Menu = {
  * @param  props Component props.
  * @return React element.
  */
-const MenuButton = Object.assign(forwardRefPolymorphic((props, ref) => {
+const MenuButton = forwardRef((props, ref) => {
   const {
     label,
     children,
     popoverProps,
     onOpen,
-    as,
+    variant = 'button',
     ...triggerProps
   } = props;
-  const isIconButton = as === IconButton;
-  const triggerLabel = isIconButton ? undefined : label;
-  const extraTriggerProps = isIconButton ? {
-    label
-  } : {};
   return MenuButton$1({
-    label: triggerLabel,
+    label,
     children,
     popoverProps,
     onOpen,
+    variant,
     triggerProps: {
       ...triggerProps,
-      ...extraTriggerProps,
-      as,
+      as: TRIGGER_COMPONENTS[variant],
       ref
     }
   }, {
-    Menu
+    MenuProvider,
+    MenuTrigger,
+    MenuPopover,
+    MenuList
   });
-}), {
-  displayName: COMPONENT_NAME$J
 });
+MenuButton.displayName = COMPONENT_NAME$J;
 
 /** MenuItem props. */
 
@@ -15475,6 +15490,7 @@ const MenuItem = forwardRef((props, ref) => {
   const {
     children,
     icon,
+    afterIcon,
     color,
     before,
     after,
@@ -15509,12 +15525,21 @@ const MenuItem = forwardRef((props, ref) => {
       color: color
     }), before]
   }) : before;
+
+  // Append the optional `afterIcon` to the `after` slot.
+  const mergedAfter = afterIcon ? /*#__PURE__*/jsxs(Fragment, {
+    children: [after, /*#__PURE__*/jsx(Icon, {
+      icon: afterIcon,
+      size: "xs",
+      color: color
+    })]
+  }) : after;
   return MenuItem$1({
     ...rest,
     ref: mergedRef,
     actionRef,
     before: mergedBefore,
-    after,
+    after: mergedAfter,
     children: /*#__PURE__*/jsx(Text, {
       as: "span",
       color: color,