@torpor/ui 0.3.7 → 1.0.0

package/dist/Modal/ModalContent.torp

@@ -1,24 +1,22 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import { ModalContextName, type ModalContext } from "./ModalTypes";
+import getId from "../utils/getId";
+import { createPopoutContent } from "../utils/popoutContent";
+import { type ModalContext, ModalContextName } from "./ModalTypes";
 
 interface ModalContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
- * The content that is displayed for a Modal when it is open, displayed
- * alongside an element.
+ * The content that is displayed for a Modal when it is open.
  */
 export default function ModalContent($props: ModalContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-	let closeOnClick = false;
+	let defaultId = getId();
 
 	// Get stuff out of the ModalContext
 	const context = $context[ModalContextName] as ModalContext;
@@ -27,52 +25,31 @@ export default function ModalContent($props: ModalContentProps | undefined) {
 	}
 	let $state = context.state;
 
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Modal could be shown with a click, we need to wait for another mousedown
-		// before we close on click. Otherwise the click immediately bubbles to the document
-		closeOnClick = false;
-		addDocumentEvent("mousedown", handleDocumentMouseDown);
-		addDocumentEvent("click", handleDocumentClick);
-	}
-
-	function hide() {
-		if (!shown) return;
+	// Set the content ID so that the trigger can use it with aria-controls
+	$state.contentId = $props?.id ?? defaultId;
 
-		removeDocumentEvent("mousedown", handleDocumentMouseDown);
-		removeDocumentEvent("click", handleDocumentClick);
-	}
+	const popout = createPopoutContent({
+		getAnchor: () => undefined,
+		getContent: () => div,
+		close: (e) => context.handleClickOutside?.(e),
+	});
 
-	function handleDocumentMouseDown() {
-		closeOnClick = true;
-	}
+	let div: HTMLDivElement;
 
-	function handleDocumentClick(e: MouseEvent) {
-		if (
-			closeOnClick &&
-			div &&
-			!div.contains(e.target as HTMLElement)
-		) {
-			e.preventDefault();
-			context.handleClickOutside!(e);
+	$run(() => {
+		if (!$state.visible) {
+			popout.hide();
 		}
-	}
+	});
 
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props?.id}
+				id={$props?.id ?? defaultId}
 				class={["torp-modal-content", $props?.class]}
 				{$props?.style}
 				&ref={div}
-				onmount={show}
+				onmount={(_el) => popout.show()}
 			>
 				<slot />
 			</div>

package/dist/Modal/ModalOverlay.torp

@@ -1,14 +1,14 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import { disableScroll } from "../mount/disableScroll";
-import { ModalContextName, type ModalContext } from "./ModalTypes";
+import { type ModalContext, ModalContextName } from "./ModalTypes";
 
 interface ModalOverlayProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -33,7 +33,7 @@ export default function ModalOverlay($props: ModalOverlayProps | undefined) {
 				class={["torp-modal-overlay", $props?.class]}
 				{$props?.style}
 				tabindex="-1"
-				onmount={(el) => disableScroll(el)}
+				onmount={(_el) => disableScroll()}
 			>
 				<slot />
 			</div>

package/dist/Modal/ModalTrigger.torp

@@ -1,54 +1,38 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { ModalContextName, type ModalContext } from "./ModalTypes";
-import hoverTrigger from "../mount/hoverTrigger";
+import PopoutClickTrigger from "../utils/PopoutClickTrigger.torp";
+import { type ModalContext, ModalContextName } from "./ModalTypes";
 
 interface ModalTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the modal is activated by click/press or by hover **/
-	activation?: "press" | "hover"
+	style?: StyleValue;
 }
 
 /**
- * The button that causes a Modal to appear or disappear.
+ * The button that opens a Modal when pressed.
+ *
+ * Modals require a deliberate act to open, so there is no hover activation.
  */
-export default function ModalTrigger($props: ModalTriggerProps | undefined) {
-	let activation = $props?.activation ?? "press";
-
+export default function ModalTrigger($props?: ModalTriggerProps) {
 	// Get stuff out of the ModalContext
 	const context = $context[ModalContextName] as ModalContext;
 	if (!context) {
 		throw new Error("ModalTrigger must be contained within a Modal");
 	}
-	let $state = context.state;
-
-	function handleClick() {
-		if (activation !== "press") return;
-
-		$state.visible = !$state.visible;
-	}
-
-	function handleHover() {
-		if (activation !== "hover") return;
-
-		$state.visible = !$state.visible
-	}
 
 	@render {
-		<button
-			type="button"
-			{$props?.id}
-			class={["torp-modal-trigger", $props?.class]}
-			{$props?.style}
-			onclick={handleClick}
-			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
-			&ref={context.anchorElement}
+		<PopoutClickTrigger
+			id={$props?.id}
+			class={$props?.class ?? "torp-modal-trigger"}
+			style={$props?.style}
+			context={context}
+			tag="button"
+			event="click"
 		>
 			<slot />
-		</button>
+		</PopoutClickTrigger>
 	}
 }

package/dist/Modal/ModalTypes.ts

@@ -1,22 +1,11 @@
-export const ModalContextName = "Modal";
+import { type PopoutContext, type PopoutState } from "../utils/PopoutTypes";
+
+export const ModalContextName: unique symbol = Symbol.for("torp.Modal");
 
 /** The shared context for modal components (Contextual, Prompt and Modal) */
-export interface ModalContext {
-	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
-	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
-	// There may be a more elegant way to accomplish this too
-	handleClickOutside?: (e: MouseEvent) => void;
+export interface ModalContext extends PopoutContext {
 	state: ModalState;
-	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
-	// onMount, it will scroll the page to the focused element and mess up our careful positioning
-	// We need to be able to manually set the order to
-	// 1. set visible (so we have an element with content)
-	// 2. set position (so the element is in the right place)
-	// 3. set focus (for accessibility)
-	// There may be a more elegant way to accomplish this!
-	focusFirstElement?: () => void;
 }
 
-export interface ModalState {
-	visible: boolean;
-}
+/** A modal's state is exactly the shared popout state */
+export type ModalState = PopoutState;

package/dist/Modal/index.d.ts

@@ -5,19 +5,15 @@ interface ModalProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the modal is visible  */
-	visible?: boolean,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the modal is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	visible: Bindable<boolean | undefined>;
 	/** Raised when the modal has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the modal has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -49,14 +45,13 @@ interface ModalContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
- * The content that is displayed for a Modal when it is open, displayed
- * alongside an element.
+ * The content that is displayed for a Modal when it is open.
  */
 declare function ModalContent(
 	$parent: ParentNode,
@@ -72,9 +67,9 @@ interface ModalOverlayProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -91,26 +86,19 @@ declare function ModalOverlay(
 
 
 
-interface ModalTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the modal is activated by click/press or by hover **/
-	activation?: "press" | "hover"
-}
-
 /**
- * The button that causes a Modal to appear or disappear.
+ * The button that opens a Modal when pressed.
+ *
+ * Modals require a deliberate act to open, so there is no hover activation.
  */
 declare function ModalTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: ModalTriggerProps | undefined,
+	$props?: ModalTriggerProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Modal, ModalContent, ModalOverlay, ModalTrigger };
+export { Modal, ModalContent, ModalOverlay, ModalTrigger };
+export { default as showModal } from "./showModal";
+export { default as showPrompt } from "./showPrompt";

package/dist/Modal/index.js

@@ -1,33 +1,34 @@
-// src/Modal/Modal.torp
-import Modal_default from "./Modal.torp";
-
-// src/Modal/ModalContent.torp
-import ModalContent_default from "./ModalContent.torp";
-
-// src/Modal/ModalOverlay.torp
-import ModalOverlay_default from "./ModalOverlay.torp";
-
-// src/Modal/ModalTrigger.torp
-import ModalTrigger_default from "./ModalTrigger.torp";
-
-// src/Modal/showModal.ts
+import Modal from "./Modal.torp";
+import ModalContent from "./ModalContent.torp";
+import ModalOverlay from "./ModalOverlay.torp";
+import ModalTrigger from "./ModalTrigger.torp";
+//#region src/Modal/showModal.ts
+/**
+* Shows a modal component in code.
+* @param modal The modal component
+* @param props The properties for the modal component
+* @param target The target element to show the modal in
+* @returns The value selected by the user
+*/
 function showModal(modal, props, target) {
-  modal(target || document.body, null, props);
+	modal(target || document.body, null, props);
 }
-
-// src/Modal/showPrompt.ts
+//#endregion
+//#region src/Modal/showPrompt.ts
+/**
+* Shows a modal component in code, and asynchronously returns the value selected by the user.
+* @param modal The modal component
+* @param props The properties for the modal component
+* @param target The target element to show the modal in
+* @returns The value selected by the user
+*/
 function showPrompt(modal, props, target) {
-  return new Promise((resolve) => {
-    const allProps = Object.assign({}, props, { callback: resolve });
-    modal(target || document.body, null, allProps);
-  });
+	return new Promise((resolve) => {
+		const allProps = Object.assign({}, props, { onclose: resolve });
+		modal(target || document.body, null, allProps);
+	});
 }
-export {
-  Modal_default as Modal,
-  ModalContent_default as ModalContent,
-  ModalOverlay_default as ModalOverlay,
-  ModalTrigger_default as ModalTrigger,
-  showModal,
-  showPrompt
-};
+//#endregion
+export { Modal, ModalContent, ModalOverlay, ModalTrigger, showModal, showPrompt };
+
 //# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal/showModal.ts","../../src/Modal/showPrompt.ts"],"sourcesContent":["// TODO: Allow passing in a variable -- so that you can show an inline modal\nimport type { Component } from \"@torpor/view\";\n\n/**\n * Shows a modal component in code.\n * @param modal The modal component\n * @param props The properties for the modal component\n * @param target The target element to show the modal in\n * @returns The value selected by the user\n */\nexport default function showModal(\n\tmodal: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): void {\n\t// Create the modal\n\t// TODO: This needs to clean up after itself, like the mount methods do\n\tmodal(target || document.body, null, props);\n}\n","import type { Component } from \"@torpor/view\";\n\n/**\n * Shows a modal component in code, and asynchronously returns the value selected by the user.\n * @param modal The modal component\n * @param props The properties for the modal component\n * @param target The target element to show the modal in\n * @returns The value selected by the user\n */\nexport default function showPrompt(\n\tmodal: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): Promise<any> {\n\treturn new Promise((resolve) => {\n\t\t// Add the promise as the callback\n\t\tconst allProps = Object.assign({}, props, { callback: resolve });\n\n\t\t// Create the modal\n\t\t// TODO: This needs to clean up after itself, like the use methods do\n\t\tmodal(target || document.body, null, allProps);\n\t});\n}\n"],"mappings":";;;;;;;;;;;;;AAUe,SAAR,UACN,OACA,OACA,QACO;AAGP,QAAM,UAAU,SAAS,MAAM,MAAM,KAAK;AAC3C;;;ACTe,SAAR,WACN,OACA,OACA,QACe;AACf,SAAO,IAAI,QAAQ,CAAC,YAAY;AAE/B,UAAM,WAAW,OAAO,OAAO,CAAC,GAAG,OAAO,EAAE,UAAU,QAAQ,CAAC;AAI/D,UAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAAA,EAC9C,CAAC;AACF;","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/showModal.ts","../../src/Modal/showPrompt.ts"],"sourcesContent":["// TODO: Allow passing in a variable -- so that you can show an inline modal\nimport type { Component } from \"@torpor/view\";\n\n/**\n * Shows a modal component in code.\n * @param modal The modal component\n * @param props The properties for the modal component\n * @param target The target element to show the modal in\n * @returns The value selected by the user\n */\nexport default function showModal(\n\tmodal: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): void {\n\t// Create the modal\n\t// TODO: This needs to clean up after itself, like the mount methods do\n\tmodal(target || document.body, null, props);\n}\n","import type { Component } from \"@torpor/view\";\n\n/**\n * Shows a modal component in code, and asynchronously returns the value selected by the user.\n * @param modal The modal component\n * @param props The properties for the modal component\n * @param target The target element to show the modal in\n * @returns The value selected by the user\n */\nexport default function showPrompt(\n\tmodal: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): Promise<any> {\n\treturn new Promise((resolve) => {\n\t\t// Add the promise as the onclose handler\n\t\tconst allProps = Object.assign({}, props, { onclose: resolve });\n\n\t\t// Create the modal\n\t\t// TODO: This needs to clean up after itself, like the use methods do\n\t\tmodal(target || document.body, null, allProps);\n\t});\n}\n"],"mappings":";;;;;;;;;;;;AAUA,SAAwB,UACvB,OACA,OACA,QACO;CAGP,MAAM,UAAU,SAAS,MAAM,MAAM,KAAK;AAC3C;;;;;;;;;;ACTA,SAAwB,WACvB,OACA,OACA,QACe;CACf,OAAO,IAAI,SAAS,YAAY;EAE/B,MAAM,WAAW,OAAO,OAAO,CAAC,GAAG,OAAO,EAAE,SAAS,QAAQ,CAAC;EAI9D,MAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;CAC9C,CAAC;AACF"}

package/dist/Modal/showPrompt.ts

@@ -13,8 +13,8 @@ export default function showPrompt(
 	target?: Element,
 ): Promise<any> {
 	return new Promise((resolve) => {
-		// Add the promise as the callback
-		const allProps = Object.assign({}, props, { callback: resolve });
+		// Add the promise as the onclose handler
+		const allProps = Object.assign({}, props, { onclose: resolve });
 
 		// Create the modal
 		// TODO: This needs to clean up after itself, like the use methods do

package/dist/NavMenu/NavMenu.torp

@@ -1,23 +1,19 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	NavMenuContextName,
-	type NavMenuContext,
-	type ItemState,
-	NavMenuPopoutContextName,
-	type NavMenuPopoutContext
-} from "./NavMenuTypes";
+import { type PopoutContext, PopoutContextName } from "../utils/PopoutTypes";
+import { createFocusGroup } from "../utils/focusGroup";
+import { type ItemState, type NavMenuContext, NavMenuContextName } from "./NavMenuTypes";
 
 interface NavMenuProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers  */
-	ariaLabel?: string | undefined,
+	ariaLabel?: string | undefined;
 	/** The orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 }
 
 /**
@@ -39,139 +35,61 @@ interface NavMenuProps {
 export default function NavMenu($props: NavMenuProps | undefined) {
 	let orientation = $props?.orientation ?? "horizontal";
 
-	// A collection containing the state and some functions for each item
-	let itemStates: ItemState[] = [];
-	let focusIndex = -1;
+	// The focus group owns the item ledger and roving-tabindex bookkeeping
+	const group = createFocusGroup<ItemState>();
 
 	// Check whether this is a menu in a popout
-	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
+	const popoutContext = $context[PopoutContextName] as PopoutContext;
 	const inPopout = !!popoutContext;
 	let popoutState = popoutContext?.state;
 
 	// Set the focusFirstElement method in the PopoverContext(s) so that it can be called after everything has been shown
 	if (popoutContext) {
-		popoutContext.focusFirstElement = focusFirstElement;
+		popoutContext.focusFirstElement = group.focusFirstItem;
+		popoutContext.focusLastElement = group.focusLastItem;
 	}
 
 	// Set the context to pass down to items
 	let context: NavMenuContext = {
 		handleItemFocus,
 		handleItemKey,
-		registerItem
+		registerItem,
 	};
 	$context[NavMenuContextName] = context;
 
 	// If the NavMenu is not in a popout, focus its first item. Otherwise the popout will call focusFirstElement, below
 	function handleFocus() {
-		if (!popoutContext && itemStates.length) {
-			itemStates[0].setFocused();
+		if (!popoutContext && group.itemStates.length) {
+			group.focusFirstItem();
 		}
 	}
 
-	function focusFirstElement() {
-		if (itemStates.length) {
-			itemStates[0].setFocused();
-		}
-	}
-
-	function registerItem(setFocused: () => void) {
-		// Add the item's state to the array and return its index
-		const newItemState: ItemState = {
-			setFocused
-		};
-		itemStates.push(newItemState);
-		itemStates = itemStates;
-		return { index: itemStates.length - 1 };
+	function registerItem(item: ItemState) {
+		return group.registerItem(item);
 	}
 
 	function handleItemFocus(index: number) {
-		focusIndex = index;
+		group.handleItemFocus(index);
 	}
 
 	function handleItemKey(e: KeyboardEvent) {
 		switch (e.key) {
-			case "Esc":
 			case "Escape": {
 				if (inPopout) {
 					e.preventDefault();
-					//setPopoutVisible(false);
 					popoutState.visible = false;
 				}
 				break;
 			}
-			case "Right":
-			case "ArrowRight": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Left":
-			case "ArrowLeft": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("previous");
-				}
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("previous");
-				} else {
-					// TODO: This should be based on what side the menu shows on
-					// And on the orientation
-					if (inPopout) {
-						e.preventDefault();
-						popoutState.visible = false;
-					}
-				}
-				break;
-			}
-			case "Home": {
-				e.preventDefault();
-				focusItem("start");
-				break;
-			}
-			case "End": {
-				e.preventDefault();
-				focusItem("end");
+			default: {
+				group.handleGroupKey(group.getFocusIndex(), e, {
+					vertical: orientation === "vertical",
+				});
 				break;
 			}
 		}
 	}
 
-	function focusItem(target: "start" | "previous" | "next" | "end") {
-		switch (target) {
-			case "start": {
-				focusIndex = 0;
-				break;
-			}
-			case "previous": {
-				focusIndex = Math.max(0, focusIndex - 1);
-				break;
-			}
-			case "next": {
-				focusIndex = Math.min(itemStates.length - 1, focusIndex + 1);
-				break;
-			}
-			case "end": {
-				focusIndex = itemStates.length - 1;
-				break;
-			}
-		}
-		itemStates[focusIndex]?.setFocused();
-	}
 
 	@render {
 		<nav

package/dist/NavMenu/NavMenuButton.torp

@@ -1,15 +1,19 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+import { type NavMenuContext, NavMenuContextName } from "./NavMenuTypes";
 
 interface NavMenuButtonProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this button is disabled  */
-	disabled?: boolean,
+	disabled?: boolean;
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void;
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
@@ -27,7 +31,7 @@ export default function NavMenuButton($props: NavMenuButtonProps | undefined) {
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
+	const { index } = registerItem({ setFocused, disabled: $props?.disabled });
 
 	function setFocused() {
 		button.focus();
@@ -42,10 +46,8 @@ export default function NavMenuButton($props: NavMenuButtonProps | undefined) {
 			{$props?.disabled}
 			role="menuitem"
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown
 			onkeydown={handleItemKey}
-			onclick
+			{$props?.onclick}
 			onfocus={() => handleItemFocus(index)}
 			&ref={button}
 		>

package/dist/NavMenu/NavMenuElement.torp

@@ -1,17 +1,17 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+import { type NavMenuContext, NavMenuContextName } from "./NavMenuTypes";
 
 interface NavMenuElementProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this button is disabled  */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** An element that can be focused via keyboard navigation */
-	element?: HTMLElement,
+	element?: HTMLElement;
 }
 
 /**
@@ -27,7 +27,7 @@ export default function NavMenuElement($props: NavMenuElementProps | undefined)
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
+	const { index } = registerItem({ setFocused, disabled: $props?.disabled });
 
 	function setFocused() {
 		if ($props?.element) {
@@ -43,7 +43,6 @@ export default function NavMenuElement($props: NavMenuElementProps | undefined)
 			type="div"
 			role="menuitem"
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick