Better dropdowns

client/admin/main.jsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import Admin from './admin.jsx';
+import { bootstrapAnchorPositioningPolyfill } from '../components/anchorPositioningPolyfill.js';
 
 const props = window.__INITIAL_PROPS__ || {};
 
 createRoot(document.getElementById('reactRoot')).render(<Admin {...props} />);
+bootstrapAnchorPositioningPolyfill();

client/components/Anchored.jsx

@@ -71,10 +71,14 @@ const Anchored = ({ children })=>{
 // forward ref for AnchoredTrigger
 const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, className, ...props }, ref)=>(
 	<button
-		ref={ref}
+		ref={(el)=>{
+			// setAttribute bypasses React's style sanitization so the anchor polyfill can read it
+			el?.setAttribute('style', `anchor-name: --${props.id}`);
+			if(typeof ref === 'function') ref(el);
+			else if(ref) ref.current = el;
+		}}
 		className={`anchored-trigger${visible ? ' active' : ''} ${className}`}
 		onClick={toggleVisibility}
-		style={{ anchorName: `--${props.id}` }}   // setting anchor properties here allows greater recyclability.
 		{...props}
 	>
 		{children}
@@ -84,9 +88,12 @@ const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, class
 // forward ref for AnchoredBox
 const AnchoredBox = forwardRef(({ visible, children, className, anchorId, ...props }, ref)=>(
 	<div
-		ref={ref}
+		ref={(el)=>{
+			el?.setAttribute('style', `position-anchor: --${anchorId}`);
+			if(typeof ref === 'function') ref(el);
+			else if(ref) ref.current = el;
+		}}
 		className={`anchored-box${visible ? ' active' : ''} ${className}`}
-		style={{ positionAnchor: `--${anchorId}` }}   // setting anchor properties here allows greater recyclability.
 		{...props}
 	>
 		{children}

client/components/anchorPositioningPolyfill.js

@@ -0,0 +1,34 @@
+/*
+This file basically checks support for Anchor Positioning API in the browser,
+and then loads the Oddbird polyfill if support is lacking. 
+*/
+
+let polyfillPromise;
+
+// look for `anchorName` in the computed styles
+const supportsAnchorPositioning = ()=>'anchorName' in document.documentElement.style;
+
+// wait for initial render
+const afterInitialRender = ()=>new Promise((resolve)=>{
+	requestAnimationFrame(()=>{
+		requestAnimationFrame(resolve);
+	});
+});
+
+export const bootstrapAnchorPositioningPolyfill = ()=>{
+	if(supportsAnchorPositioning()) return Promise.resolve(false);
+	if(polyfillPromise) return polyfillPromise;
+
+	polyfillPromise = afterInitialRender()
+		.then(async ()=>{
+			const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn');
+			await polyfill();
+			return true;
+		})
+		.catch((error)=>{
+			polyfillPromise = undefined;
+			throw error;
+		});
+
+	return polyfillPromise;
+};

client/components/dropdown/dropdown.behavior.test.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Dropdown } from './dropdown.jsx';
+import { createOpenMenu, renderDropdown, setupDropdownTestLifecycle } from './dropdown.testUtils.js';
+
+setupDropdownTestLifecycle();
+
+describe('Dropdown behavior', ()=>{
+	it('calls child click handlers when menu items are clicked', async ()=>{
+		const onClick = jest.fn();
+		const { host, cleanup } = await renderDropdown(
+			<Dropdown groupName='Events'>
+				<button className='menu-item' role='menuitem' onClick={onClick}>Click Me</button>
+			</Dropdown>
+		);
+
+		host.querySelector('.menu-list .menu-item').click();
+		expect(onClick).toHaveBeenCalledTimes(1);
+
+		await cleanup();
+	});
+
+	it('dismisses open menus when clicking a normal menu action', async ()=>{
+		const openMenu1 = createOpenMenu();
+		const openMenu2 = createOpenMenu();
+		const querySpy = jest.spyOn(document, 'querySelectorAll').mockImplementation((selector)=>{
+			if(selector === '.menu-list:popover-open') return [openMenu1, openMenu2];
+			return [];
+		});
+
+		const { host, cleanup } = await renderDropdown(
+			<Dropdown groupName='Dismiss'>
+				<button className='menu-item' role='menuitem'>Close</button>
+			</Dropdown>
+		);
+
+		host.querySelector('.menu-list .menu-item').click();
+
+		expect(querySpy).toHaveBeenCalledWith('.menu-list:popover-open');
+		expect(openMenu1.hidePopover).toHaveBeenCalledTimes(1);
+		expect(openMenu2.hidePopover).toHaveBeenCalledTimes(1);
+
+		await cleanup();
+	});
+
+	it('does not dismiss when no-dismiss is set to empty string or true', async ()=>{
+		for (const noDismissValue of ['', 'true']) {
+			const openMenu = createOpenMenu();
+			const querySpy = jest.spyOn(document, 'querySelectorAll').mockImplementation((selector)=>{
+				if(selector === '.menu-list:popover-open') return [openMenu];
+				return [];
+			});
+
+			const { host, cleanup } = await renderDropdown(
+				<Dropdown groupName={`No Dismiss ${noDismissValue || 'empty'}`}>
+					<button className='menu-item' role='menuitem' no-dismiss={noDismissValue}>Stay Open</button>
+				</Dropdown>
+			);
+
+			host.querySelector('.menu-list .menu-item').click();
+			expect(querySpy).not.toHaveBeenCalled();
+			expect(openMenu.hidePopover).not.toHaveBeenCalled();
+
+			await cleanup();
+			querySpy.mockRestore();
+		}
+	});
+
+	it('does dismiss when no-dismiss is explicitly false', async ()=>{
+		const openMenu = createOpenMenu();
+		const querySpy = jest.spyOn(document, 'querySelectorAll').mockImplementation((selector)=>{
+			if(selector === '.menu-list:popover-open') return [openMenu];
+			return [];
+		});
+
+		const { host, cleanup } = await renderDropdown(
+			<Dropdown groupName='No Dismiss False'>
+				<button className='menu-item' role='menuitem' no-dismiss='false'>Close</button>
+			</Dropdown>
+		);
+
+		host.querySelector('.menu-list .menu-item').click();
+
+		expect(querySpy).toHaveBeenCalledWith('.menu-list:popover-open');
+		expect(openMenu.hidePopover).toHaveBeenCalledTimes(1);
+
+		await cleanup();
+	});
+
+	it('does not dismiss when clicking submenu trigger actions', async ()=>{
+		const querySpy = jest.spyOn(document, 'querySelectorAll');
+		const { host, cleanup } = await renderDropdown(
+			<Dropdown groupName='Top'>
+				<Dropdown groupName='Child'>
+					<button className='menu-item' role='menuitem'>Leaf</button>
+				</Dropdown>
+			</Dropdown>
+		);
+
+		const submenuTrigger = host.querySelectorAll('.menu-wrapper > .menu-item')[1];
+		submenuTrigger.click();
+
+		expect(submenuTrigger.hasAttribute('popovertarget')).toBe(true);
+		expect(querySpy).not.toHaveBeenCalledWith('.menu-list:popover-open');
+
+		await cleanup();
+	});
+
+	it('handles iframe-click by hiding the open popover for this menu', async ()=>{
+		const { host, cleanup } = await renderDropdown(
+			<Dropdown groupName='Iframe Dismiss'>
+				<button className='menu-item' role='menuitem'>Item</button>
+			</Dropdown>
+		);
+
+		const menu = host.querySelector('.menu-list');
+		menu.matches = jest.fn((selector)=>selector === ':popover-open');
+		menu.hidePopover = jest.fn();
+
+		document.dispatchEvent(new Event('iframe-click'));
+
+		expect(menu.matches).toHaveBeenCalledWith(':popover-open');
+		expect(menu.hidePopover).toHaveBeenCalledTimes(1);
+
+		await cleanup();
+	});
+});

client/components/dropdown/dropdown.jsx

@@ -0,0 +1,124 @@
+/**
+ * A dropdown menu component that uses the Anchor Positioning API to position the elements.  It supports nested submenus as well.
+ * Anchor Positioning is now supported in all major browsers.  If support is needed for older browsers (namely, older firefox)
+ * it is possible to use absolute positioning and calculations/resize observers to position things well enough, but adds another layer of complexity to the code.
+ * 
+ * As-is, the menus will always open down aligned on left to trigger, submenus open to the right initially.
+ * If no space, menus will still open down, but aligned to the right of the trigger.  Submenus will flip to the other side of the top menu.
+ * This could be customized either in more specific CSS, or as a `direction` prop on the component (in future iterations).
+ * 
+ * @param {string} props.groupName - Name of the menu. Appears as the trigger text.
+ * @param {string} [props.icon] - Icon to display in the trigger.
+ * @param {string} [props.color] - Color class to add to the trigger.
+ * @param {string} [props.className] - Additional classes for the menu wrapper.
+ * @param {React.ReactNode} [props.customTrigger] - Custom element to use as a trigger.
+ * @param {React.ReactNode} [props.children] - Child elements to render in the menu.
+ * @returns {React.JSX.Element}
+ */
+
+import './dropdown.less';
+import React, { useEffect, useId, useRef } from 'react';
+import _ from 'lodash';
+
+// use react context to keep track of the menu depth (menus in menus)
+const MenuDepthContext = React.createContext(0);
+
+const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
+	const reactId = useId();
+	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
+	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
+	const anchorName = `--${menuId}`;
+	const depth = React.useContext(MenuDepthContext);
+
+	// A menu is a submenu if depth > 0
+	const isSubMenu = depth > 0;
+
+	const triggerRef = useRef(null);
+	const menuRef = useRef(null);
+
+	// use setAttribute instead of the React style prop because React strips unknown CSS
+	// properties (like anchor-name) from inline styles in browsers that don't support them.
+	// setAttribute writes raw CSS text that the anchor positioning polyfill can read
+	useEffect(()=>{
+		triggerRef.current?.setAttribute('style', `anchor-name: ${anchorName}`);
+		menuRef.current?.setAttribute('style', `position-anchor: ${anchorName}`);
+	}, [anchorName]);
+
+	// hide popover with click inside iframe (not supported by light dismiss)
+	useEffect(()=>{
+		const menuElement = document.getElementById(menuId);
+		if(!menuElement) return;
+
+		const handleClick = ()=>{
+			if(menuElement.matches(':popover-open')) {
+				menuElement.hidePopover();
+			}
+		};
+		// Listen for clicks from both the main document and the iframe
+		document.addEventListener('iframe-click', handleClick);
+		return ()=>{
+			document.removeEventListener('iframe-click', handleClick);
+		};
+	}, [menuId]);
+
+	// the trigger is the piece placed inside the opening button of the menu.
+	// This method allows for creating a generic span with the group name,
+	// or using a bespoke element (like a graphic) passed in from props to be used as the trigger
+	const trigger = (groupName = 'menu', icon = '')=>{
+		if(!customTrigger){
+			return <>
+				<i className={icon}></i><span className='menu-name'>{groupName}</span><i className={`caret fas fa-caret-${isSubMenu ? 'right' : 'down'}`}></i>
+			</>;
+		} else {
+			return customTrigger;
+		}
+	};
+
+	// handle clicks on menu items. By default, actions do dismiss.
+	const handleMenuActionClick = (event)=>{
+		const menuElement = menuRef.current;
+		if(!menuElement) return;
+
+		const menuAction = event.target.closest('button, a, [role="menuitem"]');
+		if(!menuAction || !menuElement.contains(menuAction)) return;
+
+		// don't dismiss if the target triggers a submenu
+		if(menuAction.hasAttribute('popovertarget')) return;
+
+		// don't dismiss if the target has `no-dismiss` attribute
+		const noDismissValue = menuAction.getAttribute('no-dismiss')?.toLowerCase();
+		if(noDismissValue === '' || noDismissValue === 'true') return;
+
+		document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
+	};
+
+	return (
+		<div className={['menu-wrapper', className].join(' ')} role='none' >
+			<button
+				id={`${menuId}-trigger`}
+				className={['menu-item', color].join(' ')}
+				popoverTarget={menuId}
+				aria-haspopup='menu'
+				role='menuitem'
+				disabled={!React.Children.count(children)}
+				ref={triggerRef}
+			>
+				{trigger(groupName, icon)}
+			</button>
+			<MenuDepthContext.Provider value={depth + 1}>
+				<div
+					ref={menuRef}
+					id={menuId}
+					className='menu-list'
+					popover='auto'
+					role='menu'
+					onClick={handleMenuActionClick}
+				>
+					{children}
+				</div>
+			</MenuDepthContext.Provider>
+		</div>
+	);
+};
+
+export { Dropdown };

client/components/dropdown/dropdown.less

@@ -0,0 +1,25 @@
+.menu-wrapper {
+	position: relative;
+	place-content: center;
+	&:is(.menu-bar > .menu-section > .menu-wrapper){
+		display: inline-block;
+	}
+}
+
+.menu-list {
+	position         : fixed;
+	z-index          : 1000;
+	inset-block-start: anchor(bottom);
+	inset-inline-start: anchor(left);
+	position-try: flip-inline;
+	color: unset;   // [popover] gets a `canvastext` color value from useragent.
+	> .menu-wrapper {
+		position:relative;
+		> .menu-list {
+			margin: 0 0px;
+			inset-block-start: anchor(top);
+			inset-inline-start: anchor(right);
+			position-try: flip-inline;
+		}
+	}
+}