@octanejs/base-ui 0.1.50 → 0.1.51

package/src/menubar/Menubar.tsrx

@@ -0,0 +1,173 @@
+'use client';
+import * as React from 'octane';
+import {
+	FloatingNode,
+	FloatingTree,
+	useFloatingNodeId,
+	useFloatingTree,
+} from '../floating-ui-react';
+import { type MenuRoot } from '../menu/root/MenuRoot.tsrx';
+import type { BaseUIComponentProps } from '../internals/types';
+import { MenubarContext, useMenubarContext } from './MenubarContext';
+import { CompositeRoot } from '../internals/composite/root/CompositeRoot.tsrx';
+import { useBaseUiId } from '../internals/useBaseUiId';
+import type { MenuOpenEventDetails } from '../menu/utils/types';
+import type { StateAttributesMapping } from '../internals/getStateAttributesProps';
+import * as MenubarDataAttributes from './MenubarDataAttributes';
+import { REASONS } from '../internals/reasons';
+
+const menubarStateAttributesMapping: StateAttributesMapping<MenubarState> = {
+	hasSubmenuOpen(value) {
+		return value ? { [MenubarDataAttributes.hasSubmenuOpen]: '' } : null;
+	},
+};
+
+/**
+ * The container for menus.
+ *
+ * Documentation: [Base UI Menubar](https://base-ui.com/react/components/menubar)
+ */
+export const Menubar = function Menubar(
+	propsWithRef: React.PropsWithoutRef<Menubar.Props> & { ref?: React.Ref<HTMLDivElement> },
+) {
+	const { ref: forwardedRef = null, ...props } = propsWithRef;
+	const {
+		orientation = 'horizontal',
+		loopFocus = true,
+		render,
+		className,
+		modal = true,
+		disabled = false,
+		id: idProp,
+		style,
+		...elementProps
+	} = props;
+
+	const [contentElement, setContentElement] = React.useState<HTMLElement | null>(null);
+	const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
+
+	const id = useBaseUiId(idProp);
+
+	const state: MenubarState = {
+		orientation,
+		modal,
+		hasSubmenuOpen,
+	};
+
+	const contentRef = React.useRef<HTMLDivElement | null>(null);
+	const allowMouseUpTriggerRef = React.useRef(false);
+
+	const context: MenubarContext = React.useMemo(
+		() => ({
+			contentElement,
+			setContentElement,
+			setHasSubmenuOpen,
+			hasSubmenuOpen,
+			modal,
+			disabled,
+			orientation,
+			allowMouseUpTriggerRef,
+			rootId: id,
+		}),
+		[contentElement, hasSubmenuOpen, modal, disabled, orientation, id],
+	);
+
+	return (
+		<MenubarContext.Provider value={context}>
+			<FloatingTree>
+				<MenubarContent>
+					<CompositeRoot
+						render={render}
+						className={className}
+						style={style}
+						state={state}
+						stateAttributesMapping={menubarStateAttributesMapping}
+						refs={[forwardedRef, setContentElement, contentRef]}
+						props={[{ role: 'menubar', id, 'aria-orientation': orientation }, elementProps]}
+						orientation={orientation}
+						loopFocus={loopFocus}
+						enableHomeAndEndKeys
+						highlightItemOnHover={hasSubmenuOpen}
+					/>
+				</MenubarContent>
+			</FloatingTree>
+		</MenubarContext.Provider>
+	);
+};
+
+function MenubarContent(props: React.PropsWithChildren<{}>) {
+	const nodeId = useFloatingNodeId();
+	const { events: menuEvents } = useFloatingTree()!;
+	const rootContext = useMenubarContext();
+
+	React.useEffect(() => {
+		function onSubmenuOpenChange(details: MenuOpenEventDetails) {
+			if (!details.nodeId || details.parentNodeId !== nodeId) {
+				return;
+			}
+
+			if (details.open) {
+				if (!rootContext.hasSubmenuOpen) {
+					rootContext.setHasSubmenuOpen(true);
+				}
+			} else if (
+				details.reason !== REASONS.siblingOpen &&
+				details.reason !== REASONS.listNavigation
+			) {
+				rootContext.setHasSubmenuOpen(false);
+			}
+		}
+
+		menuEvents.on('menuopenchange', onSubmenuOpenChange);
+
+		return () => {
+			menuEvents.off('menuopenchange', onSubmenuOpenChange);
+		};
+	}, [menuEvents, nodeId, rootContext]);
+
+	return <FloatingNode id={nodeId}>{props.children}</FloatingNode>;
+}
+
+export interface MenubarState {
+	/**
+	 * The orientation of the menubar.
+	 */
+	orientation: MenuRoot.Orientation;
+	/**
+	 * Whether the menubar is modal.
+	 */
+	modal: boolean;
+	/**
+	 * Whether any submenu within the menubar is open.
+	 */
+	hasSubmenuOpen: boolean;
+}
+
+export interface MenubarProps extends BaseUIComponentProps<'div', MenubarState> {
+	/**
+	 * Whether the menubar is modal.
+	 * @default true
+	 */
+	modal?: boolean | undefined;
+	/**
+	 * Whether the whole menubar is disabled.
+	 * @default false
+	 */
+	disabled?: boolean | undefined;
+	/**
+	 * The orientation of the menubar.
+	 * @default 'horizontal'
+	 */
+	orientation?: MenuRoot.Orientation | undefined;
+	/**
+	 * Whether to loop keyboard focus back to the first item
+	 * when the end of the list is reached while using the arrow keys.
+	 * @default true
+	 */
+	loopFocus?: boolean | undefined;
+}
+
+export namespace Menubar {
+	export type State = MenubarState;
+	export type Props = MenubarProps;
+}

