@k8o/arte-odyssey 10.2.0 → 10.4.0

package/dist/components/overlays/_internal/use-list-navigation.mjs

@@ -0,0 +1,95 @@
+"use client";
+import { useEffect, useRef } from "react";
+//#region src/components/overlays/_internal/use-list-navigation.ts
+const isVerticalWritingMode = (el) => {
+	const wm = getComputedStyle(el).writingMode;
+	return wm.startsWith("vertical") || wm.startsWith("sideways");
+};
+/**
+* 矢印キーによる roving-tabindex のリストナビゲーション。
+* floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
+*
+* コンテンツの書字方向に追従してキーを割り当てる:
+* - 横書き: ↑=前 / ↓=次
+* - 縦書き(vertical-rl, 項目は右→左に並ぶ): ←=次 / →=前（↑/↓ も保険として有効）
+*
+* roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
+* その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
+*/
+const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex = null, loop = true }) => {
+	const itemElementsRef = useRef([]);
+	useEffect(() => {
+		if (!open) {
+			setActiveIndex(null);
+			return;
+		}
+		setActiveIndex((prev) => prev ?? (selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0));
+	}, [
+		open,
+		selectedIndex,
+		setActiveIndex
+	]);
+	useEffect(() => {
+		if (open && activeIndex !== null) itemElementsRef.current[activeIndex]?.focus();
+	}, [open, activeIndex]);
+	const count = () => itemElementsRef.current.filter(Boolean).length;
+	const move = (delta) => {
+		const total = count();
+		if (total === 0) return;
+		setActiveIndex((prev) => {
+			const next = (prev ?? (delta === 1 ? -1 : total)) + delta;
+			if (loop) return (next + total) % total;
+			return Math.max(0, Math.min(total - 1, next));
+		});
+	};
+	const onKeyDown = (event) => {
+		const vertical = isVerticalWritingMode(event.currentTarget);
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				move(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				move(-1);
+				break;
+			case "ArrowLeft":
+				if (vertical) {
+					event.preventDefault();
+					move(1);
+				}
+				break;
+			case "ArrowRight":
+				if (vertical) {
+					event.preventDefault();
+					move(-1);
+				}
+				break;
+			case "Home":
+				event.preventDefault();
+				setActiveIndex(count() > 0 ? 0 : null);
+				break;
+			case "End": {
+				const total = count();
+				event.preventDefault();
+				setActiveIndex(total > 0 ? total - 1 : null);
+				break;
+			}
+			default: break;
+		}
+	};
+	return {
+		getContentProps: () => ({ onKeyDown }),
+		getItemProps: (index) => ({
+			ref: (node) => {
+				itemElementsRef.current[index] = node;
+			},
+			tabIndex: activeIndex === index ? 0 : -1,
+			onFocus: () => {
+				setActiveIndex(index);
+			}
+		})
+	};
+};
+//#endregion
+export { useListNavigation };

package/dist/components/overlays/dialog/dialog.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
-import { CloseIcon } from "../../icons/lucide.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/overlays/drawer/drawer.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { CloseIcon } from "../../icons/lucide.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { Modal } from "../modal/modal.mjs";
 import { useId, useRef } from "react";

package/dist/components/overlays/dropdown-menu/dropdown-menu.d.mts

@@ -1,6 +1,6 @@
 import { Button } from "../../buttons/button/button.mjs";
+import { Placement } from "../../../types/variables.mjs";
 import { ComponentProps, FC, MouseEventHandler, PropsWithChildren, ReactNode } from "react";
-import { Placement } from "@floating-ui/react";
 
 //#region src/components/overlays/dropdown-menu/dropdown-menu.d.ts
 declare const DropdownMenu: {
@@ -13,6 +13,7 @@ declare const DropdownMenu: {
   readonly Item: FC<{
     onClick: MouseEventHandler;
     label: string;
+    index?: number;
   }>;
   readonly Trigger: FC<{
     text: string;

package/dist/components/overlays/dropdown-menu/dropdown-menu.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { Button } from "../../buttons/button/button.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
-import { useFloatingUIContext } from "../popover/hooks.mjs";
+import { useOpenContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/popover.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger } from "./hooks.mjs";
-import { useRef, useState } from "react";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
+import { MenuContextProvider, useMenuContent, useMenuItem } from "./hooks.mjs";
+import { Children, cloneElement, isValidElement, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { FloatingList, useInteractions, useListNavigation } from "@floating-ui/react";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.tsx
 const Root = ({ children, placement = "bottom-start" }) => /* @__PURE__ */ jsx(Popover.Root, {
 	placement,
@@ -16,39 +16,32 @@ const Root = ({ children, placement = "bottom-start" }) => /* @__PURE__ */ jsx(P
 	children: /* @__PURE__ */ jsx(MenuProvider, { children })
 });
 const MenuProvider = ({ children }) => {
+	const { isOpen } = useOpenContext();
 	const [activeIndex, setActiveIndex] = useState(null);
-	const itemElementsRef = useRef([]);
-	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([useListNavigation(useFloatingUIContext(), {
-		listRef: itemElementsRef,
-		activeIndex,
-		onNavigate: setActiveIndex,
-		loop: true
-	})]);
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
-		value: {
+		value: useListNavigation({
+			open: isOpen,
 			activeIndex,
-			itemElementsRef,
-			getTriggerProps: getReferenceProps,
-			getContentProps: getFloatingProps,
-			getItemProps
-		},
+			setActiveIndex,
+			loop: true
+		}),
 		children
 	});
 };
 const Content = ({ children }) => {
-	const { contentProps, itemElementsRef } = useMenuContent();
-	return /* @__PURE__ */ jsx(FloatingList, {
-		elementsRef: itemElementsRef,
-		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx("div", {
-			...props,
-			...contentProps,
-			className: "bg-bg-raised vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg py-2 shadow-md",
-			children
-		}) })
-	});
+	const { contentProps } = useMenuContent();
+	return /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx("div", {
+		...props,
+		...contentProps,
+		className: "bg-bg-raised vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg py-2 shadow-md",
+		children: Children.toArray(children).map((child, index) => isValidElement(child) ? cloneElement(child, { index }) : child)
+	}) });
 };
