@octanejs/base-ui 0.1.50 → 0.1.51

package/src/navigation-menu/icon/NavigationMenuIcon.tsrx

@@ -0,0 +1,56 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useNavigationMenuRootContext } from '../root/NavigationMenuRootContext';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
+import { useNavigationMenuItemContext } from '../item/NavigationMenuItemContext';
+
+/**
+ * An icon that indicates that the trigger button opens a menu.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export const NavigationMenuIcon = function NavigationMenuIcon(
+	componentPropsWithRef: React.PropsWithoutRef<NavigationMenuIcon.Props> & {
+		ref?: React.Ref<HTMLSpanElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, ...elementProps } = componentProps;
+
+	const { value: itemValue } = useNavigationMenuItemContext();
+	const { open, value } = useNavigationMenuRootContext();
+
+	const isActiveItem = open && value === itemValue;
+
+	const state: NavigationMenuIconState = {
+		open: isActiveItem,
+	};
+
+	const element = useRenderElement('span', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: [{ 'aria-hidden': true, children: '▼' }, elementProps],
+		stateAttributesMapping: triggerOpenStateMapping,
+	});
+
+	return element;
+};
+
+export interface NavigationMenuIconState {
+	/**
+	 * Whether the navigation menu is open and the item is active.
+	 */
+	open: boolean;
+}
+
+export interface NavigationMenuIconProps extends BaseUIComponentProps<
+	'span',
+	NavigationMenuIconState
+> {}
+
+export namespace NavigationMenuIcon {
+	export type State = NavigationMenuIconState;
+	export type Props = NavigationMenuIconProps;
+}

package/src/navigation-menu/icon/NavigationMenuIconDataAttributes.ts

@@ -0,0 +1,6 @@
+import { CommonTriggerDataAttributes } from '../../utils/popupStateMapping';
+
+/**
+ * Present when the navigation menu is open and the item is active.
+ */
+export const popupOpen = CommonTriggerDataAttributes.popupOpen;

package/src/navigation-menu/index.parts.ts

@@ -0,0 +1,13 @@
+export { NavigationMenuRoot as Root } from './root/NavigationMenuRoot.tsrx';
+export { NavigationMenuList as List } from './list/NavigationMenuList.tsrx';
+export { NavigationMenuItem as Item } from './item/NavigationMenuItem.tsrx';
+export { NavigationMenuContent as Content } from './content/NavigationMenuContent.tsrx';
+export { NavigationMenuTrigger as Trigger } from './trigger/NavigationMenuTrigger.tsrx';
+export { NavigationMenuPortal as Portal } from './portal/NavigationMenuPortal.tsrx';
+export { NavigationMenuPositioner as Positioner } from './positioner/NavigationMenuPositioner.tsrx';
+export { NavigationMenuViewport as Viewport } from './viewport/NavigationMenuViewport.tsrx';
+export { NavigationMenuBackdrop as Backdrop } from './backdrop/NavigationMenuBackdrop.tsrx';
+export { NavigationMenuPopup as Popup } from './popup/NavigationMenuPopup.tsrx';
+export { NavigationMenuArrow as Arrow } from './arrow/NavigationMenuArrow.tsrx';
+export { NavigationMenuLink as Link } from './link/NavigationMenuLink.tsrx';
+export { NavigationMenuIcon as Icon } from './icon/NavigationMenuIcon.tsrx';

package/src/navigation-menu/index.ts

@@ -0,0 +1,15 @@
+export * as NavigationMenu from './index.parts';
+
+export type * from './root/NavigationMenuRoot.tsrx';
+export type * from './trigger/NavigationMenuTrigger.tsrx';
+export type * from './portal/NavigationMenuPortal.tsrx';
+export type * from './positioner/NavigationMenuPositioner.tsrx';
+export type * from './viewport/NavigationMenuViewport.tsrx';
+export type * from './list/NavigationMenuList.tsrx';
+export type * from './item/NavigationMenuItem.tsrx';
+export type * from './content/NavigationMenuContent.tsrx';
+export type * from './popup/NavigationMenuPopup.tsrx';
+export type * from './backdrop/NavigationMenuBackdrop.tsrx';
+export type * from './arrow/NavigationMenuArrow.tsrx';
+export type * from './link/NavigationMenuLink.tsrx';
+export type * from './icon/NavigationMenuIcon.tsrx';

