@bug-on/md3-react 3.0.1 → 3.0.3

package/src/ui/toolbar/floating-toolbar-with-fab.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it } from "vitest";
+import {
+	HorizontalFloatingToolbarWithFab,
+	VerticalFloatingToolbarWithFab,
+} from "./floating-toolbar-with-fab";
+
+describe("FloatingToolbarWithFab", () => {
+	it("renders toolbar with FAB at end position (default)", () => {
+		render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				floatingActionButton={
+					<button type="button" data-testid="fab">
+						FAB
+					</button>
+				}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		const fab = screen.getByTestId("fab");
+		expect(fab).toBeInTheDocument();
+	});
+
+	it("renders toolbar with FAB at start position", () => {
+		render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				fabPosition="start"
+				floatingActionButton={
+					<button type="button" data-testid="fab">
+						FAB
+					</button>
+				}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		expect(screen.getByTestId("fab")).toBeInTheDocument();
+	});
+
+	it("toolbar and FAB maintain 8px gap via gap property", () => {
+		const { container } = render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		// Gap is now applied as a style on the parent m.div
+		const innerFlex = container.firstChild?.firstChild as HTMLElement;
+		expect(innerFlex).toHaveStyle({ gap: "8px" });
+	});
+
+	it("standard and vibrant color variants (via colors prop)", () => {
+		const vibrantColors = {
+			toolbarContainerColor: "var(--md-sys-color-primary-container)",
+			toolbarContentColor: "var(--md-sys-color-on-primary-container)",
+		};
+		const { container } = render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				colors={vibrantColors}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		// It passes colors to the child Toolbar
+		expect(container.firstChild).toBeInTheDocument();
+	});
+
+	it("expanded/collapsed states resize the FAB container", () => {
+		// expanded=true size=80, expanded=false size=56
+		const { rerender, container } = render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={false}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+
+		// We cannot reliably assert motion inline styles instantly in standard jsdom without timers,
+		// but we know it doesn't throw.
+		expect(container.firstChild).toBeInTheDocument();
+
+		rerender(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		expect(container.firstChild).toBeInTheDocument();
+	});
+
+	it("forwards ref", () => {
+		const ref = React.createRef<HTMLDivElement>();
+		render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				ref={ref}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		expect(ref.current).toBeInstanceOf(HTMLDivElement);
+	});
+
+	it("snapshots: horizontal with fab end", () => {
+		const { container } = render(
+			<HorizontalFloatingToolbarWithFab
+				expanded={true}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbarWithFab>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it("snapshots: vertical with fab bottom", () => {
+		const { container } = render(
+			<VerticalFloatingToolbarWithFab
+				expanded={true}
+				floatingActionButton={<button type="button">FAB</button>}
+			>
+				<button type="button">Center</button>
+			</VerticalFloatingToolbarWithFab>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});

package/src/ui/toolbar/floating-toolbar-with-fab.tsx

@@ -0,0 +1,199 @@
+import { AnimatePresence, m } from "motion/react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { SPRING_TRANSITION } from "../shared/constants";
+import {
+	type FloatingToolbarProps,
+	HorizontalFloatingToolbar,
+	VerticalFloatingToolbar,
+} from "./floating-toolbar";
+import { standardFloatingToolbarColors } from "./toolbar-colors";
+import {
+	FabBaselineTokens,
+	FloatingToolbarTokens,
+	ToolbarToFabGap,
+} from "./toolbar-tokens";
+
+export interface FloatingToolbarWithFabProps extends FloatingToolbarProps {
+	/** FAB element (use FAB component or custom node) */
+	floatingActionButton: React.ReactNode;
+	/** FAB position for horizontal: 'start' | 'end'. For vertical: 'top' | 'bottom' */
+	fabPosition?: "start" | "end" | "top" | "bottom";
+	/** Animation duration override */
+	animationDuration?: number;
+	/** Start content (explicitly declared to resolve type issues) */
+	startContent?: React.ReactNode;
+	/** End content (explicitly declared to resolve type issues) */
+	endContent?: React.ReactNode;
+	/**
+	 * Size of the FAB container.
+	 * - `"default"` → 56×56px (`FabBaselineTokens.ContainerHeight`)
+	 * - `"medium"` → 80×80px (`FabBaselineTokens.MediumContainerHeight`)
+	 *
+	 * MD3: pair a medium FAB with the toolbar to give it greater visual prominence.
+	 * @default "default"
+	 */
+	fabSize?: "default" | "medium";
+}
+
+const FloatingToolbarWithFabBase = React.forwardRef<
+	HTMLDivElement,
+	FloatingToolbarWithFabProps
+>(
+	(
+		{
+			expanded,
+			orientation = "horizontal",
+			colors = standardFloatingToolbarColors,
+			floatingActionButton,
+			fabPosition = orientation === "horizontal" ? "end" : "bottom",
+			animationDuration = 0.3,
+			scrollBehavior,
+			fabSize = "default",
+			className,
+			style,
+			...props
+		},
+		ref,
+	) => {
+		const isHorizontal = orientation === "horizontal";
+
+		const effectiveExpanded =
+			expanded && (!scrollBehavior || scrollBehavior.isExpanded);
+
+		const isFabBefore = fabPosition === "start" || fabPosition === "top";
+
+		const resolvedFabSize =
+			fabSize === "medium"
+				? FabBaselineTokens.MediumContainerHeight
+				: FabBaselineTokens.ContainerHeight;
+
+		const transitionSpec = {
+			...SPRING_TRANSITION,
+			duration: animationDuration,
+		};
+
+		const SHADOW_PADDING = 24;
+
+		const fabContainerNode = (
+			<m.div
+				layout
+				key="fab-container"
+				style={{
+					width: `${resolvedFabSize}px`,
+					height: `${resolvedFabSize}px`,
+				}}
+				className={cn(
+					"flex shrink-0 items-center justify-center relative z-10",
+					"*:w-full *:h-full",
+				)}
+			>
+				{floatingActionButton}
+			</m.div>
+		);
+
+		return (
+			<div ref={ref} style={style}>
+				<m.div
+					layout
+					initial={false}
+					animate={{
+						gap: effectiveExpanded ? `${ToolbarToFabGap}px` : "0px",
+					}}
+					transition={transitionSpec}
+					className={cn(
+						"flex items-center justify-center pointer-events-auto",
+						isHorizontal
+							? "flex-row h-(--toolbar-size)"
+							: "flex-col w-(--toolbar-size) h-fit",
+						className,
+					)}
+					style={
+						{
+							"--fab-size": `${resolvedFabSize}px`,
+							"--toolbar-size": `${FloatingToolbarTokens.ContainerHeight}px`,
+						} as React.CSSProperties
+					}
+				>
+					{isFabBefore && fabContainerNode}
+
+					<AnimatePresence initial={false}>
+						{effectiveExpanded && (
+							<m.div
+								key="toolbar-content-wrapper"
+								initial={{
+									opacity: 0,
+									scale: 0.9,
+									width: isHorizontal ? 0 : "auto",
+									height: !isHorizontal ? 0 : "auto",
+								}}
+								animate={{
+									opacity: 1,
+									scale: 1,
+									width: "auto",
+									height: "auto",
+								}}
+								exit={{
+									opacity: 0,
+									scale: 0.9,
+									width: isHorizontal ? 0 : "auto",
+									height: !isHorizontal ? 0 : "auto",
+								}}
+								transition={transitionSpec}
+								style={{
+									padding: SHADOW_PADDING,
+									margin: -SHADOW_PADDING,
+								}}
+								className="flex items-center shrink-0 min-w-0 min-h-0 overflow-hidden relative z-0"
+							>
+								{isHorizontal ? (
+									<HorizontalFloatingToolbar
+										expanded={expanded}
+										colors={colors}
+										disableScrollTranslation
+										disableLayoutAnimation
+										{...props}
+									/>
+								) : (
+									<VerticalFloatingToolbar
+										expanded={expanded}
+										colors={colors}
+										disableScrollTranslation
+										disableLayoutAnimation
+										{...props}
+									/>
+								)}
+							</m.div>
+						)}
+					</AnimatePresence>
+
+					{!isFabBefore && fabContainerNode}
+				</m.div>
+			</div>
+		);
+	},
+);
+FloatingToolbarWithFabBase.displayName = "FloatingToolbarWithFabBase";
+
+/**
+ * A horizontal floating toolbar paired with a FAB.
+ */
+export const HorizontalFloatingToolbarWithFab = React.forwardRef<
+	HTMLDivElement,
+	FloatingToolbarWithFabProps
+>((props, ref) => (
+	<FloatingToolbarWithFabBase ref={ref} orientation="horizontal" {...props} />
+));
+HorizontalFloatingToolbarWithFab.displayName =
+	"HorizontalFloatingToolbarWithFab";
+
+/**
+ * A vertical floating toolbar paired with a FAB.
+ */
+export const VerticalFloatingToolbarWithFab = React.forwardRef<
+	HTMLDivElement,
+	FloatingToolbarWithFabProps
+>((props, ref) => (
+	<FloatingToolbarWithFabBase ref={ref} orientation="vertical" {...props} />
+));
+VerticalFloatingToolbarWithFab.displayName = "VerticalFloatingToolbarWithFab";

package/src/ui/toolbar/floating-toolbar.test.tsx

@@ -0,0 +1,230 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import {
+	HorizontalFloatingToolbar,
+	VerticalFloatingToolbar,
+} from "./floating-toolbar";
+import { useFloatingToolbarScrollBehavior } from "./toolbar-scroll-behavior";
+
+// Mock matchMedia for jsdom
+Object.defineProperty(window, "matchMedia", {
+	writable: true,
+	value: vi.fn().mockImplementation((query) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: vi.fn(), // Deprecated
+		removeListener: vi.fn(), // Deprecated
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+		dispatchEvent: vi.fn(),
+	})),
+});
+
+describe("HorizontalFloatingToolbar", () => {
+	it('renders horizontal variant with correct role="toolbar"', () => {
+		render(
+			<HorizontalFloatingToolbar expanded={true}>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(screen.getByRole("toolbar")).toBeInTheDocument();
+	});
+
+	it("shows startContent when expanded=true", () => {
+		render(
+			<HorizontalFloatingToolbar
+				expanded={true}
+				startContent={<span data-testid="leading" />}
+			>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(screen.getByTestId("leading")).toBeInTheDocument();
+	});
+
+	it("hides startContent when expanded=false", () => {
+		render(
+			<HorizontalFloatingToolbar
+				expanded={false}
+				startContent={<span data-testid="leading" />}
+			>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		// Framer motion with AnimatePresence might still have it briefly during exit, but initial=false means it shouldn't render at all
+		expect(screen.queryByTestId("leading")).not.toBeInTheDocument();
+	});
+
+	it("shows endContent when expanded=true", () => {
+		render(
+			<HorizontalFloatingToolbar
+				expanded={true}
+				endContent={<span data-testid="trailing" />}
+			>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(screen.getByTestId("trailing")).toBeInTheDocument();
+	});
+
+	it("applies standard colors by default", () => {
+		render(
+			<HorizontalFloatingToolbar expanded={true}>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		// standard colors map to surface-container
+		expect(screen.getByRole("toolbar")).toHaveStyle({
+			backgroundColor: "var(--toolbar-bg)",
+		});
+	});
+
+	it("applies vibrant colors when custom colors are passed", () => {
+		const vibrantColors = {
+			toolbarContainerColor: "var(--md-sys-color-primary-container)",
+			toolbarContentColor: "var(--md-sys-color-on-primary-container)",
+		};
+		render(
+			<HorizontalFloatingToolbar expanded={true} colors={vibrantColors}>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		const style = screen.getByRole("toolbar").style;
+		expect(style.getPropertyValue("--toolbar-bg")).toBe(
+			"var(--md-sys-color-primary-container)",
+		);
+	});
+
+	it("applies custom className", () => {
+		render(
+			<HorizontalFloatingToolbar expanded={true} className="custom-class">
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(screen.getByRole("toolbar")).toHaveClass("custom-class");
+	});
+
+	it("forwards ref to container element", () => {
+		const ref = React.createRef<HTMLDivElement>();
+		render(
+			<HorizontalFloatingToolbar expanded={true} ref={ref}>
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(ref.current).toBeInstanceOf(HTMLDivElement);
+	});
+
+	it("aria-label is applied to toolbar container", () => {
+		render(
+			<HorizontalFloatingToolbar expanded={true} aria-label="Test Label">
+				<button type="button">Test</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(screen.getByRole("toolbar")).toHaveAttribute(
+			"aria-label",
+			"Test Label",
+		);
+	});
+
+	it("snapshots: horizontal expanded", () => {
+		const { container } = render(
+			<HorizontalFloatingToolbar
+				expanded={true}
+				startContent={<span>Lead</span>}
+				endContent={<span>Trail</span>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it("snapshots: horizontal collapsed", () => {
+		const { container } = render(
+			<HorizontalFloatingToolbar
+				expanded={false}
+				startContent={<span>Lead</span>}
+				endContent={<span>Trail</span>}
+			>
+				<button type="button">Center</button>
+			</HorizontalFloatingToolbar>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});
+
+describe("VerticalFloatingToolbar", () => {
+	it("renders vertical variant", () => {
+		render(
+			<VerticalFloatingToolbar expanded={true}>
+				<button type="button">Test</button>
+			</VerticalFloatingToolbar>,
+		);
+		expect(screen.getByRole("toolbar")).toHaveAttribute(
+			"aria-orientation",
+			"vertical",
+		);
+	});
+
+	it("snapshots: vertical expanded", () => {
+		const { container } = render(
+			<VerticalFloatingToolbar
+				expanded={true}
+				startContent={<span>Lead</span>}
+				endContent={<span>Trail</span>}
+			>
+				<button type="button">Center</button>
+			</VerticalFloatingToolbar>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it("snapshots: vertical collapsed", () => {
+		const { container } = render(
+			<VerticalFloatingToolbar
+				expanded={false}
+				startContent={<span>Lead</span>}
+				endContent={<span>Trail</span>}
+			>
+				<button type="button">Center</button>
+			</VerticalFloatingToolbar>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});
+
+describe("useFloatingToolbarScrollBehavior", () => {
+	it("calls onScroll handler when scrollBehavior is provided", () => {
+		const TestComponent = () => {
+			const scrollBehavior = useFloatingToolbarScrollBehavior({
+				collapseThreshold: 0,
+				expandThreshold: 0,
+			});
+			return (
+				<div
+					data-testid="scrollable"
+					onScroll={scrollBehavior.onScroll}
+					style={{ height: 100, overflow: "auto" }}
+				>
+					<div style={{ height: 500 }}>
+						<HorizontalFloatingToolbar
+							expanded={scrollBehavior.isExpanded}
+							scrollBehavior={scrollBehavior}
+						>
+							<button type="button">Test</button>
+						</HorizontalFloatingToolbar>
+					</div>
+				</div>
+			);
+		};
+
+		render(<TestComponent />);
+		const scrollable = screen.getByTestId("scrollable");
+
+		fireEvent.scroll(scrollable, { target: { scrollTop: 50 } });
+		// Without full DOM we can't easily test the exact behavior of the hook state visually
+		// but we check it doesn't crash
+	});
+});