fix: menu positioning (#154)

- flip menu above control when at bottom of parent
- shift menu sideways to avoid appearing outside the viewport

package.json

@@ -1,5 +1,6 @@
 {
 	"dependencies": {
+		"@floating-ui/react-dom": "0.4.3",
 		"react-icons": "4.3.1"
 	},
 	"devDependencies": {

src/docs/pages/examples/button-menu/state.tsx

@@ -35,8 +35,11 @@ export function InputMenuState({
 						setState((state) => ({ ...state, appearance }))
 					}
 					options={[
+						{ label: "Elevated", value: "elevated" },
 						{ label: "Filled", value: "filled" },
+						{ label: "Tonal", value: "tonal" },
 						{ label: "Outlined", value: "outlined" },
+						{ label: "Text", value: "text" },
 					]}
 				/>
 				<Checkbox

src/docs/pages/overview/dojo.module.css

@@ -28,6 +28,7 @@
 
 .card > section > h1,
 .card > section > h2 {
+	margin: 0;
 	transition-duration: var(--nk-transition-duration) font-size linear;
 }
 

src/lib/components/menu/button.tsx

@@ -1,39 +1,32 @@
 import { Button } from "ninjakit";
-import { ForwardedRef, forwardRef } from "react";
 import { MdArrowDropDown, MdArrowDropUp } from "react-icons/md";
 
 import type { ButtonProps } from "../button";
 import { Options, useMenu } from ".";
 import { Menu } from "./menu";
 import styles from "./menu.module.css";
 
-declare module "react" {
-	function forwardRef<T, P>(
-		render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-	): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
-export const ButtonMenu = forwardRef(function ButtonMenu<T extends string>(
-	{
-		className: override,
-		id,
-		onChange,
-		options,
-		...props
-	}: Omit<JSX.IntrinsicElements["button"], "id" | "onChange" | "value"> &
-		ButtonProps & {
-			id: string;
-			onChange: (value: T) => void;
-			options: Options<T>;
-		},
-	ref: ForwardedRef<HTMLButtonElement>
-) {
+export function ButtonMenu<T extends string>({
+	className: override,
+	id,
+	onChange,
+	options,
+	...props
+}: Omit<JSX.IntrinsicElements["button"], "id" | "onChange" | "value"> &
+	ButtonProps & {
+		id: string;
+		onChange: (value: T) => void;
+		options: Options<T>;
+	}) {
 	const {
 		className,
 		expanded,
 		handleClickControl,
 		handleKeyDownControl,
 		menuId,
+		refControl,
+		refMenu,
+		style,
 		setExpanded,
 	} = useMenu({ id, override });
 
@@ -48,17 +41,19 @@ export const ButtonMenu = forwardRef(function ButtonMenu<T extends string>(
 				id={id}
 				onClick={handleClickControl}
 				onKeyDown={handleKeyDownControl}
-				ref={ref}
+				ref={refControl}
 				trailingIcon={expanded ? <MdArrowDropUp /> : <MdArrowDropDown />}
 			/>
 			{expanded && (
-				<Menu
+				<Menu<T>
 					menuId={menuId}
 					onChange={onChange}
 					options={options}
+					ref={refMenu}
 					setExpanded={setExpanded}
+					style={style}
 				/>
 			)}
 		</fieldset>
 	);
-});
+}

src/lib/components/menu/index.ts

@@ -1,4 +1,10 @@
-import { KeyboardEventHandler, ReactNode, useState } from "react";
+import {
+	flip,
+	getScrollParents,
+	shift,
+	useFloating,
+} from "@floating-ui/react-dom";
+import { KeyboardEventHandler, ReactNode, useEffect, useState } from "react";
 
 import { firstHTMLElementChild } from "../../util";
 import styles from "./menu.module.css";
@@ -34,6 +40,31 @@ export function useMenu({
 		override,
 	].join(" ");
 	const [expanded, setExpanded] = useState(false);
+	const { x, y, reference, floating, refs, strategy, update } = useFloating({
+		middleware: [flip(), shift()],
+	});
+	useEffect(() => {
+		if (!refs.reference.current || !refs.floating.current) {
+			return;
+		}
+
+		const parents = [
+			...getScrollParents(refs.reference.current),
+			...getScrollParents(refs.floating.current),
+		];
+
+		parents.forEach((parent) => {
+			parent.addEventListener("scroll", update);
+			parent.addEventListener("resize", update);
+		});
+
+		return () => {
+			parents.forEach((parent) => {
+				parent.removeEventListener("scroll", update);
+				parent.removeEventListener("resize", update);
+			});
+		};
+	}, [refs.reference, refs.floating, update]);
 	const handleClickControl = () => setExpanded(!expanded);
 	const handleKeyDownControl: KeyboardEventHandler = (event) => {
 		const element = input
@@ -72,7 +103,14 @@ export function useMenu({
 		expanded,
 		handleClickControl,
 		handleKeyDownControl,
+		style: {
+			left: x ?? "",
+			position: strategy,
+			top: y ?? "",
+		},
 		menuId,
+		refControl: reference,
+		refMenu: floating,
 		setExpanded,
 	};
 }

src/lib/components/menu/input.tsx

@@ -1,41 +1,34 @@
 import { TextInput } from "ninjakit";
-import { ForwardedRef, forwardRef } from "react";
 import { MdArrowDropDown, MdArrowDropUp } from "react-icons/md";
 
 import type { InputProps } from "../input";
 import { Options, useMenu } from ".";
 import { Menu } from "./menu";
 import styles from "./menu.module.css";
 
-declare module "react" {
-	function forwardRef<T, P>(
-		render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-	): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
-export const InputMenu = forwardRef(function InputMenu<T extends string>(
-	{
-		className: override,
-		flex,
-		id,
-		onChange,
-		options,
-		readOnly = true,
-		...props
-	}: Omit<JSX.IntrinsicElements["input"], "onChange"> &
-		InputProps & {
-			onChange: (value: T) => void;
-			options: Options<T>;
-		},
-	ref: ForwardedRef<HTMLInputElement>
-) {
+export function InputMenu<T extends string>({
+	className: override,
+	flex,
+	id,
+	onChange,
+	options,
+	readOnly = true,
+	...props
+}: Omit<JSX.IntrinsicElements["input"], "onChange"> &
+	InputProps & {
+		onChange: (value: T) => void;
+		options: Options<T>;
+	}) {
 	const {
 		className,
 		expanded,
 		handleClickControl,
 		handleKeyDownControl,
 		menuId,
+		refControl,
+		refMenu,
 		setExpanded,
+		style,
 	} = useMenu({ flex, id, input: true, override });
 
 	return (
@@ -52,18 +45,20 @@ export const InputMenu = forwardRef(function InputMenu<T extends string>(
 				onClickTrailingIcon={handleClickControl}
 				onKeyDown={handleKeyDownControl}
 				readOnly={readOnly}
-				ref={ref}
+				ref={refControl}
 				trailingIcon={expanded ? <MdArrowDropUp /> : <MdArrowDropDown />}
 			/>
 			{expanded && (
-				<Menu
+				<Menu<T>
 					input
 					menuId={menuId}
 					onChange={onChange}
 					options={options}
+					ref={refMenu}
 					setExpanded={setExpanded}
+					style={style}
 				/>
 			)}
 		</fieldset>
 	);
-});
+}