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

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

@@ -0,0 +1,31 @@
+import { Popover } from "../popover/Popover.js";
+import { FlexBox } from "../flex-box/FlexBox.js";
+import { useMenuContext } from "./context/MenuContext.js";
+import { useMenuOpen } from "./context/useMenuOpen.js";
+import { CLASSNAME, COMPONENT_NAME, MenuPopover as MenuPopover$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuPopover.js";
+//#region src/components/menu-button/MenuPopover.tsx
+/**
+* MenuPopover component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var MenuPopover = (props) => {
+	const { anchorRef } = useMenuContext();
+	const [isOpen, setIsOpen] = useMenuOpen();
+	const { children, ...popoverProps } = props;
+	return MenuPopover$1({
+		...popoverProps,
+		children,
+		isOpen,
+		anchorRef,
+		handleClose: () => setIsOpen(false)
+	}, {
+		Popover,
+		FlexBox
+	});
+};
+MenuPopover.displayName = COMPONENT_NAME;
+MenuPopover.className = CLASSNAME;
+//#endregion
+export { MenuPopover };

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

@@ -0,0 +1,45 @@
+import { useId } from "../../hooks/useId.js";
+import { setupMenu } from "../../packages/lumx-core/src/js/components/Menu/setupMenu.js";
+import { MenuContext } from "./context/MenuContext.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/menu-button/MenuProvider.tsx
+/**
+* MenuProvider component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+function MenuProvider(props) {
+	const { children, onOpen } = props;
+	const menuId = useId();
+	const triggerId = useId();
+	const anchorRef = useRef(null);
+	const handle = useMemo(() => setupMenu({ menuId }), [menuId]);
+	const onOpenRef = useRef(onOpen);
+	onOpenRef.current = onOpen;
+	useEffect(() => {
+		const unsubscribe = handle.subscribe("open", (isOpen) => onOpenRef.current?.(isOpen));
+		return () => {
+			unsubscribe();
+			handle.destroy();
+		};
+	}, [handle]);
+	const contextValue = useMemo(() => ({
+		handle,
+		menuId,
+		triggerId,
+		anchorRef
+	}), [
+		handle,
+		menuId,
+		triggerId
+	]);
+	return /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+MenuProvider.displayName = "Menu.Provider";
+//#endregion
+export { MenuProvider };

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

@@ -0,0 +1,40 @@
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { Button } from "../button/Button.js";
+import { forwardRefPolymorphic } from "../../utils/react/forwardRefPolymorphic.js";
+import { useMenuContext } from "./context/MenuContext.js";
+import { CLASSNAME, COMPONENT_NAME, MenuTrigger as MenuTrigger$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuTrigger.js";
+import { useMenuOpen } from "./context/useMenuOpen.js";
+import { useEffect, useRef } from "react";
+//#region src/components/menu-button/MenuTrigger.tsx
+/**
+* MenuTrigger component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var MenuTrigger = Object.assign(forwardRefPolymorphic((props, ref) => {
+	const { menuId, triggerId, anchorRef, handle } = useMenuContext();
+	const [isOpen] = useMenuOpen();
+	const { as, children, ...triggerProps } = props;
+	const TriggerComp = as ?? Button;
+	const internalRef = useRef(null);
+	const mergedRef = useMergeRefs(ref, internalRef, anchorRef);
+	useEffect(() => {
+		const triggerEl = internalRef.current;
+		if (!triggerEl) return void 0;
+		return handle.registerTrigger(triggerEl);
+	}, [handle]);
+	return MenuTrigger$1({
+		...triggerProps,
+		id: triggerProps.id ?? triggerId,
+		menuId,
+		isOpen,
+		ref: mergedRef,
+		children
+	}, { Trigger: TriggerComp });
+}), {
+	displayName: COMPONENT_NAME,
+	className: CLASSNAME
+});
+//#endregion
+export { MenuTrigger };

package/_internal/components/menu-button/context/MenuContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+//#region src/components/menu-button/context/MenuContext.ts
+var MenuContext = createContext(void 0);
+/** 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 MenuProvider");
+	return context;
+}
+//#endregion
+export { MenuContext, useMenuContext };

package/_internal/components/menu-button/context/useMenuEvent.js

@@ -0,0 +1,21 @@
+import { useMenuContext } from "./MenuContext.js";
+import { useEffect, useState } from "react";
+//#region src/components/menu-button/context/useMenuEvent.ts
+/**
+* Subscribe to a menu event via the handle's subscriber system.
+* Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+*
+* @param event        Event name to subscribe to.
+* @param initialValue Initial value used until the first event fires.
+* @returns The latest event payload (or `initialValue`).
+*/
+function useMenuEvent(event, initialValue) {
+	const { handle } = useMenuContext();
+	const [value, setValue] = useState(initialValue);
+	useEffect(() => {
+		return handle.subscribe(event, setValue);
+	}, [handle, event]);
+	return value;
+}
+//#endregion
+export { useMenuEvent };

package/_internal/components/menu-button/context/useMenuOpen.js

@@ -0,0 +1,15 @@
+import { useMenuContext } from "./MenuContext.js";
+import { useMenuEvent } from "./useMenuEvent.js";
+import { useCallback } from "react";
+//#region src/components/menu-button/context/useMenuOpen.ts
+/**
+* Subscribe to the menu open state.
+*
+* @returns `[isOpen, setIsOpen]` — open state and a setter that proxies to `handle.setOpen`.
+*/
+function useMenuOpen() {
+	const { handle } = useMenuContext();
+	return [useMenuEvent("open", false), useCallback((open) => handle.setOpen(open), [handle])];
+}
+//#endregion
+export { useMenuOpen };

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

@@ -0,0 +1,3 @@
+import { ListDivider, ListDividerProps } from "../list/ListDivider.js";
+import { MenuButton, MenuButtonProps } from "./MenuButton.js";
+import { MenuItem, MenuItemActionProps, MenuItemProps } from "./MenuItem.js";

package/_internal/components/message/Message.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { MessageProps as MessageProps$1 } from "../../packages/lumx-core/src/js/components/Message/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/message/Message.d.ts
+interface MessageProps extends GenericProps, ReactToJSX<MessageProps$1> {}
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Message: Comp<MessageProps, HTMLDivElement>;
+//#endregion
+export { Message, MessageProps };

package/_internal/components/message/Message.js

@@ -0,0 +1,20 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, Message as Message$1 } from "../../packages/lumx-core/src/js/components/Message/index.js";
+//#region src/components/message/Message.tsx
+/**
+* Message component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Message = forwardRef((props, ref) => {
+	return Message$1({
+		...props,
+		ref
+	});
+});
+Message.displayName = COMPONENT_NAME;
+Message.className = CLASSNAME;
+//#endregion
+export { Message };

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

@@ -0,0 +1 @@
+import { Message, MessageProps } from "./Message.js";

package/_internal/components/mosaic/Mosaic.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 { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import { MosaicProps as MosaicProps$1, MosaicPropsToOverride } from "../../packages/lumx-core/src/js/components/Mosaic/index.js";
+//#region src/components/mosaic/Mosaic.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface MosaicProps extends index_d_exports.GenericProps, ReactToJSX<MosaicProps$1, MosaicPropsToOverride> {
+  /** Thumbnails. */
+  thumbnails: ThumbnailProps[];
+  /** On image click callback. */
+  onImageClick?(index: number): void;
+}
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Mosaic: Comp<MosaicProps, HTMLDivElement>;
+//#endregion
+export { Mosaic, MosaicProps };

package/_internal/components/mosaic/Mosaic.js

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

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

@@ -0,0 +1 @@
+import { Mosaic, MosaicProps } from "./Mosaic.js";

package/_internal/components/navigation/Navigation.d.ts

@@ -0,0 +1,18 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { NavigationSection } from "./NavigationSection.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+
+//#region src/components/navigation/Navigation.d.ts
+type NavigationProps = React.ComponentProps<'nav'> & index_d_exports.HasClassName & index_d_exports.HasTheme & {
+  /** Content of the navigation. These components should be of type NavigationItem to be rendered */children?: React.ReactNode;
+  orientation?: index_d_exports$1.Orientation;
+} & index_d_exports.HasAriaLabelOrLabelledBy;
+type SubComponents = {
+  Section: typeof NavigationSection;
+  Item: typeof NavigationItem;
+};
+declare const Navigation: Comp<NavigationProps, HTMLElement> & SubComponents;
+//#endregion
+export { Navigation, NavigationProps };

package/_internal/components/navigation/Navigation.js

@@ -0,0 +1,51 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { ThemeProvider, useTheme } from "../../utils/theme/ThemeContext.js";
+import { NavigationContext } from "./context.js";
+import { NavigationSection } from "./NavigationSection.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { src_exports } from "../../../index.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/navigation/Navigation.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Navigation";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-navigation";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props
+*/
+var DEFAULT_PROPS = { orientation: src_exports.Orientation.vertical };
+var Navigation = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { children, className, theme = defaultTheme, orientation = DEFAULT_PROPS.orientation, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		value: theme,
+		children: /* @__PURE__ */ jsx("nav", {
+			className: classNames.join(className, block({
+				[`theme-${theme}`]: Boolean(theme),
+				[`orientation-${orientation}`]: Boolean(orientation)
+			})),
+			ref,
+			...forwardedProps,
+			children: /* @__PURE__ */ jsx(NavigationContext.Provider, {
+				value: { orientation },
+				children: /* @__PURE__ */ jsx("ul", {
+					className: element("list"),
+					children
+				})
+			})
+		})
+	});
+});
+Navigation.displayName = COMPONENT_NAME;
+Navigation.className = CLASSNAME;
+Navigation.defaultProps = DEFAULT_PROPS;
+Navigation.Section = NavigationSection;
+Navigation.Item = NavigationItem;
+//#endregion
+export { Navigation };

package/_internal/components/navigation/NavigationItem.d.ts

@@ -0,0 +1,23 @@
+import { ComponentRef } from "../../utils/type/ComponentRef.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ElementType, ReactNode } from "react";
+
+//#region src/components/navigation/NavigationItem.d.ts
+type BaseNavigationItemProps = {
+  /** Icon (SVG path). */icon?: string; /** Label content. */
+  label: ReactNode; /** Mark as the current page link */
+  isCurrentPage?: boolean;
+};
+/**
+ * Navigation item props
+ */
+declare const NavigationItem: (<E extends ElementType = "a">(props: import("react").PropsWithoutRef<import("react").ComponentProps<E>> & {
+  as?: E | undefined;
+} & index_d_exports.HasTheme & index_d_exports.HasClassName & BaseNavigationItemProps & index_d_exports.HasRequiredLinkHref<E> & import("react").ComponentProps<E> & {
+  ref?: ComponentRef<E> | undefined;
+}) => React.JSX.Element) & {
+  displayName: string;
+  className: "lumx-navigation-item";
+};
+//#endregion
+export { NavigationItem };

package/_internal/components/navigation/NavigationItem.js

@@ -0,0 +1,52 @@
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { RawClickable } from "../../packages/lumx-core/src/js/components/RawClickable/index.js";
+import { Icon } from "../icon/Icon.js";
+import { useOverflowTooltipLabel } from "../../hooks/useOverflowTooltipLabel.js";
+import { Text } from "../text/Text.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { forwardRefPolymorphic } from "../../utils/react/forwardRefPolymorphic.js";
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { ITEM_CLASSNAME, ITEM_COMPONENT_NAME } from "./constants.js";
+import { src_exports } from "../../../index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/navigation/NavigationItem.tsx
+var { block, element } = classNames.bem(ITEM_CLASSNAME);
+var NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
+	const { className, icon, label, isCurrentPage, as: Element = "a", onClick, onKeyPress, ...forwardedProps } = props;
+	const theme = useTheme();
+	const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
+	return /* @__PURE__ */ jsx("li", {
+		className: classNames.join(className, block({ [`theme-${theme}`]: Boolean(theme) })),
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			label: tooltipLabel,
+			placement: Placement.TOP,
+			children: RawClickable({
+				as: Element,
+				className: element("link", { "is-selected": isCurrentPage }),
+				ref,
+				"aria-current": isCurrentPage ? "page" : void 0,
+				...forwardedProps,
+				handleClick: onClick,
+				handleKeyPress: onKeyPress,
+				children: /* @__PURE__ */ jsxs(Fragment, { children: [icon ? /* @__PURE__ */ jsx(Icon, {
+					className: element("icon"),
+					icon,
+					size: src_exports.Size.xs,
+					theme
+				}) : null, /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					truncate: true,
+					className: element("label"),
+					ref: labelRef,
+					children: label
+				})] })
+			})
+		})
+	});
+}), {
+	displayName: ITEM_COMPONENT_NAME,
+	className: ITEM_CLASSNAME
+});
+//#endregion
+export { NavigationItem };

package/_internal/components/navigation/NavigationSection.d.ts

@@ -0,0 +1,15 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+
+//#region src/components/navigation/NavigationSection.d.ts
+interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, index_d_exports.HasClassName {
+  /** Items inside the section */
+  children: React.ReactNode;
+  /** Icon (SVG path). */
+  icon?: string;
+  /** Label content. */
+  label: string | React.ReactNode;
+}
+declare const NavigationSection: Comp<NavigationSectionProps, HTMLLIElement>;
+//#endregion
+export { NavigationSection };

package/_internal/components/navigation/NavigationSection.js

@@ -0,0 +1,100 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { ThemeProvider, useTheme } from "../../utils/theme/ThemeContext.js";
+import { RawClickable } from "../../packages/lumx-core/src/js/components/RawClickable/index.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { Popover } from "../popover/Popover.js";
+import { NavigationContext } from "./context.js";
+import { ITEM_CLASSNAME } from "./constants.js";
+import { src_exports } from "../../../index.js";
+import { useContext, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import { mdiChevronUp } from "@lumx/icons/esm/chevron-up.js";
+import { mdiChevronDown } from "@lumx/icons/esm/chevron-down.js";
+//#region src/components/navigation/NavigationSection.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "NavigationSection";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-navigation-section";
+var { block: sectionBlock, element: sectionElement } = classNames.bem(CLASSNAME);
+var { block: itemBlock, element: itemElement } = classNames.bem(ITEM_CLASSNAME);
+var NavigationSection = forwardRef((props, ref) => {
+	const { children, className, label, icon, ...forwardedProps } = props;
+	const [isOpen, setIsOpen] = useState(false);
+	const buttonRef = useRef(null);
+	const sectionId = useId();
+	const { orientation } = useContext(NavigationContext) || {};
+	const theme = useTheme();
+	const isDropdown = orientation === src_exports.Orientation.horizontal;
+	return /* @__PURE__ */ jsxs("li", {
+		className: classNames.join(className, sectionBlock(), itemBlock({ [`theme-${theme}`]: Boolean(theme) })),
+		ref,
+		children: [RawClickable({
+			as: "button",
+			...forwardedProps,
+			"aria-controls": sectionId,
+			"aria-expanded": isOpen,
+			className: itemElement("link"),
+			ref: buttonRef,
+			handleClick: (event) => {
+				setIsOpen(!isOpen);
+				event.stopPropagation();
+			},
+			handleKeyPress: forwardedProps.onKeyPress,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				icon ? /* @__PURE__ */ jsx(Icon, {
+					className: itemElement("icon"),
+					icon,
+					size: src_exports.Size.xs
+				}) : null,
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					truncate: true,
+					className: itemElement("label"),
+					ref,
+					children: label
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					className: classNames.join(itemElement("icon"), sectionElement("chevron")),
+					icon: isOpen ? mdiChevronUp : mdiChevronDown
+				})
+			] })
+		}), isOpen && (isDropdown ? /* @__PURE__ */ jsx(Popover, {
+			anchorRef: buttonRef,
+			isOpen,
+			placement: Placement.BOTTOM_START,
+			usePortal: false,
+			closeOnClickAway: true,
+			closeOnEscape: true,
+			onClick: () => setIsOpen(false),
+			onClose: () => setIsOpen(false),
+			zIndex: 996,
+			children: /* @__PURE__ */ jsx(ThemeProvider, {
+				value: src_exports.Theme.light,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: sectionElement("drawer", { popover: true }),
+					id: sectionId,
+					children: /* @__PURE__ */ jsx(NavigationContext.Provider, {
+						value: { orientation: src_exports.Orientation.vertical },
+						children
+					})
+				})
+			})
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: sectionElement("drawer"),
+			id: sectionId,
+			children
+		}))]
+	});
+});
+NavigationSection.displayName = COMPONENT_NAME;
+NavigationSection.className = CLASSNAME;
+//#endregion
+export { NavigationSection };

package/_internal/components/navigation/constants.js

@@ -0,0 +1,11 @@
+//#region src/components/navigation/constants.ts
+/**
+* Component display name.
+*/
+var ITEM_COMPONENT_NAME = "NavigationItem";
+/**
+* Component default class name and class prefix.
+*/
+var ITEM_CLASSNAME = "lumx-navigation-item";
+//#endregion
+export { ITEM_CLASSNAME, ITEM_COMPONENT_NAME };

package/_internal/components/navigation/context.js

@@ -0,0 +1,6 @@
+import { Orientation } from "@lumx/core/js/constants";
+import { createContext } from "react";
+//#region src/components/navigation/context.tsx
+var NavigationContext = createContext({ orientation: Orientation.vertical });
+//#endregion
+export { NavigationContext };

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

@@ -0,0 +1 @@
+import { Navigation, NavigationProps } from "./Navigation.js";

package/_internal/components/notification/Notification.d.ts

@@ -0,0 +1,36 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+
+//#region src/components/notification/Notification.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface NotificationProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** Action button label. */
+  actionLabel?: string;
+  /** Content. */
+  content?: React.ReactNode;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Notification type. */
+  type?: index_d_exports$1.Kind;
+  /** Z-axis position. */
+  zIndex?: number;
+  /** On action button click callback. */
+  onActionClick?(): void;
+  /** On click callback. */
+  onClick?(): void;
+  /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+  usePortal?: boolean;
+}
+/**
+ * Notification component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Notification: Comp<NotificationProps, HTMLDivElement>;
+//#endregion
+export { Notification, NotificationProps };