@lumx/react 4.17.0-next.0 → 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';
@@ -6377,7 +6378,7 @@ function setupListbox(handle, signal, notify, options) {
       wrap: options?.wrapNavigation,
       getActiveItem: () => {
         const id = trigger.getAttribute('aria-activedescendant');
-        return id ? document.getElementById(id) : null;
+        return id && listbox.querySelector(`#${CSS.escape(id)}`) || null;
       }
     }, focusCallbacks, signal);
   }
@@ -6399,11 +6400,6 @@ function setupListbox(handle, signal, notify, options) {
     }
     handle.select(cell);
     trigger.focus();
-
-    // In multi-select mode, keep visual focus on the selected option
-    if (!handle.isMultiSelect) {
-      handle.setIsOpen(false);
-    }
   }, {
     signal
   });
@@ -6593,10 +6589,6 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
             if (!isOptionDisabled(activeItem)) {
               activeItem.click();
             }
-            // Only close when not in multi select and not in action cell
-            if (!handle.isMultiSelect && !isActionCell(activeItem)) {
-              handle.setIsOpen(false);
-            }
             flag = true;
           } else if (handle.isOpen && !handle.isMultiSelect) {
             // Open with no active item (single select) => close the popup,
@@ -6751,6 +6743,15 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       callbacks.onSelect?.({
         value: option ? getOptionValue(option) : ''
       });
+
+      // Close on selection (when not multiselectable)
+      if (option && !handle.isMultiSelect) {
+        handle.focusNav?.clear();
+        // Defer the close to the next frame (to make sure all other click handler resolve).
+        requestAnimationFrame(() => {
+          handle.setIsOpen(false);
+        });
+      }
     },
     flushPendingNavigation() {
       // Do navigations actions we could not do because the combobox items were not mounted yet
@@ -7349,7 +7350,8 @@ function setupComboboxInput(input, options) {
   let handle;
   const {
     filter = 'auto',
-    onSelect: optionOnSelect
+    onSelect: optionOnSelect,
+    onInput: onInputCallback
   } = options;
   const openOnFocus = options.openOnFocus ?? filter === 'off';
   const autoFilter = filter === 'auto';
@@ -7366,18 +7368,11 @@ function setupComboboxInput(input, options) {
 
   /**
    * Wraps the consumer's onSelect to perform input-mode side effects after selection:
-   * clears the active descendant, resets the filter, and re-opens the popup.
+   * resets the filter and typing state.
    */
   const onSelect = option => {
     optionOnSelect?.(option);
-
-    // Clear the active item. In multi-select, keep visual focus so the
-    // user can continue navigating after selection.
-    if (!handle.isMultiSelect) {
-      handle.focusNav?.clear();
-    }
     userHasTyped = false;
-    handle.setIsOpen(true);
     if (autoFilter) {
       handle.setFilter('');
     }
@@ -7397,6 +7392,9 @@ function setupComboboxInput(input, options) {
       if (isDisabled()) return;
       combobox.focusNav?.clear();
       userHasTyped = true;
+
+      // Notify the framework wrapper of the new input value synchronously.
+      onInputCallback?.(input.value);
       combobox.setIsOpen(true);
       if (autoFilter) {
         combobox.setFilter(input.value);
@@ -8141,6 +8139,10 @@ const ComboboxInput = forwardRef((props, ref) => {
         onChangeRef.current?.(option.value);
         onSelectRef.current?.(option);
       },
+      onInput(value) {
+        // Keep controlled value in sync.
+        onChangeRef.current?.(value);
+      },
       filter,
       openOnFocus
     });
@@ -14708,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
       })
     })]
@@ -15059,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;
 }
@@ -15234,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, {
@@ -15246,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,
@@ -15363,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.
@@ -15382,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. */
 
@@ -15474,6 +15490,7 @@ const MenuItem = forwardRef((props, ref) => {
   const {
     children,
     icon,
+    afterIcon,
     color,
     before,
     after,
@@ -15508,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,