@vitus-labs/elements 2.6.2 → 2.7.0

package/lib/index.d.ts

@@ -9,8 +9,7 @@ type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
 type InnerRef = ForwardedRef<any>;
-type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
-type Css = CssCallback | ReturnType<typeof config.css> | string;
+type Css = ((css: typeof config.css) => ReturnType<typeof css>) | ReturnType<typeof config.css> | string;
 type Content = Parameters<typeof render>['0'];
 type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block';
 type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block';
@@ -296,7 +295,7 @@ type VLElement<P extends Record<string, unknown> = {}> = ((props: Props & P & {
 }) => ReactElement | null) & VLStatic;
 //#endregion
 //#region src/Element/component.d.ts
-declare const Component: VLElement;
+declare const MemoComponent: VLElement;
 //#endregion
 //#region src/helpers/Iterator/types.d.ts
 type MaybeNull = undefined | null;
@@ -447,7 +446,7 @@ interface Context {
   setBlocked: () => void;
   setUnblocked: () => void;
 }
-declare const Component$2: FC<Context & {
+declare const Component$1: FC<Context & {
   children: ReactNode;
 }>;
 //#endregion
@@ -634,7 +633,7 @@ type Props$3 = {
    */
   contentRefName?: string;
 } & UseOverlayProps;
-declare const Component$1: VLComponent<Props$3>;
+declare const Component: VLComponent<Props$3>;
 //#endregion
 //#region src/Portal/component.d.ts
 interface Props$4 {
@@ -652,7 +651,7 @@ interface Props$4 {
    */
   tag?: string;
 }
-declare const Component$3: VLComponent<Props$4>;
+declare const Component$2: VLComponent<Props$4>;
 //#endregion
 //#region src/Text/component.d.ts
 type Props$5 = Partial<{
@@ -677,7 +676,7 @@ type Props$5 = Partial<{
    */
   css: ExtendCss;
 }>;
-declare const Component$4: VLComponent<Props$5> & {
+declare const Component$3: VLComponent<Props$5> & {
   isText?: true;
 };
 //#endregion
@@ -696,7 +695,7 @@ interface Props$6 {
    */
   style?: Record<string, unknown>;
 }
-declare const Component$5: VLComponent<Props$6>;
+declare const Component$4: VLComponent<Props$6>;
 //#endregion
-export { type AlignX, type AlignY, type Content, type ContentBoolean, type Direction, Component as Element, type Props as ElementProps, type ElementType, type ExtendCss, type ExtendedProps, type InnerRef, type Props$1 as IteratorProps, _default as List, type Props$2 as ListProps, type ObjectValue, Component$1 as Overlay, type Props$3 as OverlayProps, Component$2 as OverlayProvider, Component$3 as Portal, type Props$4 as PortalProps, type PropsCallback, Provider, type Responsive, type ResponsiveBoolType, Component$4 as Text, type Props$5 as TextProps, type UseOverlayProps, Component$5 as Util, type Props$6 as UtilProps, type VLStatic, useOverlay };
+export { type AlignX, type AlignY, type Content, type ContentBoolean, type Direction, MemoComponent as Element, type Props as ElementProps, type ElementType, type ExtendCss, type ExtendedProps, type InnerRef, type Props$1 as IteratorProps, _default as List, type Props$2 as ListProps, type ObjectValue, Component as Overlay, type Props$3 as OverlayProps, Component$1 as OverlayProvider, Component$2 as Portal, type Props$4 as PortalProps, type PropsCallback, Provider, type Responsive, type ResponsiveBoolType, Component$3 as Text, type Props$5 as TextProps, type UseOverlayProps, Component$4 as Util, type Props$6 as UtilProps, type VLStatic, useOverlay };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -22,10 +22,7 @@ const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 * fill remaining space between before and after.
 */
 const { styled: styled$2, css: css$2, component: component$1 } = config;
-const equalColsCSS = `
-  flex: 1;
-`;
-const typeContentCSS = `
+const FLEX_1 = `
   flex: 1;
 `;
 const gapDimensions = {
@@ -57,7 +54,7 @@ const styles$2 = ({ css, theme: t, rootSize }) => css`
 	alignY: t.alignY
 })};
 
-  ${t.equalCols && equalColsCSS};
+  ${t.equalCols && FLEX_1};
 
   ${t.gap && t.contentType && calculateGap({
 	direction: t.parentDirection,
@@ -74,7 +71,7 @@ const StyledComponent = styled$2(component$1)`
   align-self: stretch;
   flex-wrap: wrap;
 
-  ${({ $contentType }) => $contentType === "content" && typeContentCSS};
+  ${({ $contentType }) => $contentType === "content" && FLEX_1};
 
   ${makeItResponsive({
 	key: "$element",
@@ -125,11 +122,11 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 		children: render(children)
 	});
 };
-var component_default = memo(Component$9);
+var component_default$1 = memo(Component$9);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default;
+var Content_default = component_default$1;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -216,23 +213,34 @@ const isWebFixNeeded = (tag) => {
 * (parent + child Styled) because these HTML elements do not natively
 * support `display: flex` consistently across browsers.
 */
-const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : {};
+const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : null;
 const Component$8 = ({ children, ref, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }) => {
-	const COMMON_PROPS = {
-		...props,
-		...DEV_PROPS,
-		ref,
-		as: tag
-	};
 	const needsFix = !props.dangerouslySetInnerHTML && isWebFixNeeded(tag);
-	const normalElement = useMemo(() => ({
-		block,
-		direction,
-		alignX,
-		alignY,
-		equalCols,
-		extraStyles: extendCss
-	}), [
+	const $element = useMemo(() => {
+		if (!needsFix) return {
+			block,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			extraStyles: extendCss
+		};
+		return {
+			parent: {
+				parentFix: true,
+				block,
+				extraStyles: extendCss
+			},
+			child: {
+				childFix: true,
+				direction,
+				alignX,
+				alignY,
+				equalCols
+			}
+		};
+	}, [
+		needsFix,
 		block,
 		direction,
 		alignX,
@@ -240,44 +248,35 @@ const Component$8 = ({ children, ref, tag, block, extendCss, direction, alignX,
 		equalCols,
 		extendCss
 	]);
-	const parentFixElement = useMemo(() => ({
-		parentFix: true,
-		block,
-		extraStyles: extendCss
-	}), [block, extendCss]);
-	const childFixElement = useMemo(() => ({
-		childFix: true,
-		direction,
-		alignX,
-		alignY,
-		equalCols
-	}), [
-		direction,
-		alignX,
-		alignY,
-		equalCols
-	]);
 	if (!needsFix || false) return /* @__PURE__ */ jsx(styled_default$1, {
-		...COMMON_PROPS,
-		$element: normalElement,
+		...props,
+		...DEV_PROPS,
+		ref,
+		as: tag,
+		$element,
 		children
 	});
 	const asTag = isInline ? "span" : "div";
+	const fix = $element;
 	return /* @__PURE__ */ jsx(styled_default$1, {
-		...COMMON_PROPS,
-		$element: parentFixElement,
+		...props,
+		...DEV_PROPS,
+		ref,
+		as: tag,
+		$element: fix.parent,
 		children: /* @__PURE__ */ jsx(styled_default$1, {
 			as: asTag,
 			$childFix: true,
-			$element: childFixElement,
+			$element: fix.child,
 			children
 		})
 	});
 };
+var component_default = memo(Component$8);
 
 //#endregion
 //#region src/helpers/Wrapper/index.ts
-var Wrapper_default = Component$8;
+var Wrapper_default = component_default;
 
 //#endregion
 //#region src/Element/constants.ts
@@ -333,7 +332,6 @@ const EMPTY_ELEMENTS = {
 	hr: true,
 	img: true,
 	input: true,
-	keygen: true,
 	link: true,
 	textarea: true,
 	source: true,
@@ -367,22 +365,22 @@ const getShouldBeEmpty = (tag) => {
 const equalize = (el, direction) => {
 	const beforeEl = el.firstElementChild;
 	const afterEl = el.lastElementChild;
-	if (beforeEl && afterEl && beforeEl !== afterEl) {
-		const type = direction === "rows" ? "height" : "width";
-		const prop = type === "height" ? "offsetHeight" : "offsetWidth";
-		const beforeSize = beforeEl[prop];
-		const afterSize = afterEl[prop];
-		if (Number.isInteger(beforeSize) && Number.isInteger(afterSize)) {
-			const maxSize = `${Math.max(beforeSize, afterSize)}px`;
-			beforeEl.style[type] = maxSize;
-			afterEl.style[type] = maxSize;
-		}
-	}
+	if (!beforeEl || !afterEl || beforeEl === afterEl) return;
+	const type = direction === "rows" ? "height" : "width";
+	const prop = type === "height" ? "offsetHeight" : "offsetWidth";
+	const beforeSize = beforeEl[prop];
+	const afterSize = afterEl[prop];
+	if (!Number.isInteger(beforeSize) || !Number.isInteger(afterSize)) return;
+	if (beforeSize === afterSize && beforeSize > 0) return;
+	const maxSize = `${Math.max(beforeSize, afterSize)}px`;
+	beforeEl.style[type] = maxSize;
+	afterEl.style[type] = maxSize;
 };
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
 const defaultAlignY = "center";
+const AS_RESET = { as: void 0 };
 const Component$7 = ({ innerRef, ref, tag, label, content, children, beforeContent, afterContent, equalBeforeAfter, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }) => {
 	const shouldBeEmpty = !!props.dangerouslySetInnerHTML || getShouldBeEmpty(tag);
 	const isSimpleElement = !beforeContent && !afterContent;
@@ -415,11 +413,14 @@ const Component$7 = ({ innerRef, ref, tag, label, content, children, beforeConte
 	]);
 	const equalizeRef = useRef(null);
 	const externalRef = ref ?? innerRef;
+	const latestExternalRef = useRef(externalRef);
+	latestExternalRef.current = externalRef;
 	const mergedRef = useCallback((node) => {
 		equalizeRef.current = node;
-		if (typeof externalRef === "function") externalRef(node);
-		else if (externalRef != null) externalRef.current = node;
-	}, [externalRef]);
+		const r = latestExternalRef.current;
+		if (typeof r === "function") r(node);
+		else if (r != null) r.current = node;
+	}, []);
 	useLayoutEffect(() => {
 		if (!equalBeforeAfter || !beforeContent || !afterContent) return;
 		const node = equalizeRef.current;
@@ -435,7 +436,8 @@ const Component$7 = ({ innerRef, ref, tag, label, content, children, beforeConte
 		afterContent,
 		direction
 	]);
-	const WRAPPER_PROPS = {
+	if (shouldBeEmpty) return /* @__PURE__ */ jsx(Wrapper_default, {
+		...props,
 		ref: mergedRef,
 		extendCss: css,
 		tag,
@@ -443,16 +445,19 @@ const Component$7 = ({ innerRef, ref, tag, label, content, children, beforeConte
 		direction: wrapperDirection,
 		alignX: wrapperAlignX,
 		alignY: wrapperAlignY,
-		as: void 0
-	};
-	if (shouldBeEmpty) return /* @__PURE__ */ jsx(Wrapper_default, {
-		...props,
-		...WRAPPER_PROPS
+		...AS_RESET
 	});
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...props,
-		...WRAPPER_PROPS,
+		ref: mergedRef,
+		extendCss: css,
+		tag,
+		block,
+		direction: wrapperDirection,
+		alignX: wrapperAlignX,
+		alignY: wrapperAlignY,
 		isInline,
+		...AS_RESET,
 		children: [
 			beforeContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -493,13 +498,14 @@ const Component$7 = ({ innerRef, ref, tag, label, content, children, beforeConte
 	});
 };
 const name$5 = `${PKG_NAME}/Element`;
-Component$7.displayName = name$5;
-Component$7.pkgName = PKG_NAME;
-Component$7.VITUS_LABS__COMPONENT = name$5;
+const MemoComponent = memo(Component$7);
+MemoComponent.displayName = name$5;
+MemoComponent.pkgName = PKG_NAME;
+MemoComponent.VITUS_LABS__COMPONENT = name$5;
 
 //#endregion
 //#region src/Element/index.ts
-var Element_default = Component$7;
+var Element_default = MemoComponent;
 
 //#endregion
 //#region src/helpers/Iterator/component.tsx
@@ -662,12 +668,13 @@ var Iterator_default = Iterator;
 * is wrapped in an Element that receives all non-iterator props (e.g.,
 * layout, alignment, css), allowing the list to be styled as a single block.
 */
+const RESERVED_PROPS_SET = new Set(Iterator_default.RESERVED_PROPS);
 const Component$5 = ({ rootElement = false, ref, ...props }) => {
 	const renderedList = /* @__PURE__ */ jsx(Iterator_default, { ...pick(props, Iterator_default.RESERVED_PROPS) });
 	if (!rootElement) return renderedList;
 	return /* @__PURE__ */ jsx(Element_default, {
 		ref,
-		...omit(props, Iterator_default.RESERVED_PROPS),
+		...omit(props, RESERVED_PROPS_SET),
 		children: renderedList
 	});
 };
@@ -746,6 +753,11 @@ const Component = ({ children, blocked, setBlocked, setUnblocked }) => {
 * the final viewport-relative position and the alignment that was actually used
 * (which may differ from the requested alignment when an edge would be clipped).
 */
+const DROPDOWN_TYPES = new Set([
+	"dropdown",
+	"tooltip",
+	"popover"
+]);
 const sel = (cond, a, b) => cond ? a : b;
 const devWarn = (msg) => {
 	if (!IS_DEVELOPMENT) return;
@@ -871,11 +883,7 @@ const adjustForAncestor = (pos, ancestor) => {
 	return result;
 };
 const computePosition = (type, align, alignX, alignY, offsetX, offsetY, triggerEl, contentEl, ancestorOffset) => {
-	const isDropdown = [
-		"dropdown",
-		"tooltip",
-		"popover"
-	].includes(type);
+	const isDropdown = DROPDOWN_TYPES.has(type);
 	if (isDropdown && (!triggerEl || !contentEl)) {
 		devWarn(`[@vitus-labs/elements] Overlay (${type}): ${triggerEl ? "contentRef" : "triggerRef"} is not attached. Position cannot be calculated without both refs.`);
 		return { pos: {} };
@@ -934,6 +942,80 @@ const useEscapeKey = (enabled, active, blocked, hide) => {
 	]);
 };
 
+//#endregion
+//#region src/Overlay/useFocusTrap.ts
+const FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"video[controls]",
+	"audio[controls]",
+	"summary",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+const isTabbable = (el) => el.getAttribute("aria-disabled") !== "true";
+const useFocusTrap = (ref, enabled = true, options) => {
+	const autoFocus = options?.autoFocus !== false;
+	useEffect(() => {
+		if (!enabled) return void 0;
+		const container = ref.current;
+		if (!container) return void 0;
+		let focusable = [];
+		const refresh = () => {
+			const all = container.querySelectorAll(FOCUSABLE);
+			const result = [];
+			for (let i = 0; i < all.length; i++) {
+				const el = all[i];
+				if (el && isTabbable(el)) result.push(el);
+			}
+			focusable = result;
+		};
+		refresh();
+		const observer = new MutationObserver(refresh);
+		observer.observe(container, {
+			childList: true,
+			subtree: true
+		});
+		const prevFocus = document.activeElement;
+		if (autoFocus) if (focusable.length > 0) focusable[0].focus();
+		else {
+			if (container.tabIndex < 0) container.tabIndex = -1;
+			container.focus();
+		}
+		const handler = (e) => {
+			if (e.key !== "Tab" || focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = document.activeElement;
+			if (active && !container.contains(active)) {
+				e.preventDefault();
+				first.focus();
+				return;
+			}
+			if (e.shiftKey && active === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && active === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", handler);
+		return () => {
+			observer.disconnect();
+			document.removeEventListener("keydown", handler);
+			if (autoFocus && prevFocus && typeof prevFocus.focus === "function") prevFocus.focus();
+		};
+	}, [
+		ref,
+		enabled,
+		autoFocus
+	]);
+};
+
 //#endregion
 //#region src/Overlay/useHoverListeners.ts
 /**
@@ -1002,50 +1084,49 @@ const useHoverListeners = ({ triggerRef, contentRef, isContentLoaded, active, bl
 	]);
 };
 
+//#endregion
+//#region src/Overlay/useScrollLock.ts
+let lockCount = 0;
+let originalOverflow;
+const useScrollLock = (enabled) => {
+	useEffect(() => {
+		if (!enabled) return void 0;
+		if (lockCount === 0) originalOverflow = document.body.style.overflow;
+		lockCount++;
+		document.body.style.overflow = "hidden";
+		return () => {
+			lockCount--;
+			if (lockCount === 0) {
+				document.body.style.overflow = originalOverflow ?? "";
+				originalOverflow = void 0;
+			}
+		};
+	}, [enabled]);
+};
+
 //#endregion
 //#region src/Overlay/useScrollReposition.ts
-let modalOverflowCount = 0;
-/**
-* Window-level scroll/resize listeners that reposition active overlays and
-* re-evaluate close-on-scroll behavior. Also manages the body overflow lock
-* for modal overlays (refcounted across nested modals).
-*/
-const useWindowReposition = (active, type, handleContentPosition, handleVisibility) => {
+const useWindowReposition = (active, handleContentPosition, handleVisibility) => {
 	useEffect(() => {
 		if (!active) return void 0;
-		const shouldSetOverflow = type === "modal";
 		const onScroll = (e) => {
 			handleContentPosition();
 			handleVisibility(e);
 		};
-		if (shouldSetOverflow) {
-			modalOverflowCount++;
-			if (modalOverflowCount === 1) document.body.style.overflow = "hidden";
-		}
 		window.addEventListener("resize", handleContentPosition);
 		window.addEventListener("scroll", onScroll, { passive: true });
 		return () => {
 			handleContentPosition.cancel();
 			handleVisibility.cancel();
-			if (shouldSetOverflow) {
-				modalOverflowCount--;
-				if (modalOverflowCount === 0) document.body.style.overflow = "";
-			}
 			window.removeEventListener("resize", handleContentPosition);
 			window.removeEventListener("scroll", onScroll);
 		};
 	}, [
 		active,
-		type,
 		handleContentPosition,
 		handleVisibility
 	]);
 };
-/**
-* Same as `useWindowReposition` but for a custom scrollable ancestor.
-* Locks the parent's overflow while the overlay is active (unless hover-driven,
-* which expects the parent to keep scrolling).
-*/
 const useParentContainerReposition = (active, parentContainer, closeOn, handleContentPosition, handleVisibility) => {
 	useEffect(() => {
 		if (!active || !parentContainer) return void 0;
@@ -1067,8 +1148,8 @@ const useParentContainerReposition = (active, parentContainer, closeOn, handleCo
 		handleVisibility
 	]);
 };
-const useScrollReposition = ({ active, type, parentContainer, closeOn, handleContentPosition, handleVisibility }) => {
-	useWindowReposition(active, type, handleContentPosition, handleVisibility);
+const useScrollReposition = ({ active, parentContainer, closeOn, handleContentPosition, handleVisibility }) => {
+	useWindowReposition(active, handleContentPosition, handleVisibility);
 	useParentContainerReposition(active, parentContainer, closeOn, handleContentPosition, handleVisibility);
 };
 
@@ -1089,6 +1170,7 @@ const CLICK_CLOSE_KINDS = new Set([
 	"clickOnTrigger",
 	"clickOutsideContent"
 ]);
+const isNodeOrChildOf = (node, target) => !!(node && target && (node.contains(target) || target === node));
 const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type = "dropdown", position = "fixed", align = "bottom", alignX = "left", alignY = "bottom", offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = true, hoverDelay = 100, disabled, onOpen, onClose } = {}) => {
 	const { rootSize } = useContext(context);
 	const ctx = useOverlayContext();
@@ -1100,7 +1182,6 @@ const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type
 	const [active, setActive] = useState(isOpen);
 	const triggerRef = useRef(null);
 	const contentRef = useRef(null);
-	const prevFocusRef = useRef(null);
 	const setBlocked = useCallback(() => setBlockedCount((c) => c + 1), []);
 	const setUnblocked = useCallback(() => setBlockedCount((c) => Math.max(0, c - 1)), []);
 	const showContent = useCallback(() => setActive(true), []);
@@ -1151,13 +1232,11 @@ const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type
 	const setContentPosition = useCallback(() => {
 		assignContentPosition(calculateContentPosition());
 	}, [assignContentPosition, calculateContentPosition]);
-	const isNodeOrChild = useCallback((ref) => (e) => {
-		if (e?.target && ref.current) return ref.current.contains(e.target) || e.target === ref.current;
-		return false;
-	}, []);
+	const isTriggerOrChild = useCallback((e) => isNodeOrChildOf(triggerRef.current, e?.target), []);
+	const isContentOrChild = useCallback((e) => isNodeOrChildOf(contentRef.current, e?.target), []);
 	const handleVisibilityByEventType = useCallback((e) => {
 		if (blocked || disabled) return;
-		processVisibilityEvent(e, active, openOn, closeOn, isNodeOrChild(triggerRef), isNodeOrChild(contentRef), showContent, hideContent);
+		processVisibilityEvent(e, active, openOn, closeOn, isTriggerOrChild, isContentOrChild, showContent, hideContent);
 	}, [
 		active,
 		blocked,
@@ -1166,7 +1245,8 @@ const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type
 		closeOn,
 		hideContent,
 		showContent,
-		isNodeOrChild
+		isTriggerOrChild,
+		isContentOrChild
 	]);
 	const latestSetContentPosition = useRef(setContentPosition);
 	latestSetContentPosition.current = setContentPosition;
@@ -1195,50 +1275,35 @@ const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type
 		isContentLoaded,
 		setContentPosition
 	]);
+	const latestOnOpen = useRef(onOpen);
+	latestOnOpen.current = onOpen;
+	const latestOnClose = useRef(onClose);
+	latestOnClose.current = onClose;
 	const prevActiveRef = useRef(false);
 	useEffect(() => {
 		const wasActive = prevActiveRef.current;
 		prevActiveRef.current = active;
 		if (active && !wasActive) {
-			onOpen?.();
+			latestOnOpen.current?.();
 			ctx.setBlocked?.();
 		} else if (!active && wasActive) {
 			setContentLoaded(false);
-			onClose?.();
+			latestOnClose.current?.();
 			ctx.setUnblocked?.();
 		} else if (!active) setContentLoaded(false);
 		return () => {
 			if (active) {
-				onClose?.();
+				latestOnClose.current?.();
 				ctx.setUnblocked?.();
 			}
 		};
-	}, [
-		active,
-		ctx,
-		onClose,
-		onOpen
-	]);
-	useEffect(() => {
-		if (type !== "modal") return;
-		if (active && isContentLoaded && contentRef.current) {
-			prevFocusRef.current = document.activeElement;
-			if (contentRef.current.tabIndex < 0) contentRef.current.tabIndex = -1;
-			contentRef.current.focus();
-		}
-		if (!active && prevFocusRef.current) {
-			prevFocusRef.current.focus();
-			prevFocusRef.current = null;
-		}
-	}, [
-		active,
-		isContentLoaded,
-		type
-	]);
+	}, [active, ctx]);
+	const modalActive = type === "modal" && active && isContentLoaded;
+	useFocusTrap(contentRef, modalActive);
+	useScrollLock(modalActive);
 	useEscapeKey(closeOnEsc, active, blocked, hideContent);
 	useScrollReposition({
 		active,
-		type,
 		parentContainer,
 		closeOn,
 		handleContentPosition,
@@ -1246,8 +1311,8 @@ const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type
 	});
 	useEffect(() => {
 		if (blocked || disabled) return void 0;
-		if (openOn === "click" || CLICK_CLOSE_KINDS.has(closeOn)) window.addEventListener("click", handleClick);
-		return () => window.removeEventListener("click", handleClick);
+		if (openOn === "click" || CLICK_CLOSE_KINDS.has(closeOn)) document.addEventListener("click", handleClick);
+		return () => document.removeEventListener("click", handleClick);
 	}, [
 		openOn,
 		closeOn,
@@ -1301,44 +1366,42 @@ const Component$3 = ({ children, trigger, DOMLocation, triggerRefName = "ref", c
 	const { active, triggerRef, contentRef, showContent, hideContent, align, alignX, alignY, Provider, ...ctx } = useOverlay(props);
 	const { openOn, closeOn, type } = props;
 	const contentId = useId();
-	const passHandlers = useMemo(() => openOn === "manual" || closeOn === "manual" || closeOn === "clickOutsideContent", [openOn, closeOn]);
-	const ariaHasPopup = useMemo(() => {
-		switch (type) {
-			case "modal": return "dialog";
-			case "tooltip": return "true";
-			default: return "menu";
-		}
-	}, [type]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [render(trigger, {
+	const passHandlers = openOn === "manual" || closeOn === "manual" || closeOn === "clickOutsideContent";
+	const ariaHasPopup = type === "modal" ? "dialog" : type === "tooltip" ? "true" : "menu";
+	const triggerProps = {
 		[triggerRefName]: triggerRef,
 		active,
 		"aria-expanded": active,
 		"aria-haspopup": ariaHasPopup,
-		"aria-controls": active ? contentId : void 0,
-		...passHandlers ? {
-			showContent,
-			hideContent
-		} : {}
-	}), IS_BROWSER && active && /* @__PURE__ */ jsx(Portal_default, {
-		DOMLocation,
-		children: /* @__PURE__ */ jsx(Provider, {
-			...ctx,
-			children: render(children, {
-				[contentRefName]: contentRef,
-				id: contentId,
-				role: type === "modal" ? "dialog" : void 0,
-				"aria-modal": type === "modal" ? true : void 0,
-				active,
-				align,
-				alignX,
-				alignY,
-				...passHandlers ? {
-					showContent,
-					hideContent
-				} : {}
+		"aria-controls": active ? contentId : void 0
+	};
+	if (passHandlers) {
+		triggerProps.showContent = showContent;
+		triggerProps.hideContent = hideContent;
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [render(trigger, triggerProps), IS_BROWSER && active && (() => {
+		const contentProps = {
+			[contentRefName]: contentRef,
+			id: contentId,
+			role: type === "modal" ? "dialog" : void 0,
+			"aria-modal": type === "modal" ? true : void 0,
+			active,
+			align,
+			alignX,
+			alignY
+		};
+		if (passHandlers) {
+			contentProps.showContent = showContent;
+			contentProps.hideContent = hideContent;
+		}
+		return /* @__PURE__ */ jsx(Portal_default, {
+			DOMLocation,
+			children: /* @__PURE__ */ jsx(Provider, {
+				...ctx,
+				children: render(children, contentProps)
 			})
-		})
-	})] });
+		});
+	})()] });
 };
 const name$2 = `${PKG_NAME}/Overlay`;
 Component$3.displayName = name$2;
@@ -1405,7 +1468,7 @@ var Text_default = Component$2;
 * helper to clone children with the merged props.
 */
 const Component$1 = ({ children, className, style }) => {
-	const mergedClasses = useMemo(() => Array.isArray(className) ? className.join(" ") : className, [className]);
+	const mergedClasses = Array.isArray(className) ? className.join(" ") : className;
 	const finalProps = {};
 	if (style) finalProps.style = style;
 	if (mergedClasses) finalProps.className = mergedClasses;

package/lib/vitus-labs-elements.native.js

@@ -21,10 +21,7 @@ const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 * fill remaining space between before and after.
 */
 const { styled: styled$2, css: css$2, component: component$1 } = config;
-const equalColsCSS = `
-  flex: 1;
-`;
-const typeContentCSS = `
+const FLEX_1 = `
   flex: 1;
 `;
 const gapDimensions = {
@@ -56,7 +53,7 @@ const styles$2 = ({ css, theme: t, rootSize }) => css`
 	alignY: t.alignY
 })};
 
-  ${t.equalCols && equalColsCSS};
+  ${t.equalCols && FLEX_1};
 
   ${t.gap && t.contentType && calculateGap({
 	direction: t.parentDirection,
@@ -73,7 +70,7 @@ const StyledComponent = styled$2(component$1)`
   align-self: stretch;
   flex-wrap: wrap;
 
-  ${({ $contentType }) => $contentType === "content" && typeContentCSS};
+  ${({ $contentType }) => $contentType === "content" && FLEX_1};
 
   ${makeItResponsive({
 	key: "$element",
@@ -124,11 +121,11 @@ const Component$6 = ({ contentType, tag, parentDirection, direction, alignX, ali
 		children: render(children)
 	});
 };
-var component_default = memo(Component$6);
+var component_default$1 = memo(Component$6);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default;
+var Content_default = component_default$1;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -190,22 +187,19 @@ var styled_default$1 = styled$1(component)`
 * (parent + child Styled) because these HTML elements do not natively
 * support `display: flex` consistently across browsers.
 */
-const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : {};
+const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : null;
 const Component$5 = ({ children, ref, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }) => {
-	const COMMON_PROPS = {
-		...props,
-		...DEV_PROPS,
-		ref,
-		as: tag
-	};
-	const normalElement = useMemo(() => ({
-		block,
-		direction,
-		alignX,
-		alignY,
-		equalCols,
-		extraStyles: extendCss
-	}), [
+	const $element = useMemo(() => {
+		return {
+			block,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			extraStyles: extendCss
+		};
+	}, [
+		false,
 		block,
 		direction,
 		alignX,
@@ -213,33 +207,20 @@ const Component$5 = ({ children, ref, tag, block, extendCss, direction, alignX,
 		equalCols,
 		extendCss
 	]);
-	useMemo(() => ({
-		parentFix: true,
-		block,
-		extraStyles: extendCss
-	}), [block, extendCss]);
-	useMemo(() => ({
-		childFix: true,
-		direction,
-		alignX,
-		alignY,
-		equalCols
-	}), [
-		direction,
-		alignX,
-		alignY,
-		equalCols
-	]);
 	return /* @__PURE__ */ jsx(styled_default$1, {
-		...COMMON_PROPS,
-		$element: normalElement,
+		...props,
+		...DEV_PROPS,
+		ref,
+		as: tag,
+		$element,
 		children
 	});
 };
+var component_default = memo(Component$5);
 
 //#endregion
 //#region src/helpers/Wrapper/index.ts
-var Wrapper_default = Component$5;
+var Wrapper_default = component_default;
 
 //#endregion
 //#region src/Element/component.tsx
@@ -255,6 +236,7 @@ const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
 const defaultAlignY = "center";
+const AS_RESET = { as: void 0 };
 const Component$4 = ({ innerRef, ref, tag, label, content, children, beforeContent, afterContent, equalBeforeAfter, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }) => {
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
@@ -286,18 +268,22 @@ const Component$4 = ({ innerRef, ref, tag, label, content, children, beforeConte
 	]);
 	const equalizeRef = useRef(null);
 	const externalRef = ref ?? innerRef;
+	const latestExternalRef = useRef(externalRef);
+	latestExternalRef.current = externalRef;
 	const mergedRef = useCallback((node) => {
 		equalizeRef.current = node;
-		if (typeof externalRef === "function") externalRef(node);
-		else if (externalRef != null) externalRef.current = node;
-	}, [externalRef]);
+		const r = latestExternalRef.current;
+		if (typeof r === "function") r(node);
+		else if (r != null) r.current = node;
+	}, []);
 	useLayoutEffect(() => {}, [
 		equalBeforeAfter,
 		beforeContent,
 		afterContent,
 		direction
 	]);
-	const WRAPPER_PROPS = {
+	return /* @__PURE__ */ jsxs(Wrapper_default, {
+		...props,
 		ref: mergedRef,
 		extendCss: css,
 		tag,
@@ -305,12 +291,8 @@ const Component$4 = ({ innerRef, ref, tag, label, content, children, beforeConte
 		direction: wrapperDirection,
 		alignX: wrapperAlignX,
 		alignY: wrapperAlignY,
-		as: void 0
-	};
-	return /* @__PURE__ */ jsxs(Wrapper_default, {
-		...props,
-		...WRAPPER_PROPS,
 		isInline,
+		...AS_RESET,
 		children: [
 			beforeContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -351,13 +333,14 @@ const Component$4 = ({ innerRef, ref, tag, label, content, children, beforeConte
 	});
 };
 const name$3 = `${PKG_NAME}/Element`;
-Component$4.displayName = name$3;
-Component$4.pkgName = PKG_NAME;
-Component$4.VITUS_LABS__COMPONENT = name$3;
+const MemoComponent = memo(Component$4);
+MemoComponent.displayName = name$3;
+MemoComponent.pkgName = PKG_NAME;
+MemoComponent.VITUS_LABS__COMPONENT = name$3;
 
 //#endregion
 //#region src/Element/index.ts
-var Element_default = Component$4;
+var Element_default = MemoComponent;
 
 //#endregion
 //#region src/helpers/Iterator/component.tsx
@@ -520,12 +503,13 @@ var Iterator_default = Iterator;
 * is wrapped in an Element that receives all non-iterator props (e.g.,
 * layout, alignment, css), allowing the list to be styled as a single block.
 */
+const RESERVED_PROPS_SET = new Set(Iterator_default.RESERVED_PROPS);
 const Component$2 = ({ rootElement = false, ref, ...props }) => {
 	const renderedList = /* @__PURE__ */ jsx(Iterator_default, { ...pick(props, Iterator_default.RESERVED_PROPS) });
 	if (!rootElement) return renderedList;
 	return /* @__PURE__ */ jsx(Element_default, {
 		ref,
-		...omit(props, Iterator_default.RESERVED_PROPS),
+		...omit(props, RESERVED_PROPS_SET),
 		children: renderedList
 	});
 };
@@ -590,7 +574,7 @@ var Text_default = Component$1;
 * helper to clone children with the merged props.
 */
 const Component = ({ children, className, style }) => {
-	const mergedClasses = useMemo(() => Array.isArray(className) ? className.join(" ") : className, [className]);
+	const mergedClasses = Array.isArray(className) ? className.join(" ") : className;
 	const finalProps = {};
 	if (style) finalProps.style = style;
 	if (mergedClasses) finalProps.className = mergedClasses;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/elements",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -49,6 +49,7 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
+    "bench": "bun benchmarks/render-bench.tsx",
     "lint": "biome check src/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
@@ -57,27 +58,27 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^2.6.2",
-    "@vitus-labs/unistyle": "^2.6.2",
+    "@vitus-labs/core": "^2.7.0",
+    "@vitus-labs/unistyle": "^2.7.0",
     "react": ">= 19",
-    "react-dom": ">= 19",
-    "react-native": ">= 0.76"
+    "react-dom": ">= 19"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
-    },
-    "react-native": {
-      "optional": true
     }
   },
   "devDependencies": {
+    "@vitus-labs/connector-styler": "workspace:*",
     "@vitus-labs/core": "workspace:*",
     "@vitus-labs/rocketstyle": "workspace:*",
-    "@vitus-labs/tools-rolldown": "2.3.1",
-    "@vitus-labs/tools-storybook": "2.3.1",
-    "@vitus-labs/tools-typescript": "2.3.1",
-    "@vitus-labs/unistyle": "workspace:*"
+    "@vitus-labs/styler": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.5.0",
+    "@vitus-labs/tools-storybook": "2.5.0",
+    "@vitus-labs/tools-typescript": "2.5.0",
+    "@vitus-labs/unistyle": "workspace:*",
+    "jsdom": "^29.1.1",
+    "tinybench": "^6.0.1"
   },
   "dependencies": {
     "react-is": "^19.2.4"