@octanejs/floating-ui 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@octanejs/floating-ui",
+  "version": "0.1.2",
+  "license": "MIT",
+  "type": "module",
+  "description": "Floating UI bindings for the octane renderer — a port of @floating-ui/react (positioning + interactions + focus management) on top of the framework-agnostic @floating-ui/dom.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/floating-ui"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/utils": "^0.2.11",
+    "tabbable": "^6.5.0",
+    "octane": "0.1.3"
+  },
+  "devDependencies": {
+    "@floating-ui/react": "0.27.19",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/Composite.ts

@@ -0,0 +1,241 @@
+// Ported from @floating-ui/react Composite + CompositeItem — a single tab-stop whose
+// items are arrow-key navigated (list nav outside a floating context). `.ts`
+// components via createElement; React forwardRef → props.ref. `renderJsx` supports the
+// `render` prop (a function, an element to clone, or a default <div>); octane has no
+// cloneElement, so it's implemented locally over createElement.
+import { createContext, createElement, useContext, useMemo, useRef, useState } from 'octane';
+
+import { FloatingList, useListItem } from './FloatingList';
+import { S } from './internal';
+import { useMergeRefs } from './useMergeRefs';
+import {
+	createGridCellMap,
+	findNonDisabledListIndex,
+	getGridCellIndexOfCorner,
+	getGridCellIndices,
+	getGridNavigatedIndex,
+	getMaxListIndex,
+	getMinListIndex,
+	isIndexOutOfListBounds,
+	isListIndexDisabled,
+	useEffectEvent,
+} from './utils';
+
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const horizontalKeys = [ARROW_LEFT, ARROW_RIGHT];
+const verticalKeys = [ARROW_UP, ARROW_DOWN];
+const allKeys = [...horizontalKeys, ...verticalKeys];
+
+function cloneElement(el: any, props: any): any {
+	return createElement(el.type, { ...el.props, ...props });
+}
+
+function renderJsx(render: any, computedProps: any): any {
+	if (typeof render === 'function') {
+		return render(computedProps);
+	}
+	if (render) {
+		return cloneElement(render, computedProps);
+	}
+	return createElement('div', { ...computedProps });
+}
+
+export const CompositeContext = createContext<any>({
+	activeIndex: 0,
+	onNavigate: () => {},
+});
+
+export function Composite(props: any): any {
+	const render = props.render;
+	const orientation = props.orientation ?? 'both';
+	const loop = props.loop ?? true;
+	const rtl = props.rtl ?? false;
+	const cols = props.cols ?? 1;
+	const disabledIndices = props.disabledIndices;
+	const externalActiveIndex = props.activeIndex;
+	const externalSetActiveIndex = props.onNavigate;
+	const itemSizes = props.itemSizes;
+	const dense = props.dense ?? false;
+	const forwardedRef = props.ref;
+	const {
+		render: _r,
+		orientation: _o,
+		loop: _l,
+		rtl: _rtl,
+		cols: _c,
+		disabledIndices: _di,
+		activeIndex: _ai,
+		onNavigate: _on,
+		itemSizes: _is,
+		dense: _d,
+		ref: _ref,
+		...domProps
+	} = props;
+
+	const [internalActiveIndex, internalSetActiveIndex] = useState(0, S('Composite:active'));
+	const activeIndex = externalActiveIndex != null ? externalActiveIndex : internalActiveIndex;
+	const onNavigate = useEffectEvent(
+		externalSetActiveIndex != null ? externalSetActiveIndex : internalSetActiveIndex,
+		S('Composite:nav'),
+	);
+	const elementsRef = useRef<any[]>([], S('Composite:els'));
+	const renderElementProps = render && typeof render !== 'function' ? render.props : {};
+	const contextValue = useMemo(
+		() => ({ activeIndex, onNavigate }),
+		[activeIndex, onNavigate],
+		S('Composite:ctx'),
+	);
+	const isGrid = cols > 1;
+
+	function handleKeyDown(event: any) {
+		if (!allKeys.includes(event.key)) return;
+		let nextIndex = activeIndex;
+		const minIndex = getMinListIndex(elementsRef, disabledIndices);
+		const maxIndex = getMaxListIndex(elementsRef, disabledIndices);
+		const horizontalEndKey = rtl ? ARROW_LEFT : ARROW_RIGHT;
+		const horizontalStartKey = rtl ? ARROW_RIGHT : ARROW_LEFT;
+		if (isGrid) {
+			const sizes =
+				itemSizes ||
+				Array.from({ length: elementsRef.current.length }, () => ({ width: 1, height: 1 }));
+			const cellMap = createGridCellMap(sizes, cols, dense);
+			const minGridIndex = cellMap.findIndex(
+				(index) => index != null && !isListIndexDisabled(elementsRef, index, disabledIndices),
+			);
+			const maxGridIndex = cellMap.reduce(
+				(foundIndex, index, cellIndex) =>
+					index != null && !isListIndexDisabled(elementsRef, index, disabledIndices)
+						? cellIndex
+						: foundIndex,
+				-1,
+			);
+			const maybeNextIndex =
+				cellMap[
+					getGridNavigatedIndex(
+						{
+							current: cellMap.map((itemIndex) =>
+								itemIndex ? elementsRef.current[itemIndex] : null,
+							),
+						},
+						{
+							event,
+							orientation,
+							loop,
+							rtl,
+							cols,
+							disabledIndices: getGridCellIndices(
+								[
+									...((typeof disabledIndices !== 'function' ? disabledIndices : null) ||
+										elementsRef.current.map((_: any, index: number) =>
+											isListIndexDisabled(elementsRef, index, disabledIndices) ? index : undefined,
+										)),
+									undefined,
+								],
+								cellMap,
+							),
+							minIndex: minGridIndex,
+							maxIndex: maxGridIndex,
+							prevIndex: getGridCellIndexOfCorner(
+								activeIndex > maxIndex ? minIndex : activeIndex,
+								sizes,
+								cellMap,
+								cols,
+								event.key === ARROW_DOWN ? 'bl' : event.key === horizontalEndKey ? 'tr' : 'tl',
+							),
+						},
+					)
+				];
+			if (maybeNextIndex != null) {
+				nextIndex = maybeNextIndex;
+			}
+		}
+		const toEndKeys = {
+			horizontal: [horizontalEndKey],
+			vertical: [ARROW_DOWN],
+			both: [horizontalEndKey, ARROW_DOWN],
+		}[orientation as 'horizontal' | 'vertical' | 'both'];
+		const toStartKeys = {
+			horizontal: [horizontalStartKey],
+			vertical: [ARROW_UP],
+			both: [horizontalStartKey, ARROW_UP],
+		}[orientation as 'horizontal' | 'vertical' | 'both'];
+		const preventedKeys = isGrid
+			? allKeys
+			: {
+					horizontal: horizontalKeys,
+					vertical: verticalKeys,
+					both: allKeys,
+				}[orientation as 'horizontal' | 'vertical' | 'both'];
+		if (nextIndex === activeIndex && [...toEndKeys, ...toStartKeys].includes(event.key)) {
+			if (loop && nextIndex === maxIndex && toEndKeys.includes(event.key)) {
+				nextIndex = minIndex;
+			} else if (loop && nextIndex === minIndex && toStartKeys.includes(event.key)) {
+				nextIndex = maxIndex;
+			} else {
+				nextIndex = findNonDisabledListIndex(elementsRef, {
+					startingIndex: nextIndex,
+					decrement: toStartKeys.includes(event.key),
+					disabledIndices,
+				});
+			}
+		}
+		if (nextIndex !== activeIndex && !isIndexOutOfListBounds(elementsRef, nextIndex)) {
+			event.stopPropagation();
+			if (preventedKeys.includes(event.key)) {
+				event.preventDefault();
+			}
+			onNavigate(nextIndex);
+			elementsRef.current[nextIndex]?.focus();
+		}
+	}
+
+	const computedProps = {
+		...domProps,
+		...renderElementProps,
+		ref: forwardedRef,
+		'aria-orientation': orientation === 'both' ? undefined : orientation,
+		onKeyDown(e: any) {
+			domProps.onKeyDown?.(e);
+			renderElementProps.onKeyDown?.(e);
+			handleKeyDown(e);
+		},
+	};
+
+	return createElement(CompositeContext.Provider, {
+		value: contextValue,
+		children: createElement(FloatingList, {
+			elementsRef,
+			children: renderJsx(render, computedProps),
+		}),
+	});
+}
+
+export function CompositeItem(props: any): any {
+	const render = props.render;
+	const forwardedRef = props.ref;
+	const { render: _r, ref: _ref, ...domProps } = props;
+	const renderElementProps = render && typeof render !== 'function' ? render.props : {};
+	const { activeIndex, onNavigate } = useContext(CompositeContext);
+	const { ref, index } = useListItem(S('CompositeItem:listItem'));
+	const mergedRef = useMergeRefs(
+		[ref, forwardedRef, renderElementProps.ref],
+		S('CompositeItem:merge'),
+	);
+	const isActive = activeIndex === index;
+	const computedProps = {
+		...domProps,
+		...renderElementProps,
+		ref: mergedRef,
+		tabIndex: isActive ? 0 : -1,
+		'data-active': isActive ? '' : undefined,
+		onFocus(e: any) {
+			domProps.onFocus?.(e);
+			renderElementProps.onFocus?.(e);
+			onNavigate(index);
+		},
+	};
+	return renderJsx(render, computedProps);
+}

package/src/FloatingArrow.ts

@@ -0,0 +1,145 @@
+// Ported from @floating-ui/react FloatingArrow — the SVG arrow for a floating
+// element. Now possible because octane's de-opt path namespaces `<svg>` subtrees.
+// `.ts` component via createElement; React forwardRef → props.ref. Unlike React JSX
+// (which maps `strokeWidth`→`stroke-width`), octane's de-opt setAttribute uses names
+// verbatim, so SVG presentation attributes are written kebab-case here.
+import { getComputedStyle } from '@floating-ui/utils/dom';
+import { createElement, useState } from 'octane';
+
+import { S } from './internal';
+import { useId } from './useId';
+import { useModernLayoutEffect } from './utils';
+
+export function FloatingArrow(props: any): any {
+	const ref = props.ref;
+	const context = props.context;
+	const placement = context.placement;
+	const floating = context.elements.floating;
+	const arrow = context.middlewareData.arrow;
+	const shift = context.middlewareData.shift;
+
+	const width = props.width ?? 14;
+	const height = props.height ?? 7;
+	const tipRadius = props.tipRadius ?? 0;
+	const strokeWidth = props.strokeWidth ?? 0;
+	const staticOffset = props.staticOffset;
+	const stroke = props.stroke;
+	const d = props.d;
+	const { transform, ...restStyle } = props.style ?? {};
+	const {
+		context: _c,
+		width: _w,
+		height: _h,
+		tipRadius: _t,
+		strokeWidth: _s,
+		staticOffset: _so,
+		stroke: _st,
+		d: _d,
+		style: _sty,
+		ref: _r,
+		...rest
+	} = props;
+
+	const clipPathId = useId(S('FloatingArrow:id'));
+	const [isRTL, setIsRTL] = useState(false, S('FloatingArrow:rtl'));
+
+	useModernLayoutEffect(
+		() => {
+			if (!floating) return;
+			const rtl = getComputedStyle(floating).direction === 'rtl';
+			if (rtl) {
+				setIsRTL(true);
+			}
+		},
+		[floating],
+		S('FloatingArrow:eff'),
+	);
+
+	if (!floating) {
+		return null;
+	}
+
+	const [side, alignment] = placement.split('-');
+	const isVerticalSide = side === 'top' || side === 'bottom';
+	let computedStaticOffset = staticOffset;
+	if (
+		(isVerticalSide && shift != null && shift.x) ||
+		(!isVerticalSide && shift != null && shift.y)
+	) {
+		computedStaticOffset = null;
+	}
+
+	const computedStrokeWidth = strokeWidth * 2;
+	const halfStrokeWidth = computedStrokeWidth / 2;
+	const svgX = (width / 2) * (tipRadius / -8 + 1);
+	const svgY = ((height / 2) * tipRadius) / 4;
+	const isCustomShape = !!d;
+	const yOffsetProp = computedStaticOffset && alignment === 'end' ? 'bottom' : 'top';
+	let xOffsetProp = computedStaticOffset && alignment === 'end' ? 'right' : 'left';
+	if (computedStaticOffset && isRTL) {
+		xOffsetProp = alignment === 'end' ? 'left' : 'right';
+	}
+	const arrowX = arrow?.x != null ? computedStaticOffset || arrow.x : '';
+	const arrowY = arrow?.y != null ? computedStaticOffset || arrow.y : '';
+	const dValue =
+		d ||
+		'M0,0' +
+			(' H' + width) +
+			(' L' + (width - svgX) + ',' + (height - svgY)) +
+			(' Q' + width / 2 + ',' + height + ' ' + svgX + ',' + (height - svgY)) +
+			' Z';
+	const rotation: any = (
+		{
+			top: isCustomShape ? 'rotate(180deg)' : '',
+			left: isCustomShape ? 'rotate(90deg)' : 'rotate(-90deg)',
+			bottom: isCustomShape ? '' : 'rotate(180deg)',
+			right: isCustomShape ? 'rotate(-90deg)' : 'rotate(90deg)',
+		} as any
+	)[side];
+
+	return createElement(
+		'svg',
+		{
+			...rest,
+			'aria-hidden': true,
+			ref,
+			width: isCustomShape ? width : width + computedStrokeWidth,
+			height: width,
+			viewBox: '0 0 ' + width + ' ' + (height > width ? height : width),
+			style: {
+				position: 'absolute',
+				pointerEvents: 'none',
+				[xOffsetProp]: arrowX,
+				[yOffsetProp]: arrowY,
+				[side]:
+					isVerticalSide || isCustomShape
+						? '100%'
+						: 'calc(100% - ' + computedStrokeWidth / 2 + 'px)',
+				transform: [rotation, transform].filter((t) => !!t).join(' '),
+				...restStyle,
+			},
+		},
+		computedStrokeWidth > 0 &&
+			createElement('path', {
+				'clip-path': 'url(#' + clipPathId + ')',
+				fill: 'none',
+				stroke,
+				'stroke-width': computedStrokeWidth + (d ? 0 : 1),
+				d: dValue,
+			}),
+		createElement('path', {
+			stroke: computedStrokeWidth && !d ? rest.fill : 'none',
+			d: dValue,
+		}),
+		createElement(
+			'clipPath',
+			{ id: clipPathId },
+			createElement('rect', {
+				x: -halfStrokeWidth,
+				y: halfStrokeWidth * (isCustomShape ? -1 : 1),
+				width: width + computedStrokeWidth,
+				height: width,
+			}),
+		),
+	);
+}