package/src/navigation-menu/item/NavigationMenuItem.tsrx

@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import {
+	NavigationMenuItemContext,
+	type NavigationMenuItemContextValue,
+} from './NavigationMenuItemContext';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+
+/**
+ * An individual navigation menu item.
+ * Renders a `<li>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export const NavigationMenuItem = function NavigationMenuItem(
+	componentPropsWithRef: React.PropsWithoutRef<NavigationMenuItem.Props> & {
+		ref?: React.Ref<HTMLLIElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, value: valueProp, ...elementProps } = componentProps;
+
+	const fallbackValue = useBaseUiId();
+	const value = valueProp ?? fallbackValue;
+
+	const element = useRenderElement('li', componentProps, {
+		ref: forwardedRef,
+		props: elementProps,
+	});
+
+	const contextValue: NavigationMenuItemContextValue = React.useMemo(() => ({ value }), [value]);
+
+	return (
+		<NavigationMenuItemContext.Provider value={contextValue}>
+			{element}
+		</NavigationMenuItemContext.Provider>
+	);
+};
+
+export interface NavigationMenuItemState {}
+
+export interface NavigationMenuItemProps extends BaseUIComponentProps<
+	'li',
+	NavigationMenuItemState
+> {
+	/**
+	 * A unique value that identifies this navigation menu item.
+	 * If no value is provided, a unique ID will be generated automatically.
+	 * Use when controlling the navigation menu programmatically.
+	 */
+	value?: any;
+}
+
+export namespace NavigationMenuItem {
+	export type State = NavigationMenuItemState;
+	export type Props = NavigationMenuItemProps;
+}

package/src/navigation-menu/item/NavigationMenuItemContext.ts

@@ -0,0 +1,21 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+
+export interface NavigationMenuItemContextValue {
+	value: any;
+}
+
+export const NavigationMenuItemContext = React.createContext<
+	NavigationMenuItemContextValue | undefined
+>(undefined);
+
+export function useNavigationMenuItemContext() {
+	const value = React.useContext(NavigationMenuItemContext);
+	if (!value) {
+		throw new Error(
+			'Base UI: NavigationMenuItem parts must be used within a <NavigationMenu.Item>.',
+		);
+	}
+	return value;
+}

package/src/navigation-menu/link/NavigationMenuLink.tsrx

@@ -0,0 +1,108 @@
+'use client';
+import * as React from 'octane';
+import { useFloatingTree } from '../../floating-ui-react';
+import type { BaseUIComponentProps, HTMLProps } from '../../internals/types';
+import {
+	useNavigationMenuRootContext,
+	useNavigationMenuTreeContext,
+} from '../root/NavigationMenuRootContext';
+import { isOutsideMenuEvent } from '../utils/isOutsideMenuEvent';
+import { CompositeItem } from '../../internals/composite/item/CompositeItem.tsrx';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+
+/**
+ * A link in the navigation menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export const NavigationMenuLink = function NavigationMenuLink(
+	componentPropsWithRef: React.PropsWithoutRef<NavigationMenuLink.Props> & {
+		ref?: React.Ref<HTMLAnchorElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		className,
+		render,
+		active = false,
+		closeOnClick = false,
+		style,
+		...elementProps
+	} = componentProps;
+
+	const { setValue, popupElement, positionerElement, rootRef } = useNavigationMenuRootContext();
+	const nodeId = useNavigationMenuTreeContext();
+	const tree = useFloatingTree();
+
+	const state: NavigationMenuLinkState = {
+		active,
+	};
+
+	const defaultProps: HTMLProps = {
+		'aria-current': active ? 'page' : undefined,
+		tabIndex: undefined,
+		onClick(event) {
+			if (closeOnClick) {
+				setValue(null, createChangeEventDetails(REASONS.linkPress, event));
+			}
+		},
+		onBlur(event) {
+			if (
+				positionerElement &&
+				popupElement &&
+				isOutsideMenuEvent(
+					{
+						currentTarget: event.currentTarget,
+						relatedTarget: event.relatedTarget as HTMLElement | null,
+					},
+					{ popupElement, rootRef, tree, nodeId },
+				)
+			) {
+				setValue(null, createChangeEventDetails(REASONS.focusOut, event));
+			}
+		},
+	};
+
+	return (
+		<CompositeItem
+			tag="a"
+			render={render}
+			className={className}
+			style={style}
+			state={state}
+			refs={[forwardedRef]}
+			props={[defaultProps, elementProps]}
+		/>
+	);
+};
+
+export interface NavigationMenuLinkState {
+	/**
+	 * Whether the link is the currently active page.
+	 */
+	active: boolean;
+}
+
+export interface NavigationMenuLinkProps extends BaseUIComponentProps<
+	'a',
+	NavigationMenuLinkState,
+	React.ComponentPropsWithRef<'a'>
+> {
+	/**
+	 * Whether the link is the currently active page.
+	 * @default false
+	 */
+	active?: boolean | undefined;
+	/**
+	 * Whether to close the navigation menu when the link is clicked.
+	 * @default false
+	 */
+	closeOnClick?: boolean | undefined;
+}
+
+export namespace NavigationMenuLink {
+	export type State = NavigationMenuLinkState;
+	export type Props = NavigationMenuLinkProps;
+}

package/src/navigation-menu/link/NavigationMenuLinkDataAttributes.ts

@@ -0,0 +1,4 @@
+/**
+ * Present when the link is the currently active page.
+ */
+export const active = 'data-active';

package/src/navigation-menu/list/NavigationMenuDismissContext.ts

@@ -0,0 +1,12 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import type { ElementProps } from '../../floating-ui-react';
+
+export const NavigationMenuDismissContext = React.createContext<ElementProps | undefined>(
+	undefined,
+);
+
+export function useNavigationMenuDismissContext() {
+	return React.useContext(NavigationMenuDismissContext);
+}

package/src/navigation-menu/list/NavigationMenuList.tsrx

@@ -0,0 +1,144 @@
+'use client';
+import * as React from 'octane';
+import { EMPTY_OBJECT } from '@octanejs/base-ui-utils/empty';
+import { useDismiss, useHoverFloatingInteraction } from '../../floating-ui-react';
+import { getTarget } from '../../floating-ui-react/utils';
+import type { BaseUIComponentProps, HTMLProps } from '../../internals/types';
+import { CompositeRoot } from '../../internals/composite/root/CompositeRoot.tsrx';
+import {
+	useNavigationMenuRootContext,
+	useNavigationMenuTreeContext,
+} from '../root/NavigationMenuRootContext';
+import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from '../utils/constants';
+import { NavigationMenuDismissContext } from './NavigationMenuDismissContext';
+import { getEmptyRootContext } from '../../floating-ui-react/utils/getEmptyRootContext';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+
+/**
+ * Contains a list of navigation menu items.
+ * Renders a `<ul>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export const NavigationMenuList = function NavigationMenuList(
+	componentPropsWithRef: React.PropsWithoutRef<NavigationMenuList.Props> & {
+		ref?: React.Ref<HTMLUListElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, ...elementProps } = componentProps;
+
+	const nodeId = useNavigationMenuTreeContext();
+
+	const {
+		orientation,
+		open,
+		floatingRootContext,
+		positionerElement,
+		value,
+		closeDelay,
+		viewportElement,
+		nested,
+	} = useNavigationMenuRootContext();
+
+	const fallbackContext = React.useMemo(() => getEmptyRootContext(), []);
+	const context = floatingRootContext || fallbackContext;
+	const interactionsEnabled = positionerElement != null || value == null;
+	const hoverInteractionsEnabled =
+		positionerElement != null || viewportElement != null || value == null;
+
+	useHoverFloatingInteraction(context, {
+		enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
+		closeDelay,
+		nodeId,
+	});
+
+	const dismiss = useDismiss(context, {
+		enabled: interactionsEnabled,
+		outsidePressEvent: 'intentional',
+		outsidePress(event) {
+			const target = getTarget(event) as HTMLElement | null;
+			const closestNavigationMenuTrigger = target?.closest(
+				`[${NAVIGATION_MENU_TRIGGER_IDENTIFIER}]`,
+			);
+			return closestNavigationMenuTrigger === null;
+		},
+	});
+
+	const dismissProps = floatingRootContext ? dismiss : undefined;
+
+	const state: NavigationMenuListState = {
+		open,
+	};
+
+	// `stopEventPropagation` won't stop the propagation if the end of the list is reached,
+	// but we want to block it in this case.
+	// When nested, skip this handler so arrow keys can reach the parent CompositeRoot.
+	const defaultProps: HTMLProps = nested
+		? EMPTY_OBJECT
+		: {
+				onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+					const shouldStop =
+						(orientation === 'horizontal' &&
+							(event.key === 'ArrowLeft' || event.key === 'ArrowRight')) ||
+						(orientation === 'vertical' && (event.key === 'ArrowUp' || event.key === 'ArrowDown'));
+
+					if (shouldStop) {
+						event.stopPropagation();
+					}
+				},
+			};
+
+	const props = [dismissProps?.floating || EMPTY_OBJECT, defaultProps, elementProps];
+
+	// When nested, skip the CompositeRoot wrapper so that triggers can participate
+	// in the parent Content's composite navigation context. The key propagation
+	// guard is already omitted through `defaultProps` above.
+	const element = useRenderElement('ul', componentProps, {
+		state,
+		ref: forwardedRef,
+		props,
+		enabled: nested,
+	});
+
+	if (nested) {
+		return (
+			<NavigationMenuDismissContext.Provider value={dismissProps}>
+				{element}
+			</NavigationMenuDismissContext.Provider>
+		);
+	}
+
+	return (
+		<NavigationMenuDismissContext.Provider value={dismissProps}>
+			<CompositeRoot
+				render={render}
+				className={className}
+				style={style}
+				state={state}
+				refs={[forwardedRef]}
+				props={props}
+				loopFocus={false}
+				orientation={orientation}
+				tag="ul"
+			/>
+		</NavigationMenuDismissContext.Provider>
+	);
+};
+
+export interface NavigationMenuListState {
+	/**
+	 * If `true`, the popup is open.
+	 */
+	open: boolean;
+}
+
+export interface NavigationMenuListProps extends BaseUIComponentProps<
+	'ul',
+	NavigationMenuListState
+> {}
+
+export namespace NavigationMenuList {
+	export type State = NavigationMenuListState;
+	export type Props = NavigationMenuListProps;
+}

package/src/navigation-menu/popup/NavigationMenuPopup.tsrx

@@ -0,0 +1,106 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useNavigationMenuRootContext } from '../root/NavigationMenuRootContext';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+import { useNavigationMenuPositionerContext } from '../positioner/NavigationMenuPositionerContext';
+import { useDirection } from '../../internals/direction-context/DirectionContext.tsrx';
+import { popupTransitionStateMapping } from '../../utils/popupStateMapping';
+import type { Align, Side } from '../../internals/useAnchorPositioning';
+import { getDisabledMountTransitionStyles } from '../../internals/getDisabledMountTransitionStyles';
+
+/**
+ * A container for the navigation menu contents.
+ * Renders a `<nav>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export const NavigationMenuPopup = function NavigationMenuPopup(
+	componentPropsWithRef: React.PropsWithoutRef<NavigationMenuPopup.Props> & {
+		ref?: React.Ref<HTMLElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, id: idProp, ...elementProps } = componentProps;
+
+	const { open, transitionStatus, setPopupElement } = useNavigationMenuRootContext();
+	const positioning = useNavigationMenuPositionerContext();
+	const direction = useDirection();
+
+	const id = useBaseUiId(idProp);
+
+	const state: NavigationMenuPopupState = {
+		open,
+		transitionStatus,
+		side: positioning.side,
+		align: positioning.align,
+		anchorHidden: positioning.anchorHidden,
+	};
+
+	// Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
+	let isPhysicalLeft = positioning.side === 'left';
+	if (direction === 'rtl') {
+		isPhysicalLeft = isPhysicalLeft || positioning.side === 'inline-end';
+	} else {
+		isPhysicalLeft = isPhysicalLeft || positioning.side === 'inline-start';
+	}
+	const isOriginSide = positioning.side === 'top' || isPhysicalLeft;
+
+	const element = useRenderElement('nav', componentProps, {
+		state,
+		ref: [forwardedRef, setPopupElement],
+		props: [
+			{
+				id,
+				tabIndex: -1,
+				style: isOriginSide
+					? {
+							position: 'absolute',
+							[positioning.side === 'top' ? 'bottom' : 'top']: '0',
+							[isPhysicalLeft ? 'right' : 'left']: '0',
+						}
+					: {},
+			},
+			getDisabledMountTransitionStyles(transitionStatus),
+			elementProps,
+		],
+		stateAttributesMapping: popupTransitionStateMapping,
+	});
+
+	return element;
+};
+
+export interface NavigationMenuPopupState {
+	/**
+	 * If `true`, the popup is open.
+	 */
+	open: boolean;
+	/**
+	 * The transition status of the popup.
+	 */
+	transitionStatus: TransitionStatus;
+	/**
+	 * The side of the anchor the popup is positioned on.
+	 */
+	side: Side;
+	/**
+	 * The alignment of the popup relative to the anchor.
+	 */
+	align: Align;
+	/**
+	 * Whether the anchor element is hidden.
+	 */
+	anchorHidden: boolean;
+}
+
+export interface NavigationMenuPopupProps extends BaseUIComponentProps<
+	'nav',
+	NavigationMenuPopupState
+> {}
+
+export namespace NavigationMenuPopup {
+	export type State = NavigationMenuPopupState;
+	export type Props = NavigationMenuPopupProps;
+}

package/src/navigation-menu/popup/NavigationMenuPopupCssVars.ts

@@ -0,0 +1,10 @@
+/**
+ * The fixed width of the popup element.
+ * @type {number}
+ */
+export const popupWidth = '--popup-width';
+/**
+ * The fixed height of the popup element.
+ * @type {number}
+ */
+export const popupHeight = '--popup-height';

package/src/navigation-menu/popup/NavigationMenuPopupDataAttributes.ts

@@ -0,0 +1,32 @@
+import { CommonPopupDataAttributes } from '../../utils/popupStateMapping';
+
+/**
+ * Present when the popup is open.
+ */
+export const open = CommonPopupDataAttributes.open;
+/**
+ * Present when the popup is closed.
+ */
+export const closed = CommonPopupDataAttributes.closed;
+/**
+ * Present when the popup begins animating in.
+ */
+export const startingStyle = CommonPopupDataAttributes.startingStyle;
+/**
+ * Present when the popup is animating out.
+ */
+export const endingStyle = CommonPopupDataAttributes.endingStyle;
+/**
+ * Present when the anchor is hidden.
+ */
+export const anchorHidden = CommonPopupDataAttributes.anchorHidden;
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export const side = CommonPopupDataAttributes.side;
+/**
+ * Indicates how the popup is aligned relative to the specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export const align = CommonPopupDataAttributes.align;

package/src/navigation-menu/portal/NavigationMenuPortal.tsrx

@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'octane';
+import { FloatingPortal } from '../../floating-ui-react';
+import { type BaseUIComponentProps } from '../../internals/types';
+import { useNavigationMenuRootContext } from '../root/NavigationMenuRootContext';
+import { NavigationMenuPortalContext } from './NavigationMenuPortalContext';
+
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export const NavigationMenuPortal = function NavigationMenuPortal(
+	propsWithRef: React.PropsWithoutRef<NavigationMenuPortal.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...props } = propsWithRef;
+	const { keepMounted = false, ...portalProps } = props;
+
+	const { mounted } = useNavigationMenuRootContext();
+
+	const shouldRender = mounted || keepMounted;
+	if (!shouldRender) {
+		return null;
+	}
+
+	return (
+		<NavigationMenuPortalContext.Provider value={keepMounted}>
+			<FloatingPortal ref={forwardedRef} {...portalProps} />
+		</NavigationMenuPortalContext.Provider>
+	);
+};
+
+export interface NavigationMenuPortalState {}
+
+export interface NavigationMenuPortalProps extends BaseUIComponentProps<
+	'div',
+	NavigationMenuPortalState
+> {
+	/**
+	 * Whether to keep the portal mounted in the DOM while the popup is hidden.
+	 * @default false
+	 */
+	keepMounted?: boolean | undefined;
+	/**
+	 * A parent element to render the portal element into.
+	 */
+	container?:
+		HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
+}
+
+export namespace NavigationMenuPortal {
+	export type State = NavigationMenuPortalState;
+	export type Props = NavigationMenuPortalProps;
+}

package/src/navigation-menu/portal/NavigationMenuPortalContext.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+
+export const NavigationMenuPortalContext = React.createContext<boolean | undefined>(undefined);
+
+export function useNavigationMenuPortalContext() {
+	const value = React.useContext(NavigationMenuPortalContext);
+	if (value === undefined) {
+		throw new Error('Base UI: <NavigationMenu.Portal> is missing.');
+	}
+	return value;
+}