package/src/menubar/MenubarContext.ts

@@ -0,0 +1,31 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { type MenuRoot } from '../menu/root/MenuRoot.tsrx';
+
+export interface MenubarContext {
+	modal: boolean;
+	disabled: boolean;
+	contentElement: HTMLElement | null;
+	setContentElement: (element: HTMLElement | null) => void;
+	hasSubmenuOpen: boolean;
+	setHasSubmenuOpen: (open: boolean) => void;
+	orientation: MenuRoot.Orientation;
+	allowMouseUpTriggerRef: React.RefObject<boolean>;
+	rootId: string | undefined;
+}
+
+export const MenubarContext = React.createContext<MenubarContext | null>(null);
+
+export function useMenubarContext(optional?: false): MenubarContext;
+export function useMenubarContext(optional: true): MenubarContext | null;
+export function useMenubarContext(optional?: boolean) {
+	const context = React.useContext(MenubarContext);
+	if (context === null && !optional) {
+		throw new Error(
+			'Base UI: MenubarContext is missing. Menubar parts must be placed within <Menubar>.',
+		);
+	}
+
+	return context;
+}

package/src/menubar/MenubarDataAttributes.ts

@@ -0,0 +1,13 @@
+/**
+ * Present when the corresponding menubar is modal.
+ */
+export const modal = 'data-modal';
+/**
+ * Determines the orientation of the menubar.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';
+/**
+ * Present when any submenu within the menubar is open.
+ */
+export const hasSubmenuOpen = 'data-has-submenu-open';

package/src/menubar/index.ts

@@ -0,0 +1,3 @@
+export { Menubar } from './Menubar.tsrx';
+
+export type * from './Menubar.tsrx';

package/src/merge-props/index.ts

@@ -0,0 +1 @@
+export * from './mergeProps';

package/src/merge-props/mergeProps.ts

