@k8o/arte-odyssey 10.2.0 → 10.4.0

package/dist/components/overlays/list-box/hooks.d.mts

@@ -1,316 +1,36 @@
-import { HTMLAttributes, HTMLProps, RefObject } from "react";
+import { ListNavigation } from "../_internal/use-list-navigation.mjs";
 
 //#region src/components/overlays/list-box/hooks.d.ts
 type Option = {
   key: string;
   label: string;
 };
-type MenuContext = {
+type MenuContext = ListNavigation & {
   options: Option[];
-  activeIndex: number | null;
-  selectedIndex: number | null;
+  selectedIndex: number;
   handleSelect: (index: number) => void;
-  itemElementsRef: RefObject<Array<HTMLElement | null>>;
-  getTriggerProps: (userProps?: HTMLProps<HTMLElement>) => Omit<HTMLAttributes<HTMLElement>, 'color'>;
-  getContentProps: (userProps?: HTMLProps<HTMLElement>) => HTMLAttributes<HTMLElement>;
-  getItemProps: (userProps?: Omit<HTMLProps<HTMLElement>, 'selected' | 'active'>) => HTMLAttributes<HTMLElement>;
 };
 declare const MenuContextProvider: import("react").Context<MenuContext | null>;
 declare const useMenuContent: () => {
   options: Option[];
-  selectedIndex: number | null;
-  contentProps: HTMLAttributes<HTMLElement>;
-  itemElementsRef: RefObject<(HTMLElement | null)[]>;
+  selectedIndex: number;
+  contentProps: {
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+  };
 };
 declare const useMenuItem: (index: number) => {
   selected: boolean;
   props: {
-    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";
-    "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?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onDoubleClickCapture?: import("react").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?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseUpCapture?: import("react").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: () => void;
     ref: (node: HTMLElement | null) => void;
+    tabIndex: number;
+    onFocus: () => void;
+    role: "option";
+    'aria-selected': boolean;
   };
 };
 declare const useMenuTrigger: () => {
   label: string;
-  getTriggerProps: (userProps?: HTMLProps<HTMLElement>) => Omit<HTMLAttributes<HTMLElement>, "color">;
 };
 //#endregion
 export { MenuContextProvider, Option, useMenuContent, useMenuItem, useMenuTrigger };

package/dist/components/overlays/list-box/hooks.mjs

@@ -2,7 +2,6 @@
 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/list-box/hooks.ts
 const [MenuContextProvider, useMenuContext] = createSafeContext("useMenuContext must be used within a ListBox.Root");
 const useMenuContent = () => {
@@ -10,30 +9,25 @@ const useMenuContent = () => {
 	return useMemo(() => ({
 		options: menu.options,
 		selectedIndex: menu.selectedIndex,
-		contentProps: menu.getContentProps(),
-		itemElementsRef: menu.itemElementsRef
+		contentProps: menu.getContentProps()
 	}), [menu]);
 };
 const useMenuItem = (index) => {
 	const menu = useMenuContext();
 	const { onClose } = useOpenContext();
-	const item = useListItem();
 	return useMemo(() => ({
 		selected: menu.selectedIndex === index,
 		props: {
-			ref: item.ref,
-			"aria-selected": menu.selectedIndex === index,
 			role: "option",
-			tabIndex: menu.activeIndex === item.index ? 0 : -1,
-			...menu.getItemProps({ onClick: () => {
+			"aria-selected": menu.selectedIndex === index,
+			...menu.getItemProps(index),
+			onClick: () => {
 				menu.handleSelect(index);
 				onClose();
-			} })
+			}
 		}
 	}), [
 		index,
-		item.index,
-		item.ref,
 		menu,
 		onClose
 	]);
@@ -41,11 +35,8 @@ const useMenuItem = (index) => {
 const useMenuTrigger = () => {
 	const menu = useMenuContext();
 	const defaultLabel = "選択してください";
-	const label = menu.selectedIndex === null ? defaultLabel : menu.options[menu.selectedIndex]?.label ?? defaultLabel;
-	return useMemo(() => ({
-		label,
-		getTriggerProps: menu.getTriggerProps
-	}), [label, menu.getTriggerProps]);
+	const label = menu.selectedIndex < 0 ? defaultLabel : menu.options[menu.selectedIndex]?.label ?? defaultLabel;
+	return useMemo(() => ({ label }), [label]);
 };
 //#endregion
 export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };

package/dist/components/overlays/list-box/list-box.d.mts

@@ -1,7 +1,7 @@
 import { Button } from "../../buttons/button/button.mjs";
+import { Placement } from "../../../types/variables.mjs";
 import { Option } from "./hooks.mjs";
 import { ComponentProps, FC, PropsWithChildren, ReactElement } from "react";
-import { Placement } from "@floating-ui/react";
 
 //#region src/components/overlays/list-box/list-box.d.ts
 declare const ListBox: {

package/dist/components/overlays/list-box/list-box.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { Button } from "../../buttons/button/button.mjs";
-import { CheckIcon, 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 { CheckIcon, ChevronIcon } from "../../icons/lucide.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger } from "./hooks.mjs";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FloatingList, useInteractions, useListNavigation } from "@floating-ui/react";
 //#region src/components/overlays/list-box/list-box.tsx
 const Root = ({ children, placement = "bottom", options, value, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
 	flipDisabled: true,
@@ -22,48 +22,41 @@ const Root = ({ children, placement = "bottom", options, value, onChange }) => /
 	})
 });
 const MenuProvider = ({ children, options, onChange, value }) => {
+	const { isOpen } = useOpenContext();
 	const selectedIndex = options.findIndex((option) => option.key === value);
 	const [activeIndex, setActiveIndex] = useState(null);
-	const itemElementsRef = useRef([]);
-	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([useListNavigation(useFloatingUIContext(), {
-		listRef: itemElementsRef,
+	const nav = useListNavigation({
+		open: isOpen,
 		activeIndex,
+		setActiveIndex,
 		selectedIndex,
-		onNavigate: setActiveIndex,
 		loop: true
-	})]);
+	});
 	const handleSelect = (index) => {
 		const key = options[index]?.key;
 		if (key !== void 0 && key !== "") onChange(key);
 	};
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
 		value: {
+			...nav,
 			options,
-			activeIndex,
 			selectedIndex,
-			handleSelect,
-			itemElementsRef,
-			getTriggerProps: getReferenceProps,
-			getContentProps: getFloatingProps,
-			getItemProps
+			handleSelect
 		},
 		children
 	});
 };
 const Content = ({ helpContent }) => {
-	const { options, contentProps, itemElementsRef } = useMenuContent();
-	return /* @__PURE__ */ jsx(FloatingList, {
-		elementsRef: itemElementsRef,
-		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsxs("div", {
-			...props,
-			...contentProps,
-			className: "bg-bg-raised vertical:max-h-none vertical:min-w-0 vertical:max-w-48 vertical:min-h-40 vertical:overflow-x-auto vertical:overflow-y-visible flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg py-2 shadow-md",
-			children: [helpContent, options.map(({ key, label }, idx) => /* @__PURE__ */ jsx(Item, {
-				index: idx,
-				label
-			}, key))]
-		}) })
-	});
+	const { options, contentProps } = useMenuContent();
+	return /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsxs("div", {
+		...props,
+		...contentProps,
+		className: "bg-bg-raised vertical:max-h-none vertical:min-w-0 vertical:max-w-48 vertical:min-h-40 vertical:overflow-x-auto vertical:overflow-y-visible flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg py-2 shadow-md",
+		children: [helpContent, options.map(({ key, label }, idx) => /* @__PURE__ */ jsx(Item, {
+			index: idx,
+			label
+		}, key))]
+	}) });
 };
 const Item = ({ label, index }) => {
 	const { props, selected } = useMenuItem(index);
@@ -78,9 +71,9 @@ const Item = ({ label, index }) => {
 	});
 };
 const Trigger = ({ size = "md" }) => {
-	const { label, getTriggerProps } = useMenuTrigger();
+	const { label } = useMenuTrigger();
 	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(Button, {
-		...getTriggerProps(props),
+		...props,
 		"aria-label": label,
 		color: "gray",
 		endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
@@ -92,12 +85,12 @@ const Trigger = ({ size = "md" }) => {
 	}) });
 };
 const TriggerIcon = ({ size = "md", icon }) => {
-	const { label, getTriggerProps } = useMenuTrigger();
+	const { label } = useMenuTrigger();
 	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(IconButton, {
 		label,
 		size,
 		tooltipDisabled: true,
-		...getTriggerProps(props),
+		...props,
 		children: icon
 	}) });
 };

package/dist/components/overlays/popover/anchor-positioning.d.mts

@@ -0,0 +1,26 @@
+import { Placement } from "../../../types/variables.mjs";
+import { CSSProperties } from "react";
+
+//#region src/components/overlays/popover/anchor-positioning.d.ts
+/**
+ * CSS Anchor Positioning による配置ヘルパー。
+ *
+ * placement を position-area / position-try-fallbacks / 対向辺マージン（offset 相当）へ
+ * 変換する。旧 floating-ui のミドルウェア（offset / flip / autoUpdate）の置き換え。
+ *
+ * 注意: CSS Anchor Positioning は Baseline newly available（2026-01）で、
+ * 縦書き / RTL のインライン軸補正にエンジン差（既知の interop バグ）がある。
+ */
+type AnchorCSSProperties = CSSProperties & {
+  positionAnchor?: string;
+  positionArea?: string;
+  positionTryFallbacks?: string;
+};
+declare const toAnchorName: (id: string) => string;
+/**
+ * Popover content（位置決め対象）に適用する style。
+ * `flipDisabled` のときは position-try-fallbacks を付けず、はみ出しても反転しない。
+ */
+declare const getContentAnchorStyle: (anchorName: string, placement: Placement, flipDisabled: boolean) => AnchorCSSProperties;
+//#endregion
+export { getContentAnchorStyle, toAnchorName };

