@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/link-preview/LinkPreview.d.ts

@@ -0,0 +1,25 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { LinkProps } from "../link/Link.js";
+import { LinkPreviewProps as LinkPreviewProps$1, LinkPreviewPropsToOverride } from "../../packages/lumx-core/src/js/components/LinkPreview/index.js";
+//#region src/components/link-preview/LinkPreview.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LinkPreviewProps extends index_d_exports.GenericProps, ReactToJSX<LinkPreviewProps$1, LinkPreviewPropsToOverride> {
+  /** Props to pass to the link (minus those already set by the LinkPreview props). */
+  linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
+  /** Customize the title heading tag. */
+  titleHeading?: index_d_exports.HeadingElement;
+}
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement>;
+//#endregion
+export { LinkPreview, LinkPreviewProps };

package/_internal/components/link-preview/LinkPreview.js

@@ -0,0 +1,31 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Link } from "../link/Link.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, LinkPreview as LinkPreview$1 } from "../../packages/lumx-core/src/js/components/LinkPreview/index.js";
+import { Thumbnail } from "../thumbnail/Thumbnail.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/link-preview/LinkPreview.tsx
+/**
+* LinkPreview component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var LinkPreview = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { theme = defaultTheme, titleHeading = DEFAULT_PROPS.titleHeading, ...forwardedProps } = props;
+	return LinkPreview$1({
+		theme,
+		TitleHeading: titleHeading,
+		ref,
+		Link,
+		Thumbnail,
+		...forwardedProps
+	});
+});
+LinkPreview.displayName = COMPONENT_NAME;
+LinkPreview.className = CLASSNAME;
+LinkPreview.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { LinkPreview };

package/_internal/components/link-preview/index.d.ts

@@ -0,0 +1 @@
+import { LinkPreview, LinkPreviewProps } from "./LinkPreview.js";

package/_internal/components/list/List.d.ts

@@ -0,0 +1,27 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { useKeyboardListNavigationType } from "../../hooks/useKeyboardListNavigation.js";
+import { ListProps as ListProps$1 } from "../../packages/lumx-core/src/js/components/List/index.js";
+import { Key, SyntheticEvent } from "react";
+
+//#region src/components/list/List.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListProps extends index_d_exports.GenericProps, ReactToJSX<ListProps$1> {
+  /**
+   * Whether the list items are clickable.
+   * @deprecated not needed anymore.
+   */
+  isClickable?: boolean;
+  /** Tab index of the list. */
+  tabIndex?: number;
+  /** @deprecated not supported since v4.0.0 */
+  onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
+}
+declare const List: Comp<ListProps, HTMLUListElement> & {
+  useKeyboardListNavigation: useKeyboardListNavigationType;
+};
+//#endregion
+export { List, ListProps };

package/_internal/components/list/List.js

@@ -0,0 +1,28 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, List as List$1 } from "../../packages/lumx-core/src/js/components/List/index.js";
+import { useKeyboardListNavigation } from "../../hooks/useKeyboardListNavigation.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/list/List.tsx
+/**
+* List component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var InternalList = forwardRef((props, ref) => {
+	const { children, isClickable, onListItemSelected, itemPadding, ...forwardedProps } = props;
+	const adjustedItemPadding = itemPadding ?? (isClickable ? src_exports.Size.big : void 0);
+	return List$1({
+		...forwardedProps,
+		ref,
+		children,
+		itemPadding: adjustedItemPadding
+	});
+});
+InternalList.displayName = COMPONENT_NAME;
+InternalList.className = CLASSNAME;
+InternalList.defaultProps = DEFAULT_PROPS;
+var List = Object.assign(InternalList, { useKeyboardListNavigation });
+//#endregion
+export { List };

package/_internal/components/list/ListDivider.d.ts

@@ -0,0 +1,21 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ListDividerProps as ListDividerProps$1 } from "../../packages/lumx-core/src/js/components/List/ListDivider.js";
+
+//#region src/components/list/ListDivider.d.ts
+/**
+ * Defines the props of the component.
+ */
+type ListDividerProps = index_d_exports.GenericProps & ReactToJSX<ListDividerProps$1>;
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListDivider: Comp<ListDividerProps, HTMLLIElement>;
+//#endregion
+export { ListDivider, ListDividerProps };