-const Item = ({ label, onClick }) => {
-	const props = useMenuItem({ onClick });
+const Item = ({ label, onClick, index = 0 }) => {
+	const props = useMenuItem({
+		onClick,
+		index
+	});
 	return /* @__PURE__ */ jsx("button", {
 		className: cn("w-full px-2 py-1 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:bg-bg-subtle focus-visible:outline-hidden"),
 		type: "button",
@@ -56,28 +49,22 @@ const Item = ({ label, onClick }) => {
 		children: label
 	});
 };
-const Trigger = ({ text, size = "md", variant = "solid" }) => {
-	const getTriggerProps = useMenuTrigger();
-	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(Button, {
-		...getTriggerProps(props),
-		color: "gray",
-		endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
-		size,
-		type: "button",
-		variant,
-		children: text
-	}) });
-};
-const IconTrigger = ({ icon, label }) => {
-	const getTriggerProps = useMenuTrigger();
-	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(IconButton, {
-		color: "base",
-		label,
-		tooltipDisabled: true,
-		...getTriggerProps(props),
-		children: icon
-	}) });
-};
+const Trigger = ({ text, size = "md", variant = "solid" }) => /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	color: "gray",
+	endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
+	size,
+	type: "button",
+	variant,
+	children: text
+}) });
+const IconTrigger = ({ icon, label }) => /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(IconButton, {
+	color: "base",
+	label,
+	tooltipDisabled: true,
+	...props,
+	children: icon
+}) });
 const DropdownMenu = {
 	Root,
 	Content,

package/dist/components/overlays/dropdown-menu/hooks.d.mts

@@ -1,305 +1,25 @@
-import { HTMLAttributes, HTMLProps, MouseEventHandler, RefObject } from "react";
+import { ListNavigation } from "../_internal/use-list-navigation.mjs";
+import { MouseEventHandler } from "react";
 
 //#region src/components/overlays/dropdown-menu/hooks.d.ts
-type MenuContext = {
-  activeIndex: number | null;
-  itemElementsRef: RefObject<Array<HTMLElement | null>>;
-  getTriggerProps: (userProps?: HTMLProps<HTMLElement>) => Omit<HTMLAttributes<HTMLElement>, 'color'>;
-  getContentProps: (userProps?: HTMLProps<HTMLElement>) => HTMLAttributes<HTMLElement>;
-  getItemProps: (userProps?: Omit<HTMLProps<HTMLButtonElement>, 'selected' | 'active'>) => HTMLAttributes<HTMLElement>;
-};
-declare const MenuContextProvider: import("react").Context<MenuContext | null>, useMenuContext: () => MenuContext;
+declare const MenuContextProvider: import("react").Context<ListNavigation | null>, useMenuContext: () => ListNavigation;
 declare const useMenuContent: () => {
-  contentProps: HTMLAttributes<HTMLElement>;
-  itemElementsRef: RefObject<(HTMLElement | null)[]>;
+  contentProps: {
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+  };
 };
 declare const useMenuItem: ({
-  onClick
+  onClick,
+  index
 }: {
   onClick: MouseEventHandler;
+  index: number;
 }) => {
-  defaultChecked?: boolean | undefined;
-  defaultValue?: string | number | readonly string[] | undefined;
-  suppressContentEditableWarning?: boolean | undefined;
-  suppressHydrationWarning?: boolean | undefined;
-  accessKey?: string | undefined;
-  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-  autoFocus?: boolean | undefined;
-  className?: string | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-  contextMenu?: string | undefined;
-  dir?: string | undefined;
-  draggable?: (boolean | "true" | "false") | undefined;
-  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-  hidden?: boolean | undefined;
-  id?: string | undefined;
-  lang?: string | undefined;
-  nonce?: string | undefined;
-  slot?: string | undefined;
-  spellCheck?: (boolean | "true" | "false") | undefined;
-  style?: import("react").CSSProperties | undefined;
-  tabIndex: number;
-  title?: string | undefined;
-  translate?: "yes" | "no" | undefined;
-  radioGroup?: string | undefined;
-  role: string;
-  about?: string | undefined;
-  content?: string | undefined;
-  datatype?: string | undefined;
-  inlist?: any;
-  prefix?: string | undefined;
-  property?: string | undefined;
-  rel?: string | undefined;
-  resource?: string | undefined;
-  rev?: string | undefined;
-  typeof?: string | undefined;
-  vocab?: string | undefined;
-  autoCorrect?: string | undefined;
-  autoSave?: string | undefined;
-  color?: string | undefined;
-  itemProp?: string | undefined;
-  itemScope?: boolean | undefined;
-  itemType?: string | undefined;
-  itemID?: string | undefined;
-  itemRef?: string | undefined;
-  results?: number | undefined;
-  security?: string | undefined;
-  unselectable?: "on" | "off" | undefined;
-  popover?: "" | "auto" | "manual" | "hint" | undefined;
-  popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-  popoverTarget?: string | undefined;
-  inert?: boolean | undefined;
-  inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-  is?: string | undefined;
-  exportparts?: string | undefined;
-  part?: string | undefined;
-  "aria-activedescendant"?: string | undefined;
-  "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-  "aria-braillelabel"?: string | undefined;
-  "aria-brailleroledescription"?: string | undefined;
-  "aria-busy"?: (boolean | "true" | "false") | undefined;
-  "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-  "aria-colcount"?: number | undefined;
-  "aria-colindex"?: number | undefined;
-  "aria-colindextext"?: string | undefined;
-  "aria-colspan"?: number | undefined;
-  "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-  "aria-describedby"?: string | undefined;
-  "aria-description"?: string | undefined;
-  "aria-details"?: string | undefined;
-  "aria-disabled"?: (boolean | "true" | "false") | undefined;
-  "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-  "aria-errormessage"?: string | undefined;
-  "aria-expanded"?: (boolean | "true" | "false") | undefined;
-  "aria-flowto"?: string | undefined;
-  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-  "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-  "aria-hidden"?: (boolean | "true" | "false") | undefined;
-  "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-  "aria-keyshortcuts"?: string | undefined;
-  "aria-label"?: string | undefined;
-  "aria-labelledby"?: string | undefined;
-  "aria-level"?: number | undefined;
-  "aria-live"?: "off" | "assertive" | "polite" | undefined;
-  "aria-modal"?: (boolean | "true" | "false") | undefined;
-  "aria-multiline"?: (boolean | "true" | "false") | undefined;
-  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-  "aria-orientation"?: "horizontal" | "vertical" | undefined;
-  "aria-owns"?: string | undefined;
-  "aria-placeholder"?: string | undefined;
-  "aria-posinset"?: number | undefined;
-  "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-  "aria-readonly"?: (boolean | "true" | "false") | undefined;
-  "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-  "aria-required"?: (boolean | "true" | "false") | undefined;
-  "aria-roledescription"?: string | undefined;
-  "aria-rowcount"?: number | undefined;
-  "aria-rowindex"?: number | undefined;
-  "aria-rowindextext"?: string | undefined;
-  "aria-rowspan"?: number | undefined;
-  "aria-selected"?: (boolean | "true" | "false") | undefined;
-  "aria-setsize"?: number | undefined;
-  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-  "aria-valuemax"?: number | undefined;
-  "aria-valuemin"?: number | undefined;
-  "aria-valuenow"?: number | undefined;
-  "aria-valuetext"?: string | undefined;
-  children?: import("react").ReactNode | undefined;
-  dangerouslySetInnerHTML?: {
-    __html: string | TrustedHTML;
-  } | undefined;
-  onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-  onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-  onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-  onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-  onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-  onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-  onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-  onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-  onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-  onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-  onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-  onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-  onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
-  onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-  onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
-  onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-  onChange?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
-  onChangeCapture?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
-  onBeforeInput?: import("react").InputEventHandler<HTMLElement> | undefined;
-  onBeforeInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
-  onInput?: import("react").InputEventHandler<HTMLElement> | undefined;
-  onInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
-  onReset?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onResetCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSubmit?: import("react").SubmitEventHandler<HTMLElement> | undefined;
-  onSubmitCapture?: import("react").SubmitEventHandler<HTMLElement> | undefined;
-  onInvalid?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onInvalidCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-  onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-  onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-  onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-  onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-  onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-  onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onAuxClick?: MouseEventHandler<HTMLElement> | undefined;
-  onAuxClickCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onClick?: MouseEventHandler<HTMLElement> | undefined;
-  onClickCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onContextMenu?: MouseEventHandler<HTMLElement> | undefined;
-  onContextMenuCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onDoubleClick?: MouseEventHandler<HTMLElement> | undefined;
-  onDoubleClickCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-  onMouseDown?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseDownCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseEnter?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseLeave?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseMove?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseMoveCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseOut?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseOutCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseOver?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseOverCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseUp?: MouseEventHandler<HTMLElement> | undefined;
-  onMouseUpCapture?: MouseEventHandler<HTMLElement> | undefined;
-  onSelect?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-  onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-  onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-  onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
-  onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
-  onScrollEnd?: import("react").UIEventHandler<HTMLElement> | undefined;
-  onScrollEndCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
-  onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
-  onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
-  onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-  onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-  onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-  onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-  onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-  onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
-  onBeforeToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
-  onTransitionCancel?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionRun?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionStart?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-  onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+  onClick: (e: Parameters<MouseEventHandler>[0]) => void;
   ref: (node: HTMLElement | null) => void;
+  tabIndex: number;
+  onFocus: () => void;
+  role: "menuitem";
 };
-declare const useMenuTrigger: () => (userProps?: HTMLProps<HTMLElement>) => Omit<HTMLAttributes<HTMLElement>, "color">;
 //#endregion
-export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem, useMenuTrigger };
+export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem };

package/dist/components/overlays/dropdown-menu/hooks.mjs

@@ -2,39 +2,28 @@
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
 import { useMemo } from "react";
-import { useListItem } from "@floating-ui/react";
 //#region src/components/overlays/dropdown-menu/hooks.ts
 const [MenuContextProvider, useMenuContext] = createSafeContext("useMenuContext must be used within a DropdownMenu.Root");
 const useMenuContent = () => {
 	const menu = useMenuContext();
-	return useMemo(() => ({
-		contentProps: menu.getContentProps(),
-		itemElementsRef: menu.itemElementsRef
-	}), [menu]);
+	return useMemo(() => ({ contentProps: menu.getContentProps() }), [menu]);
 };
-const useMenuItem = ({ onClick }) => {
+const useMenuItem = ({ onClick, index }) => {
 	const menu = useMenuContext();
 	const { onClose } = useOpenContext();
-	const item = useListItem();
 	return useMemo(() => ({
-		ref: item.ref,
 		role: "menuitem",
-		tabIndex: menu.activeIndex === item.index ? 0 : -1,
-		...menu.getItemProps({ onClick: (e) => {
+		...menu.getItemProps(index),
+		onClick: (e) => {
 			onClick(e);
 			onClose();
-		} })
+		}
 	}), [
-		item.index,
-		item.ref,
+		index,
 		menu,
 		onClick,
 		onClose
 	]);
 };
-const useMenuTrigger = () => {
-	const menu = useMenuContext();
-	return useMemo(() => menu.getTriggerProps, [menu]);
-};
 //#endregion
-export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem, useMenuTrigger };
+export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem };