@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/composer/use-composer-editor.ts

@@ -0,0 +1,153 @@
+"use client";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { useCallback, useState, useSyncExternalStore } from "react";
+import {
+	getComposerText,
+	getFilteredItems,
+	hasVisibleItems,
+} from "./composer-document";
+import type {
+	ComposerEditorController,
+	UseComposerEditorOptions,
+} from "./composer-options";
+import { ComposerSession, type View } from "./composer-session";
+import type { ComposerValue } from "./composer-value";
+
+const EMPTY: ComposerValue = [];
+function editorState(options: UseComposerEditorOptions, view: View) {
+	const disabled = options.disabled ?? false;
+	const readOnly = options.readOnly ?? false;
+	const editable = !(disabled || readOnly || view.composing);
+	return {
+		canSubmit:
+			editable &&
+			!options.submitDisabled &&
+			(!!options.allowEmpty || !!getComposerText(options.value).trim()),
+		disabled,
+		editable,
+		isComposing: view.composing,
+		isEmpty: !getComposerText(options.value),
+		isTextarea: view.textarea,
+		readOnly,
+		value: options.value,
+	};
+}
+function inputProps(
+	session: ComposerSession,
+	state: ReturnType<typeof editorState>
+): ComposerEditorController["inputProps"] {
+	return {
+		"aria-disabled": state.disabled || undefined,
+		"aria-multiline": true,
+		"aria-readonly": state.readOnly || undefined,
+		contentEditable: state.isTextarea
+			? undefined
+			: !(state.disabled || state.readOnly),
+		onBlur: session.blur,
+		onClick: session.refreshQuery,
+		onCompositionEnd: session.endComposition,
+		onCompositionStart: session.startComposition,
+		onCopy: session.copy,
+		onCut: session.cut,
+		onDrop: session.drop,
+		onInput: session.inputChanged,
+		onKeyDown: session.keyDown,
+		onKeyUp(event) {
+			if (!(event.defaultPrevented || state.isComposing)) {
+				session.refreshQuery();
+			}
+		},
+		onPaste: session.paste,
+		ref: session.bind,
+		role: "textbox",
+		suppressContentEditableWarning: true,
+		tabIndex: state.disabled ? -1 : 0,
+	};
+}
+export function useComposerEditor(
+	options: UseComposerEditorOptions,
+	resetValue: ComposerValue = EMPTY
+): ComposerEditorController {
+	const [session] = useState(() => new ComposerSession(options));
+	const view = useSyncExternalStore(
+		session.subscribe,
+		session.getSnapshot,
+		session.getServerSnapshot
+	);
+	const { contains } = useComposerFilter();
+	const trigger = options.triggers?.find(
+		({ character }) => character === view.query?.character
+	);
+	const items = getFilteredItems(trigger, view.query, contains);
+	const state = editorState(options, view);
+	const enabled = suggestionsEnabled(state.editable, view, options);
+	const syncRootRef = useCallback(
+		(root: HTMLFormElement | null) => {
+			if (!root) {
+				return;
+			}
+			session.commit(options, resetValue);
+			return session.bindRoot(root);
+		},
+		[session, options, resetValue]
+	);
+
+	return {
+		...state,
+		formProps: {
+			onSubmit(event) {
+				if (event.defaultPrevented || event.target !== event.currentTarget) {
+					return;
+				}
+				event.preventDefault();
+				session.performSubmit();
+			},
+		},
+		inputProps: inputProps(session, state),
+		insertTrigger: session.insertTrigger,
+		reset: session.reset,
+		rootRef: session.rootRef,
+		status: trigger?.status ?? "ready",
+		submit: session.submit,
+		suggestions: {
+			enabled,
+			items,
+			onItemSelect: session.select,
+			onOpenChange(open) {
+				if (!open) {
+					session.dismiss();
+				}
+			},
+			open: enabled && !!view.query && hasVisibleItems(trigger, items),
+			submitOnEmptySuggestions: options.submitOnEmptySuggestions ?? false,
+		},
+		syncRootRef,
+		tokenHosts: view.hosts,
+	};
+}
+export const useComposerFilter: typeof Autocomplete.useFilter =
+	Autocomplete.useFilter;
+// biome-ignore lint/performance/noBarrelFile: Preserve public Composer exports.
+export { getComposerText } from "./composer-document";
+export type {
+	ComposerChangeDetails,
+	ComposerEditorController,
+	UseComposerEditorOptions,
+} from "./composer-options";
+export type {
+	ComposerItemValue,
+	ComposerPart,
+	ComposerQuery,
+	ComposerTokenPart,
+	ComposerTrigger,
+	ComposerTriggerState,
+	ComposerValue,
+} from "./composer-value";
+
+function suggestionsEnabled(
+	editable: boolean,
+	view: View,
+	options: UseComposerEditorOptions
+): boolean {
+	return editable && !view.textarea && !!options.triggers?.length;
+}

package/src/components/context-menu/context-menu-items.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { props } from "@stylexjs/stylex";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot as protectSlot } from "../../render-utils";
+import { kbdStyles } from "../kbd/kbd.styles";
+import { menuStyles } from "../menu/menu.styles";
+import type {
+	ContextMenuCheckboxItemProps,
+	ContextMenuGroupLabelProps,
+	ContextMenuGroupProps,
+	ContextMenuItemProps,
+	ContextMenuLinkItemProps,
+	ContextMenuRadioGroupProps,
+	ContextMenuRadioItemProps,
+	ContextMenuSeparatorProps,
+	ContextMenuShortcutProps,
+} from "./context-menu.types";
+import {
+	CheckIcon,
+	itemVariantStyles,
+	renderSwitchIndicator,
+} from "./context-menu-utils";
+
+export function ContextMenuItem({
+	render,
+	children,
+	inset = false,
+	ref: forwardedRef,
+	variant = "default",
+	...rest
+}: ContextMenuItemProps) {
+	return (
+		<BaseContextMenu.Item
+			{...rest}
+			data-inset={inset || undefined}
+			data-slot="context-menu-item"
+			data-variant={variant}
+			ref={forwardedRef}
+			render={protectSlot("context-menu-item", render)}
+			{...props(
+				menuStyles.item,
+				itemVariantStyles[variant],
+				inset && menuStyles.inset
+			)}
+		>
+			{controlLabel(children)}
+		</BaseContextMenu.Item>
+	);
+}
+
+export function ContextMenuLinkItem({
+	children,
+	closeOnClick = true,
+	inset = false,
+	ref: forwardedRef,
+	render,
+	variant = "default",
+	...rest
+}: ContextMenuLinkItemProps) {
+	return (
+		<BaseContextMenu.LinkItem
+			closeOnClick={closeOnClick}
+			{...rest}
+			data-inset={inset || undefined}
+			data-slot="context-menu-link-item"
+			data-variant={variant}
+			ref={forwardedRef}
+			render={protectSlot("context-menu-link-item", render)}
+			{...props(
+				menuStyles.item,
+				itemVariantStyles[variant],
+				inset && menuStyles.inset
+			)}
+		>
+			{controlLabel(children)}
+		</BaseContextMenu.LinkItem>
+	);
+}
+
+export function ContextMenuGroup({
+	render,
+	children,
+	ref: forwardedRef,
+	...rest
+}: ContextMenuGroupProps) {
+	return (
+		<BaseContextMenu.Group
+			{...rest}
+			data-slot="context-menu-group"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-group", render)}
+			{...props(menuStyles.group)}
+		>
+			{children}
+		</BaseContextMenu.Group>
+	);
+}
+
+export function ContextMenuGroupLabel({
+	render,
+	children,
+	inset = false,
+	ref: forwardedRef,
+	...rest
+}: ContextMenuGroupLabelProps) {
+	return (
+		<BaseContextMenu.GroupLabel
+			{...rest}
+			data-inset={inset || undefined}
+			data-slot="context-menu-label"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-label", render)}
+			{...props(menuStyles.groupLabel, inset && menuStyles.inset)}
+		>
+			{children}
+		</BaseContextMenu.GroupLabel>
+	);
+}
+
+export function ContextMenuSeparator({
+	render,
+	ref: forwardedRef,
+	...rest
+}: ContextMenuSeparatorProps) {
+	return (
+		<BaseContextMenu.Separator
+			{...rest}
+			data-slot="context-menu-separator"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-separator", render)}
+			{...props(menuStyles.separator)}
+		/>
+	);
+}
+
+export function ContextMenuShortcut({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ContextMenuShortcutProps) {
+	return (
+		// Key order reads left to right in every language.
+		<kbd
+			dir="ltr"
+			{...rest}
+			data-slot="context-menu-shortcut"
+			ref={forwardedRef}
+			{...mergeProps(props(kbdStyles.group, menuStyles.shortcut), {})}
+		>
+			{controlLabel(children)}
+		</kbd>
+	);
+}
+
+export function ContextMenuCheckboxItem({
+	render,
+	children,
+	ref: forwardedRef,
+	variant = "default",
+	...rest
+}: ContextMenuCheckboxItemProps) {
+	const indicator =
+		variant === "switch" ? (
+			<BaseContextMenu.CheckboxItemIndicator
+				keepMounted
+				render={renderSwitchIndicator}
+			/>
+		) : (
+			<BaseContextMenu.CheckboxItemIndicator
+				keepMounted
+				{...props(menuStyles.indicator)}
+			>
+				<CheckIcon />
+			</BaseContextMenu.CheckboxItemIndicator>
+		);
+	return (
+		<BaseContextMenu.CheckboxItem
+			{...rest}
+			data-slot="context-menu-checkbox-item"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-checkbox-item", render)}
+			{...props(menuStyles.item, menuStyles.itemDefault)}
+		>
+			{variant === "default" && indicator}
+			{controlLabel(children)}
+			{variant === "switch" && indicator}
+		</BaseContextMenu.CheckboxItem>
+	);
+}
+
+export function ContextMenuRadioGroup<Value = unknown>({
+	render,
+	...rest
+}: ContextMenuRadioGroupProps<Value>) {
+	return (
+		<BaseContextMenu.RadioGroup
+			{...rest}
+			data-slot="context-menu-radio-group"
+			render={protectSlot("context-menu-radio-group", render)}
+		/>
+	);
+}
+
+export function ContextMenuRadioItem<Value = unknown>({
+	render,
+	children,
+	ref: forwardedRef,
+	...rest
+}: ContextMenuRadioItemProps<Value>) {
+	return (
+		<BaseContextMenu.RadioItem
+			{...rest}
+			data-slot="context-menu-radio-item"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-radio-item", render)}
+			{...props(menuStyles.item, menuStyles.itemDefault)}
+		>
+			<BaseContextMenu.RadioItemIndicator
+				keepMounted
+				{...props(menuStyles.indicator)}
+			>
+				<span {...props(menuStyles.radioDot)} />
+			</BaseContextMenu.RadioItemIndicator>
+			{controlLabel(children)}
+		</BaseContextMenu.RadioItem>
+	);
+}

package/src/components/context-menu/context-menu-utils.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useDirection } from "@base-ui/react/direction-provider";
+import type { MenuCheckboxItemIndicatorState as ContextMenuCheckboxItemIndicatorState } from "@base-ui/react/menu";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { IconCheck, IconChevronLeft, IconChevronRight } from "../../icons";
+import { menuStyles } from "../menu/menu.styles";
+
+export const itemVariantStyles = {
+	default: menuStyles.itemDefault,
+	destructive: menuStyles.itemDestructive,
+};
+
+export function CheckIcon() {
+	return (
+		<IconCheck
+			aria-hidden="true"
+			focusable="false"
+			{...props(menuStyles.checkIcon)}
+			size="1em"
+		/>
+	);
+}
+
+export function ChevronIcon() {
+	const direction = useDirection();
+	return direction === "rtl" ? (
+		<IconChevronLeft
+			aria-hidden="true"
+			focusable="false"
+			{...props(menuStyles.chevron)}
+			size="1em"
+		/>
+	) : (
+		<IconChevronRight
+			aria-hidden="true"
+			focusable="false"
+			{...props(menuStyles.chevron)}
+			size="1em"
+		/>
+	);
+}
+
+export function renderSwitchIndicator(
+	indicatorProps: ComponentPropsWithRef<"span">,
+	state: ContextMenuCheckboxItemIndicatorState
+) {
+	return (
+		<span
+			{...indicatorProps}
+			{...props(
+				menuStyles.switchIndicator,
+				state.checked && menuStyles.switchIndicatorChecked
+			)}
+		>
+			<span
+				{...props(
+					menuStyles.switchThumb,
+					state.checked && menuStyles.switchThumbChecked
+				)}
+			/>
+		</span>
+	);
+}

package/src/components/context-menu/context-menu.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { props } from "@stylexjs/stylex";
+import type { KeyboardEvent, ReactNode } from "react";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot as protectSlot } from "../../render-utils";
+import { menuStyles } from "../menu/menu.styles";
+import { ScrollArea } from "../scroll-area/scroll-area";
+import type {
+	ContextMenuPopupProps,
+	ContextMenuPortalProps,
+	ContextMenuSubPopupProps,
+	ContextMenuSubTriggerProps,
+	ContextMenuTriggerProps,
+} from "./context-menu.types";
+import {
+	ContextMenuCheckboxItem as ContextMenuCheckboxItemImpl,
+	ContextMenuGroup as ContextMenuGroupImpl,
+	ContextMenuGroupLabel as ContextMenuGroupLabelImpl,
+	ContextMenuItem as ContextMenuItemImpl,
+	ContextMenuLinkItem as ContextMenuLinkItemImpl,
+	ContextMenuRadioGroup as ContextMenuRadioGroupImpl,
+	ContextMenuRadioItem as ContextMenuRadioItemImpl,
+	ContextMenuSeparator as ContextMenuSeparatorImpl,
+	ContextMenuShortcut as ContextMenuShortcutImpl,
+} from "./context-menu-items";
+import { ChevronIcon, itemVariantStyles } from "./context-menu-utils";
+
+export type * from "./context-menu.types";
+
+export const ContextMenuItem = ContextMenuItemImpl;
+export const ContextMenuLinkItem = ContextMenuLinkItemImpl;
+export const ContextMenuGroup = ContextMenuGroupImpl;
+export const ContextMenuGroupLabel = ContextMenuGroupLabelImpl;
+export const ContextMenuSeparator = ContextMenuSeparatorImpl;
+export const ContextMenuShortcut = ContextMenuShortcutImpl;
+export const ContextMenuCheckboxItem = ContextMenuCheckboxItemImpl;
+export const ContextMenuRadioGroup = ContextMenuRadioGroupImpl;
+export const ContextMenuRadioItem = ContextMenuRadioItemImpl;
+
+export const ContextMenu = BaseContextMenu.Root;
+export const ContextMenuPortal: (props: ContextMenuPortalProps) => ReactNode =
+	BaseContextMenu.Portal;
+export const ContextMenuPrimitive = BaseContextMenu;
+
+function ContextMenuPopupSurface({
+	render,
+	align,
+	alignOffset,
+	anchor,
+	children,
+	dataSlot,
+	portalProps,
+	ref: forwardedRef,
+	side,
+	sideOffset,
+	...rest
+}: ContextMenuPopupProps & { dataSlot: string }) {
+	return (
+		<BaseContextMenu.Portal {...portalProps}>
+			<BaseContextMenu.Positioner
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				data-slot="context-menu-positioner"
+				side={side}
+				sideOffset={sideOffset}
+				{...props(menuStyles.positioner)}
+			>
+				<BaseContextMenu.Popup
+					{...rest}
+					data-slot={dataSlot}
+					ref={forwardedRef}
+					render={protectSlot(dataSlot, render)}
+					{...props(menuStyles.popup)}
+				>
+					{/* Scrolls and fades like Menu's popup. */}
+					<ScrollArea overscrollContain scrollFade>
+						<div {...props(menuStyles.content)}>{children}</div>
+					</ScrollArea>
+				</BaseContextMenu.Popup>
+			</BaseContextMenu.Positioner>
+		</BaseContextMenu.Portal>
+	);
+}
+
+function handleContextMenuKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+	if (
+		event.defaultPrevented ||
+		event.altKey ||
+		event.ctrlKey ||
+		event.metaKey ||
+		!(event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey))
+	) {
+		return;
+	}
+	event.preventDefault();
+	const rect = event.currentTarget.getBoundingClientRect();
+	event.currentTarget.dispatchEvent(
+		new MouseEvent("contextmenu", {
+			bubbles: true,
+			button: 2,
+			cancelable: true,
+			clientX: rect.left + rect.width / 2,
+			clientY: rect.top + rect.height / 2,
+			composed: true,
+		})
+	);
+}
+
+export function ContextMenuTrigger({
+	ref: forwardedRef,
+	render,
+	...rest
+}: ContextMenuTriggerProps) {
+	return (
+		<BaseContextMenu.Trigger
+			{...mergeProps({ onKeyDown: handleContextMenuKeyDown }, rest)}
+			data-slot="context-menu-trigger"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-trigger", render)}
+		/>
+	);
+}
+
+export function ContextMenuPopup({
+	align = "center",
+	alignOffset,
+	anchor,
+	side = "bottom",
+	sideOffset = 4,
+	...rest
+}: ContextMenuPopupProps) {
+	return (
+		<ContextMenuPopupSurface
+			align={align}
+			alignOffset={alignOffset}
+			anchor={anchor}
+			dataSlot="context-menu-popup"
+			side={side}
+			sideOffset={sideOffset}
+			{...rest}
+		/>
+	);
+}
+
+export const ContextMenuSub = BaseContextMenu.SubmenuRoot;
+
+export function ContextMenuSubTrigger({
+	render,
+	children,
+	inset = false,
+	ref: forwardedRef,
+	...rest
+}: ContextMenuSubTriggerProps) {
+	return (
+		<BaseContextMenu.SubmenuTrigger
+			{...rest}
+			data-inset={inset || undefined}
+			data-slot="context-menu-sub-trigger"
+			ref={forwardedRef}
+			render={protectSlot("context-menu-sub-trigger", render)}
+			{...props(
+				menuStyles.item,
+				itemVariantStyles.default,
+				menuStyles.subTrigger,
+				inset && menuStyles.inset
+			)}
+		>
+			{controlLabel(children)}
+			<ChevronIcon />
+		</BaseContextMenu.SubmenuTrigger>
+	);
+}
+
+export function ContextMenuSubPopup({
+	align = "start",
+	alignOffset,
+	anchor,
+	side = "inline-end",
+	sideOffset = 0,
+	...rest
+}: ContextMenuSubPopupProps) {
+	const defaultAlignOffset = align === "center" ? undefined : -5;
+	return (
+		<ContextMenuPopupSurface
+			align={align}
+			alignOffset={alignOffset ?? defaultAlignOffset}
+			anchor={anchor}
+			dataSlot="context-menu-sub-content"
+			side={side}
+			sideOffset={sideOffset}
+			{...rest}
+		/>
+	);
+}