package/_internal/components/list/ListDivider.js

@@ -0,0 +1,22 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListDivider as ListDivider$1 } from "../../packages/lumx-core/src/js/components/List/ListDivider.js";
+//#region src/components/list/ListDivider.tsx
+/**
+* ListDivider component.
+* Purely decorative, consider a `ListSection` with label for a better list structure.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ListDivider = forwardRef((props, ref) => {
+	return ListDivider$1({
+		...props,
+		ref
+	});
+});
+ListDivider.displayName = COMPONENT_NAME;
+ListDivider.className = CLASSNAME;
+ListDivider.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ListDivider };

package/_internal/components/list/ListItem.d.ts

@@ -0,0 +1,47 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ComponentRef } from "../../utils/type/ComponentRef.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ListItemActionProps } from "../../packages/lumx-core/src/js/components/List/ListItemAction.js";
+import { ListItemProps as ListItemProps$1, ListItemPropsToOverride, ListItemSize } from "../../packages/lumx-core/src/js/components/List/ListItem.js";
+import { ReactNode, Ref, SyntheticEvent } from "react";
+
+//#region src/components/list/ListItem.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListItemProps extends index_d_exports.GenericProps, index_d_exports.HasAriaDisabled, ReactToJSX<ListItemProps$1, ListItemPropsToOverride> {
+  /** A component to be rendered after the content. */
+  after?: ReactNode;
+  /** A component to be rendered before the content. */
+  before?: ReactNode;
+  /** Content. */
+  children: string | ReactNode;
+  /** Reference to the <li> element. */
+  listItemRef?: Ref<HTMLLIElement>;
+  /** Reference to the link element. */
+  linkRef?: Ref<HTMLAnchorElement>;
+  /** On click callback. */
+  onClick?(event: SyntheticEvent): void;
+  /** @alias onClick */
+  onItemSelected?(evt: SyntheticEvent): void;
+}
+/**
+ * ListItem component with Action sub-component.
+ */
+declare const ListItem: Comp<ListItemProps, HTMLLIElement> & {
+  /** Sub-component that renders the default action (button or link) for the action area pattern. */Action: (<E extends import("react").ElementType = "button">(props: import("react").PropsWithoutRef<import("react").ComponentProps<E>> & {
+    as?: E | undefined;
+  } & index_d_exports.GenericProps & ReactToJSX<ListItemActionProps, "children"> & import("@lumx/core/js/types").HasRequiredLinkHref<E> & {
+    children: ReactNode;
+    onClick?(evt: SyntheticEvent): void;
+  } & import("react").ComponentProps<E> & {
+    ref?: ComponentRef<E> | undefined;
+  }) => React.JSX.Element) & {
+    displayName: string;
+    className: string;
+    defaultProps: Partial<ListItemActionProps<"button">>;
+  };
+};
+//#endregion
+export { ListItem, ListItemProps };

package/_internal/components/list/ListItem.js

@@ -0,0 +1,39 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListItem as ListItem$1 } from "../../packages/lumx-core/src/js/components/List/ListItem.js";
+import { ListItemAction } from "./ListItemAction.js";
+//#region src/components/list/ListItem.tsx
+/**
+* ListItem component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var _ListItem = forwardRef((props, ref) => {
+	const { disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { onItemSelected, onClick, linkRef, ...forwardedProps } = otherProps;
+	const handleClick = (event) => {
+		onItemSelected?.(event);
+		onClick?.(event);
+	};
+	return ListItem$1({
+		...forwardedProps,
+		isDisabled: disabledStateProps.disabled,
+		"aria-disabled": disabledStateProps["aria-disabled"],
+		ref,
+		linkRef,
+		handleClick: onItemSelected || props.onClick ? handleClick : void 0
+	});
+});
+_ListItem.displayName = COMPONENT_NAME;
+_ListItem.className = CLASSNAME;
+_ListItem.defaultProps = DEFAULT_PROPS;
+/**
+* ListItem component with Action sub-component.
+*/
+var ListItem = Object.assign(_ListItem, { 
+/** Sub-component that renders the default action (button or link) for the action area pattern. */
+Action: ListItemAction });
+//#endregion
+export { ListItem };

package/_internal/components/list/ListItemAction.js

@@ -0,0 +1,30 @@
+import { forwardRefPolymorphic } from "../../utils/react/forwardRefPolymorphic.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListItemAction as ListItemAction$1 } from "../../packages/lumx-core/src/js/components/List/ListItemAction.js";
+//#region src/components/list/ListItemAction.tsx
+/**
+* ListItem.Action sub-component.
+*
+* Renders a button or link with action area classes.
+* When placed as a child of ListItem, it activates the action area pattern:
+* the entire list item becomes visually clickable, while other interactive
+* elements (in `before`/`after` slots) remain independently clickable.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
+	const { children, onClick, ...forwardedProps } = props;
+	return ListItemAction$1({
+		...forwardedProps,
+		handleClick: onClick,
+		ref,
+		children
+	});
+}), {
+	displayName: COMPONENT_NAME,
+	className: CLASSNAME,
+	defaultProps: DEFAULT_PROPS
+});
+//#endregion
+export { ListItemAction };

package/_internal/components/list/ListSection.d.ts

@@ -0,0 +1,24 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ListSectionProps as ListSectionProps$1 } from "../../packages/lumx-core/src/js/components/List/ListSection.js";
+import { ReactNode } from "react";
+
+//#region src/components/list/ListSection.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListSectionProps extends index_d_exports.GenericProps, ReactToJSX<ListSectionProps$1, 'children' | 'id' | 'Text'> {
+  /** Section content */
+  children: ReactNode;
+}
+/**
+ * ListSection component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListSection: Comp<ListSectionProps, HTMLLIElement>;
+//#endregion
+export { ListSection, ListSectionProps };

package/_internal/components/list/ListSection.js

@@ -0,0 +1,26 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { Text } from "../text/Text.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListSection as ListSection$1 } from "../../packages/lumx-core/src/js/components/List/ListSection.js";
+//#region src/components/list/ListSection.tsx
+/**
+* ListSection component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ListSection = forwardRef((props, ref) => {
+	const id = useId();
+	return ListSection$1({
+		...props,
+		ref,
+		id,
+		Text
+	});
+});
+ListSection.displayName = COMPONENT_NAME;
+ListSection.className = CLASSNAME;
+ListSection.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ListSection };

package/_internal/components/list/ListSubheader.d.ts

@@ -0,0 +1,23 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/list/ListSubheader.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListSubheaderProps extends index_d_exports.GenericProps {
+  /** Content. */
+  children: string | ReactNode;
+}
+/**
+ * ListSubheader component.
+ * @deprecated ListSubheader produces improper list structure. use ListSection instead.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement>;
+//#endregion
+export { ListSubheader, ListSubheaderProps };

package/_internal/components/list/ListSubheader.js

@@ -0,0 +1,33 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/list/ListSubheader.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListSubheader";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-subheader";
+/**
+* ListSubheader component.
+* @deprecated ListSubheader produces improper list structure. use ListSection instead.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ListSubheader = forwardRef((props, ref) => {
+	const { children, className, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, CLASSNAME),
+		children
+	});
+});
+ListSubheader.displayName = COMPONENT_NAME;
+ListSubheader.className = CLASSNAME;
+//#endregion
+export { ListSubheader };

package/_internal/components/list/index.d.ts

@@ -0,0 +1,6 @@
+import { List, ListProps } from "./List.js";
+import { ListItemSize } from "../../packages/lumx-core/src/js/components/List/ListItem.js";
+import { ListItem, ListItemProps } from "./ListItem.js";
+import { ListDivider, ListDividerProps } from "./ListDivider.js";
+import { ListSection, ListSectionProps } from "./ListSection.js";
+import { ListSubheader, ListSubheaderProps } from "./ListSubheader.js";

package/_internal/components/menu-button/MenuButton.d.ts

@@ -0,0 +1,34 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ButtonProps } from "../button/Button.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { ChipProps } from "../chip/Chip.js";
+import { LinkProps } from "../link/Link.js";
+import { MenuButtonProps as MenuButtonProps$1, MenuButtonVariantsProps } from "../../packages/lumx-core/src/js/components/Menu/MenuButton.js";
+import { MenuPopoverProps } from "./MenuPopover.js";
+import React from "react";
+
+//#region src/components/menu-button/MenuButton.d.ts
+/** Props that MenuButton explicitly declares. */
+type MenuButtonBase = ReactToJSX<MenuButtonProps$1, 'triggerProps' | 'variant'> & {
+  children?: React.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: Comp<MenuButtonProps, HTMLElement>;
+//#endregion
+export { MenuButton, MenuButtonProps };

package/_internal/components/menu-button/MenuButton.js

@@ -0,0 +1,48 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { Button } from "../button/Button.js";
+import { IconButton } from "../button/IconButton.js";
+import { Chip } from "../chip/Chip.js";
+import { Link } from "../link/Link.js";
+import { COMPONENT_NAME, DEFAULT_PROPS, MenuButton as MenuButton$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuButton.js";
+import { MenuProvider } from "./MenuProvider.js";
+import { MenuTrigger } from "./MenuTrigger.js";
+import { MenuPopover } from "./MenuPopover.js";
+import { MenuList } from "./MenuList.js";
+//#region src/components/menu-button/MenuButton.tsx
+/** Menu trigger button component by variant */
+var TRIGGER_COMPONENTS = {
+	button: Button,
+	"icon-button": IconButton,
+	chip: Chip,
+	link: Link
+};
+/**
+* MenuButton component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var MenuButton = forwardRef((props, ref) => {
+	const { label, children, popoverProps, onOpen, variant = DEFAULT_PROPS.variant, ...triggerProps } = props;
+	return MenuButton$1({
+		label,
+		children,
+		popoverProps,
+		onOpen,
+		variant,
+		triggerProps: {
+			...triggerProps,
+			as: TRIGGER_COMPONENTS[variant],
+			ref
+		}
+	}, {
+		MenuProvider,
+		MenuTrigger,
+		MenuPopover,
+		MenuList
+	});
+});
+MenuButton.displayName = COMPONENT_NAME;
+MenuButton.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { MenuButton };

package/_internal/components/menu-button/MenuItem.d.ts

@@ -0,0 +1,46 @@
+import { HasPolymorphicAs } from "../../utils/type/HasPolymorphicAs.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { CLASSNAME, COMPONENT_NAME, MenuItemProps as MenuItemProps$1, MenuItemPropsToOverride } from "../../packages/lumx-core/src/js/components/Menu/MenuItem.js";
+import { ColorPalette } from "@lumx/core/js/constants";
+import { GenericProps } from "@lumx/core/js/types";
+import { ElementType, ReactElement, ReactNode, Ref, SyntheticEvent } from "react";
+
+//#region src/components/menu-button/MenuItem.d.ts
+/** Props forwarded to the inner action element. */
+type MenuItemActionProps<E extends ElementType = 'button'> = HasPolymorphicAs<E> & index_d_exports.HasRequiredLinkHref<E>;
+/** MenuItem props. */
+interface MenuItemProps<E extends ElementType = 'button'> extends GenericProps, ReactToJSX<MenuItemProps$1, MenuItemPropsToOverride> {
+  /** Item label content. */
+  children?: ReactNode;
+  /** Click handler. Calls `event.preventDefault()` to keep the menu open. */
+  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;
+  /** Content rendered before the label (rendered AFTER `icon` if both are provided). */
+  before?: ReactNode;
+  /** Content rendered after the label (e.g. a shortcut hint). */
+  after?: ReactNode;
+  /** Props forwarded to the inner action element (`{ as: 'a', href: '/foo' }`, etc.). */
+  actionProps?: MenuItemActionProps<E>;
+}
+/**
+ * MenuItem component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+declare const MenuItem: {
+  <E extends ElementType = 'button'>(props: MenuItemProps<E> & {
+    ref?: Ref<HTMLLIElement>;
+  }): ReactElement | null;
+  readonly $$typeof: symbol;
+  displayName: typeof COMPONENT_NAME;
+  className: typeof CLASSNAME;
+};
+//#endregion
+export { MenuItem, MenuItemActionProps, MenuItemProps };

package/_internal/components/menu-button/MenuItem.js

@@ -0,0 +1,62 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { useMenuContext } from "./context/MenuContext.js";
+import { CLASSNAME, COMPONENT_NAME, MenuItem as MenuItem$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuItem.js";
+import { useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu-button/MenuItem.tsx
+/**
+* MenuItem component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var MenuItem = forwardRef((props, ref) => {
+	const { handle } = useMenuContext();
+	const { children, icon, afterIcon, color, before, after, isDisabled, onClick, actionProps, ...rest } = props;
+	const internalRef = useRef(null);
+	const actionRef = useRef(null);
+	const mergedRef = useMergeRefs(ref, internalRef);
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+		if (!event.defaultPrevented) {
+			handle.trigger?.focus();
+			handle.setOpen(false);
+		}
+	};
+	const mergedBefore = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+		icon,
+		size: "xs",
+		color
+	}), before] }) : before;
+	const mergedAfter = afterIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [after, /* @__PURE__ */ jsx(Icon, {
+		icon: afterIcon,
+		size: "xs",
+		color
+	})] }) : after;
+	return MenuItem$1({
+		...rest,
+		ref: mergedRef,
+		actionRef,
+		before: mergedBefore,
+		after: mergedAfter,
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			color,
+			children
+		}),
+		isDisabled,
+		actionProps,
+		handleClick
+	});
+});
+MenuItem.displayName = COMPONENT_NAME;
+MenuItem.className = CLASSNAME;
+//#endregion
+export { MenuItem };

package/_internal/components/menu-button/MenuList.js

@@ -0,0 +1,39 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { useMenuContext } from "./context/MenuContext.js";
+import { useMenuOpen } from "./context/useMenuOpen.js";
+import { CLASSNAME, COMPONENT_NAME, MenuList as MenuList$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuList.js";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/menu-button/MenuList.tsx
+/**
+* MenuList component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var MenuList = forwardRef((props, ref) => {
+	const { menuId, triggerId, handle } = useMenuContext();
+	const internalRef = useRef(null);
+	const mergedRef = useMergeRefs(ref, internalRef);
+	const { children, ...forwardedProps } = props;
+	const [isOpen] = useMenuOpen();
+	useLayoutEffect(() => {
+		const menu = internalRef.current;
+		if (!menu) return void 0;
+		return handle.registerMenu(menu);
+	}, [handle]);
+	useLayoutEffect(() => {
+		if (isOpen) handle.flushPendingNavigation();
+	}, [handle, isOpen]);
+	return MenuList$1({
+		...forwardedProps,
+		id: menuId,
+		"aria-labelledby": triggerId,
+		ref: mergedRef,
+		children: isOpen ? children : null
+	});
+});
+MenuList.displayName = COMPONENT_NAME;
+MenuList.className = CLASSNAME;
+//#endregion
+export { MenuList };

package/_internal/components/menu-button/MenuPopover.d.ts

@@ -0,0 +1,13 @@
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { MenuPopoverProps as MenuPopoverProps$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuPopover.js";
+import { ReactNode } from "react";
+
+//#region src/components/menu-button/MenuPopover.d.ts
+/** Popover props forwarded to the inner Popover (minus managed props). */
+/** MenusPopover props. */
+interface MenuPopoverProps extends ReactToJSX<MenuPopoverProps$1, 'isOpen' | 'anchorRef' | 'handleClose'> {
+  /** Content (should contain a `Menu`). */
+  children: ReactNode;
+}
+//#endregion
+export { MenuPopoverProps };