@@ -0,0 +1,302 @@
+import type * as React from 'octane';
+import { mergeStyles } from '../utils/mergeStyles';
+import type { BaseUIEvent, WithBaseUIEvent } from '../internals/types';
+
+type ElementType = React.ElementType;
+type PropsOf<T extends React.ElementType> = React.ComponentPropsWithRef<T> & {
+	style?: React.CSSProperties | undefined;
+};
+type InputProps<T extends React.ElementType> =
+	WithBaseUIEvent<PropsOf<T>> | ((otherProps: PropsOf<T>) => PropsOf<T>) | undefined;
+
+const EMPTY_PROPS = {};
+
+/* eslint-disable id-denylist */
+/**
+ * Merges multiple sets of Octane props. It follows the Object.assign pattern where the rightmost object's fields overwrite
+ * the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
+ *
+ * Event handlers are merged and called in right-to-left order (rightmost handler executes first, leftmost last).
+ * For native DOM events, the rightmost handler can prevent prior (left-positioned) handlers from executing
+ * by calling `event.preventBaseUIHandler()`. For custom callbacks with primitive/object values,
+ * all handlers always execute without prevention capability.
+ *
+ * The `className` prop is merged by concatenating classes in right-to-left order (rightmost class appears first in the string).
+ * The `style` prop is merged with rightmost styles overwriting the prior ones.
+ *
+ * Props can either be provided as objects or as functions that take the previous props as an argument.
+ * The function will receive the merged props up to that point (going from left to right):
+ * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
+ *
+ * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
+ * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
+ *
+ * @important **`ref` is not merged.**
+ * @param a Props object to merge.
+ * @param b Props object to merge. The function will overwrite conflicting props from `a`.
+ * @param c Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @param d Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @param e Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @returns The merged props.
+ * @public
+ */
+export function mergeProps<T extends ElementType>(
+	a: InputProps<T>,
+	b: InputProps<T>,
+	c: InputProps<T>,
+	d: InputProps<T>,
+	e: InputProps<T>,
+): PropsOf<T>;
+export function mergeProps<T extends ElementType>(
+	a: InputProps<T>,
+	b: InputProps<T>,
+	c: InputProps<T>,
+	d: InputProps<T>,
+): PropsOf<T>;
+export function mergeProps<T extends ElementType>(
+	a: InputProps<T>,
+	b: InputProps<T>,
+	c: InputProps<T>,
+): PropsOf<T>;
+export function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>): PropsOf<T>;
+export function mergeProps(a: any, b: any, c?: any, d?: any, e?: any) {
+	if (!c && !d && !e && !a) {
+		return createInitialMergedProps(b);
+	}
+
+	// We need to mutably own `merged`.
+	let merged = createInitialMergedProps(a);
+
+	if (b) {
+		merged = mergeInto(merged, b);
+	}
+	if (c) {
+		merged = mergeInto(merged, c);
+	}
+	if (d) {
+		merged = mergeInto(merged, d);
+	}
+	if (e) {
+		merged = mergeInto(merged, e);
+	}
+
+	return merged;
+}
+/* eslint-enable id-denylist */
+
+/**
+ * Merges an arbitrary number of Octane props using the same logic as {@link mergeProps}.
+ * This function accepts an array of props instead of individual arguments.
+ *
+ * This has slightly lower performance than {@link mergeProps} due to accepting an array
+ * instead of a fixed number of arguments. Prefer {@link mergeProps} when merging 5 or
+ * fewer prop sets for better performance.
+ *
+ * @param props Array of props to merge.
+ * @returns The merged props.
+ * @see mergeProps
+ * @public
+ */
+export function mergePropsN<T extends ElementType>(props: InputProps<T>[]): PropsOf<T> {
+	if (props.length === 0) {
+		return EMPTY_PROPS as PropsOf<T>;
+	}
+	if (props.length === 1) {
+		return createInitialMergedProps(props[0]) as PropsOf<T>;
+	}
+
+	// We need to mutably own `merged`.
+	let merged = createInitialMergedProps(props[0]);
+
+	for (let i = 1; i < props.length; i += 1) {
+		merged = mergeInto(merged, props[i]);
+	}
+
+	return merged as PropsOf<T>;
+}
+
+function createInitialMergedProps<T extends ElementType>(inputProps: InputProps<T>) {
+	if (isPropsGetter(inputProps)) {
+		// Getter-returned handlers intentionally keep their existing semantics.
+		return { ...resolvePropsGetter(inputProps, EMPTY_PROPS) };
+	}
+
+	return copyInitialProps(inputProps);
+}
+
+function mergeInto<T extends ElementType>(merged: Record<string, any>, inputProps: InputProps<T>) {
+	if (isPropsGetter(inputProps)) {
+		return resolvePropsGetter(inputProps, merged as PropsOf<T>);
+	}
+	return mutablyMergeInto(merged, inputProps);
+}
+
+function copyInitialProps<T extends ElementType>(
+	inputProps: WithBaseUIEvent<PropsOf<T>> | undefined,
+) {
+	const copiedProps = { ...inputProps } as Record<string, any>;
+
+	// `copiedProps` is our fresh own-object copy, so iterating with `for...in` is safe here.
+	// eslint-disable-next-line guard-for-in
+	for (const propName in copiedProps) {
+		const propValue = copiedProps[propName];
+		if (isEventHandler(propName, propValue)) {
+			copiedProps[propName] = wrapEventHandler(propValue);
+		}
+	}
+
+	return copiedProps;
+}
+
+/**
+ * Merges two sets of props. In case of conflicts, the external props take precedence.
+ */
+function mutablyMergeInto<T extends ElementType>(
+	mergedProps: Record<string, any>,
+	externalProps: WithBaseUIEvent<PropsOf<T>> | undefined,
+) {
+	if (!externalProps) {
+		return mergedProps;
+	}
+
+	// eslint-disable-next-line guard-for-in
+	for (const propName in externalProps) {
+		const externalPropValue = externalProps[propName];
+
+		switch (propName) {
+			case 'style': {
+				mergedProps[propName] = mergeStyles(mergedProps.style, externalPropValue);
+				break;
+			}
+			case 'className': {
+				mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue as string);
+				break;
+			}
+			default: {
+				if (isEventHandler(propName, externalPropValue)) {
+					mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
+				} else {
+					mergedProps[propName] = externalPropValue;
+				}
+			}
+		}
+	}
+
+	return mergedProps;
+}
+
+function isEventHandler(key: string, value: unknown) {
+	// This approach is more efficient than using a regex.
+	const code0 = key.charCodeAt(0);
+	const code1 = key.charCodeAt(1);
+	const code2 = key.charCodeAt(2);
+	return (
+		code0 === 111 /* o */ &&
+		code1 === 110 /* n */ &&
+		code2 >= 65 /* A */ &&
+		code2 <= 90 /* Z */ &&
+		(typeof value === 'function' || typeof value === 'undefined')
+	);
+}
+
+function isPropsGetter<T extends ElementType>(
+	inputProps: InputProps<T>,
+): inputProps is (props: PropsOf<T>) => PropsOf<T> {
+	return typeof inputProps === 'function';
+}
+
+function resolvePropsGetter<T extends ElementType>(
+	inputProps: InputProps<ElementType>,
+	previousProps: PropsOf<T>,
+) {
+	if (isPropsGetter(inputProps)) {
+		return inputProps(previousProps);
+	}
+
+	return inputProps ?? (EMPTY_PROPS as PropsOf<T>);
+}
+
+function mergeEventHandlers(ourHandler: Function | undefined, theirHandler: Function | undefined) {
+	if (!theirHandler) {
+		return ourHandler;
+	}
+	if (!ourHandler) {
+		return wrapEventHandler(theirHandler);
+	}
+
+	return (...args: unknown[]) => {
+		const event = args[0];
+
+		if (isNativeEvent(event)) {
+			const baseUIEvent = event as BaseUIEvent<typeof event>;
+
+			makeEventPreventable(baseUIEvent);
+
+			const result = theirHandler(...args);
+
+			if (!baseUIEvent.baseUIHandlerPrevented) {
+				ourHandler?.(...args);
+			}
+
+			return result;
+		}
+
+		const result = theirHandler(...args);
+		ourHandler?.(...args);
+		return result;
+	};
+}
+
+function wrapEventHandler(handler: Function | undefined) {
+	if (!handler) {
+		return handler;
+	}
+
+	return (...args: unknown[]) => {
+		const event = args[0];
+
+		if (isNativeEvent(event)) {
+			makeEventPreventable(event as BaseUIEvent<typeof event>);
+		}
+
+		return handler(...args);
+	};
+}
+
+export function makeEventPreventable<T extends Event>(event: T): BaseUIEvent<T> {
+	const baseUIEvent = event as BaseUIEvent<T>;
+	baseUIEvent.preventBaseUIHandler = () => {
+		(baseUIEvent.baseUIHandlerPrevented as boolean) = true;
+	};
+
+	return baseUIEvent;
+}
+
+export function mergeClassNames(
+	ourClassName: string | undefined,
+	theirClassName: string | undefined,
+) {
+	if (theirClassName) {
+		if (ourClassName) {
+			// eslint-disable-next-line prefer-template
+			return theirClassName + ' ' + ourClassName;
+		}
+
+		return theirClassName;
+	}
+
+	return ourClassName;
+}
+
+function isNativeEvent(event: unknown): event is Event {
+	// Duck typing also recognizes events created by an iframe's Window.
+	return (
+		event != null &&
+		typeof event === 'object' &&
+		'preventDefault' in event &&
+		typeof event.preventDefault === 'function' &&
+		'stopPropagation' in event &&
+		typeof event.stopPropagation === 'function'
+	);
+}

package/src/meter/index.parts.ts

@@ -0,0 +1,5 @@
+export { MeterRoot as Root } from './root/MeterRoot.tsrx';
+export { MeterTrack as Track } from './track/MeterTrack.tsrx';
+export { MeterIndicator as Indicator } from './indicator/MeterIndicator.tsrx';
+export { MeterValue as Value } from './value/MeterValue.tsrx';
+export { MeterLabel as Label } from './label/MeterLabel.tsrx';

package/src/meter/index.ts

@@ -0,0 +1,7 @@
+export * as Meter from './index.parts';
+
+export type * from './root/MeterRoot.tsrx';
+export type * from './indicator/MeterIndicator.tsrx';
+export type * from './label/MeterLabel.tsrx';
+export type * from './track/MeterTrack.tsrx';
+export type * from './value/MeterValue.tsrx';

package/src/meter/indicator/MeterIndicator.tsrx

@@ -0,0 +1,46 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import type { MeterRootState } from '../root/MeterRoot.tsrx';
+import { useMeterRootContext } from '../root/MeterRootContext';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+
+/**
+ * Visualizes the position of the value along the range.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export const MeterIndicator = function MeterIndicator(
+	componentPropsWithRef: React.PropsWithoutRef<MeterIndicator.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, ...elementProps } = componentProps;
+
+	const { percentageValue } = useMeterRootContext();
+
+	return useRenderElement('div', componentProps, {
+		ref: forwardedRef,
+		props: [
+			{
+				style: {
+					insetInlineStart: 0,
+					height: 'inherit',
+					width: `${percentageValue}%`,
+				},
+			},
+			elementProps,
+		],
+	});
+};
+
+export interface MeterIndicatorState extends MeterRootState {}
+
+export interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterIndicatorState> {}
+
+export namespace MeterIndicator {
+	export type State = MeterIndicatorState;
+	export type Props = MeterIndicatorProps;
+}

package/src/meter/label/MeterLabel.tsrx

@@ -0,0 +1,46 @@
+'use client';
+import type * as React from 'octane';
+import { useMeterRootContext } from '../root/MeterRootContext';
+import type { MeterRootState } from '../root/MeterRoot.tsrx';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useRegisteredLabelId } from '../../utils/useRegisteredLabelId';
+
+/**
+ * An accessible label for the meter.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export const MeterLabel = function MeterLabel(
+	componentPropsWithRef: React.PropsWithoutRef<MeterLabel.Props> & {
+		ref?: React.Ref<HTMLSpanElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, id: idProp, ...elementProps } = componentProps;
+
+	const { setLabelId } = useMeterRootContext();
+
+	const id = useRegisteredLabelId(idProp, setLabelId);
+
+	return useRenderElement('span', componentProps, {
+		ref: forwardedRef,
+		props: [
+			{
+				id,
+				role: 'presentation',
+			},
+			elementProps,
+		],
+	});
+};
+
+export interface MeterLabelState extends MeterRootState {}
+
+export interface MeterLabelProps extends BaseUIComponentProps<'span', MeterLabelState> {}
+
+export namespace MeterLabel {
+	export type State = MeterLabelState;
+	export type Props = MeterLabelProps;
+}