package/dist/components/overlays/popover/anchor-positioning.mjs

@@ -0,0 +1,44 @@
+//#region src/components/overlays/popover/anchor-positioning.ts
+const POSITION_AREA = {
+	top: "top",
+	"top-start": "top span-right",
+	"top-end": "top span-left",
+	bottom: "bottom",
+	"bottom-start": "bottom span-right",
+	"bottom-end": "bottom span-left",
+	left: "left",
+	"left-start": "left span-bottom",
+	"left-end": "left span-top",
+	right: "right",
+	"right-start": "right span-bottom",
+	"right-end": "right span-top"
+};
+const GAP = "8px";
+const sideGap = (side) => {
+	switch (side) {
+		case "top": return { marginBottom: GAP };
+		case "bottom": return { marginTop: GAP };
+		case "left": return { marginRight: GAP };
+		case "right": return { marginLeft: GAP };
+		default: return {};
+	}
+};
+const toAnchorName = (id) => `--ao-popover-${id.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
+/**
+* Popover content（位置決め対象）に適用する style。
+* `flipDisabled` のときは position-try-fallbacks を付けず、はみ出しても反転しない。
+*/
+const getContentAnchorStyle = (anchorName, placement, flipDisabled) => {
+	return {
+		position: "fixed",
+		inset: "auto",
+		margin: 0,
+		overflow: "visible",
+		...sideGap(placement.split("-")[0] ?? "bottom"),
+		positionAnchor: anchorName,
+		positionArea: POSITION_AREA[placement],
+		...flipDisabled ? {} : { positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline" }
+	};
+};
+//#endregion
+export { getContentAnchorStyle, toAnchorName };

package/dist/components/overlays/popover/hooks.d.mts

@@ -1,5 +1,5 @@
-import { CSSProperties, KeyboardEventHandler, MouseEventHandler, RefCallback, RefObject } from "react";
-import { FloatingContext, Placement, ReferenceType } from "@floating-ui/react";
+import { Placement } from "../../../types/variables.mjs";
+import { KeyboardEventHandler, MouseEventHandler, RefCallback, RefObject } from "react";
 
 //#region src/components/overlays/popover/hooks.d.ts
 type PopoverContext = {
@@ -11,16 +11,13 @@ type PopoverContext = {
   toggleOpen: () => void;
   onOpen: () => void;
   onClose: () => void;
-  context: FloatingContext;
   placement: Placement;
-  triggerRef: RefObject<Element | null>;
-  setTriggerRef: (node: ReferenceType | null) => void;
-  setContentRef: (node: HTMLElement | null) => void;
-  contentStyles: CSSProperties;
+  anchorName: string;
+  flipDisabled: boolean;
+  triggerRef: RefObject<HTMLElement | null>;
+  setTriggerRef: (node: HTMLElement | null) => void;
 };
 declare const PopoverProvider: import("react").Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
-declare const useFloatingUIContext: () => FloatingContext;
-declare const usePlacement: () => Placement;
 declare const useOpenContext: () => {
   isOpen: boolean;
   onOpen: () => void;
@@ -38,9 +35,9 @@ declare const usePopoverContent: () => {
   ref: RefObject<HTMLDivElement | null>;
   isOpen: boolean;
   trapFocus: boolean;
-  context: FloatingContext;
-  setContentRef: (node: HTMLElement | null) => void;
-  contentStyles: CSSProperties;
+  anchorName: string;
+  placement: Placement;
+  flipDisabled: boolean;
   itemProps: PopoverContentProps;
 };
 type PopoverTriggerProps = {
@@ -54,4 +51,4 @@ type PopoverTriggerProps = {
 };
 declare const usePopoverTrigger: () => PopoverTriggerProps;
 //#endregion
-export { PopoverContentProps, PopoverProvider, PopoverTriggerProps, useFloatingUIContext, useOpenContext, usePlacement, usePopoverContent, usePopoverContext, usePopoverTrigger };
+export { PopoverContentProps, PopoverProvider, PopoverTriggerProps, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger };