@vitus-labs/elements 2.0.0-alpha.2 → 2.0.0-alpha.20

package/lib/index.d.ts

@@ -1,8 +1,7 @@
 import { Provider } from "@vitus-labs/unistyle";
 import { BreakpointKeys, HTMLTags, HTMLTextTags, config, render } from "@vitus-labs/core";
 import * as react from "react";
-import { ComponentType, FC, ForwardRefExoticComponent, ForwardedRef, PropsWithoutRef, ReactNode, Ref, RefAttributes } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentType, FC, ForwardRefExoticComponent, ForwardedRef, PropsWithoutRef, ReactNode, RefAttributes } from "react";
 
 //#region src/types.d.ts
 type ExtractNullableKeys<T> = { [P in keyof T as T[P] extends null | undefined ? never : P]: T[P] };
@@ -10,7 +9,6 @@ type Id<T> = T extends infer U ? { [K in keyof U]: U[K] } : never;
 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 SimpleHoc<P extends Record<string, unknown> = {}> = (WrappedComponent: ComponentType<P>) => ComponentType<P>;
 type InnerRef = ForwardedRef<any>;
 type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
 type Css = CssCallback | ReturnType<typeof config.css> | string;
@@ -109,6 +107,14 @@ type Props = Partial<{
    * (have the same width or height)
    */
   equalCols: ResponsiveBoolType;
+  /**
+   * When true, measures the `beforeContent` and `afterContent` slot wrappers
+   * after render and sets both to the larger dimension so they match.
+   * Uses width for inline direction and height for rows direction.
+   * Useful for centering the main content when before/after slots have
+   * different intrinsic sizes.
+   */
+  equalBeforeAfter: boolean;
   /**
    * Defines a `gap` spacing between inner wrappers between `beforeContent` and `children`
    * and `children` and `afterContent`
@@ -270,195 +276,18 @@ type Props = Partial<{
    */
   css: ExtendCss;
   /**
-   * An additional prop for extending styling of the **content** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **content** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   contentCss: ExtendCss;
   /**
-   * An additional prop for extending styling of the **beforeContent** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **beforeContent** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   beforeContentCss: ExtendCss;
   /**
-   * An additional prop for extending styling of the **afterContent** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **afterContent** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   afterContentCss: ExtendCss;
 }>;
@@ -467,23 +296,6 @@ type VLElement<P extends Record<string, unknown> = {}> = ForwardRefExoticCompone
 //#region src/Element/component.d.ts
 declare const Component: VLElement;
 //#endregion
-//#region src/Element/withEqualSizeBeforeAfter.d.ts
-type Props$8 = Props & Partial<{
-  equalBeforeAfter: boolean;
-  ref: Ref<HTMLElement>;
-}>;
-declare const withEqualBeforeAfter: (WrappedComponent: any) => {
-  ({
-    equalBeforeAfter,
-    direction,
-    afterContent,
-    beforeContent,
-    ref,
-    ...rest
-  }: Props$8): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
 //#region src/helpers/Iterator/types.d.ts
 type MaybeNull = undefined | null;
 type TObj = Record<string, unknown>;
@@ -563,16 +375,6 @@ type ListProps = {
 type Props$2 = MergeTypes<[Props$1, ListProps]>;
 declare const Component$1: VLElement<Props$2>;
 //#endregion
-//#region src/List/withActiveState.d.ts
-type Key = string | number;
-interface Props$7 {
-  type?: 'single' | 'multi';
-  activeItemRequired?: boolean;
-  activeItems?: Key | (string | number)[];
-  itemProps?: Record<string, unknown> | ((props: Record<string, unknown>) => Record<string, unknown>);
-}
-declare const component: SimpleHoc<Props$7>;
-//#endregion
 //#region src/Overlay/context.d.ts
 interface Context {
   blocked: boolean;
@@ -820,5 +622,5 @@ interface Props$6 {
 }
 declare const Component$6: 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, Component$1 as List, type Props$2 as ListProps, type ObjectValue, Component$2 as Overlay, type Props$3 as OverlayProps, Component$3 as OverlayProvider, Component$4 as Portal, type Props$4 as PortalProps, type PropsCallback, Provider, type Responsive, type ResponsiveBoolType, Component$5 as Text, type Props$5 as TextProps, type UseOverlayProps, Component$6 as Util, type Props$6 as UtilProps, type VLStatic, useOverlay, component as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+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, Component$1 as List, type Props$2 as ListProps, type ObjectValue, Component$2 as Overlay, type Props$3 as OverlayProps, Component$3 as OverlayProvider, Component$4 as Portal, type Props$4 as PortalProps, type PropsCallback, Provider, type Responsive, type ResponsiveBoolType, Component$5 as Text, type Props$5 as TextProps, type UseOverlayProps, Component$6 as Util, type Props$6 as UtilProps, type VLStatic, useOverlay };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -1,6 +1,6 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
 import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
 import { createPortal } from "react-dom";
@@ -21,7 +21,7 @@ const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 * equalCols flex distribution. The "content" slot gets `flex: 1` to
 * fill remaining space between before and after.
 */
-const { styled: styled$2, css: css$2, component: component$2 } = config;
+const { styled: styled$2, css: css$2, component: component$1 } = config;
 const equalColsCSS = `
   flex: 1;
 `;
@@ -67,7 +67,7 @@ const styles$2 = ({ css, theme: t, rootSize }) => css`
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
-const StyledComponent = styled$2(component$2)`
+const StyledComponent = styled$2(component$1)`
   ${`box-sizing: border-box;`};
 
   display: flex;
@@ -86,11 +86,22 @@ const StyledComponent = styled$2(component$2)`
 
 //#endregion
 //#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+/**
+* Memoized content area used inside Element to render one of the three
+* layout slots (before, content, after). Passes alignment, direction,
+* gap, and equalCols styling props to the underlying styled component.
+* Adds a `data-vl-element` attribute in development for debugging.
+*
+* Children are passed as raw content and rendered inside the memo boundary
+* via core `render()` — this lets React.memo skip re-renders when the
+* content reference is stable (common for component-type or string content).
+*/
+const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, children, ...props }) => {
+	const debugProps = IS_DEVELOPMENT ? { "data-vl-element": contentType } : {};
 	return /* @__PURE__ */ jsx(StyledComponent, {
 		as: tag,
 		$contentType: contentType,
-		$element: {
+		$element: useMemo(() => ({
 			contentType,
 			parentDirection,
 			direction,
@@ -99,16 +110,26 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 			equalCols,
 			gap,
 			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		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
@@ -119,7 +140,7 @@ var Content_default = component_default;
 * split flex behavior across two DOM nodes for button/fieldset/legend
 * elements where a single flex container is insufficient.
 */
-const { styled: styled$1, css: css$1, component: component$1 } = config;
+const { styled: styled$1, css: css$1, component } = config;
 const childFixCSS = `
   display: flex;
   flex: 1;
@@ -157,7 +178,7 @@ const styles$1 = ({ theme: t, css }) => css`
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
 const platformCSS = `box-sizing: border-box;`;
-var styled_default$1 = styled$1(component$1)`
+var styled_default$1 = styled$1(component)`
   position: relative;
   ${platformCSS};
 
@@ -208,36 +229,52 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 		ref,
 		as: tag
 	};
-	if (!(!props.dangerouslySetInnerHTML && isWebFixNeeded(tag)) || false) return /* @__PURE__ */ jsx(styled_default$1, {
+	const needsFix = !props.dangerouslySetInnerHTML && isWebFixNeeded(tag);
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		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: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		$element: normalElement,
 		children
 	});
 	const asTag = isInline ? "span" : "div";
 	return /* @__PURE__ */ jsx(styled_default$1, {
 		...COMMON_PROPS,
-		$element: {
-			parentFix: true,
-			block,
-			extraStyles: extendCss
-		},
+		$element: parentFixElement,
 		children: /* @__PURE__ */ jsx(styled_default$1, {
 			as: asTag,
 			$childFix: true,
-			$element: {
-				childFix: true,
-				direction,
-				alignX,
-				alignY,
-				equalCols
-			},
+			$element: childFixElement,
 			children
 		})
 	});
@@ -332,11 +369,26 @@ const getShouldBeEmpty = (tag) => {
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
 */
+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;
+		}
+	}
+};
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
 const defaultAlignY = "center";
-const Component$7 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, 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 }, ref) => {
+const Component$7 = forwardRef(({ innerRef, 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 }, ref) => {
 	const shouldBeEmpty = !!props.dangerouslySetInnerHTML || getShouldBeEmpty(tag);
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
@@ -366,8 +418,24 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
+	const equalizeRef = useRef(null);
+	const externalRef = ref ?? innerRef;
+	const mergedRef = useCallback((node) => {
+		equalizeRef.current = node;
+		if (typeof externalRef === "function") externalRef(node);
+		else if (externalRef != null) externalRef.current = node;
+	}, [externalRef]);
+	useLayoutEffect(() => {
+		if (!equalBeforeAfter || !beforeContent || !afterContent) return;
+		if (equalizeRef.current) equalize(equalizeRef.current, direction);
+	}, [
+		equalBeforeAfter,
+		beforeContent,
+		afterContent,
+		direction
+	]);
 	const WRAPPER_PROPS = {
-		ref: ref ?? innerRef,
+		ref: mergedRef,
 		extendCss: css,
 		tag,
 		block,
@@ -380,7 +448,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		...props,
 		...WRAPPER_PROPS
 	});
-	const contentRenderOutput = render(CHILDREN);
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...props,
 		...WRAPPER_PROPS,
@@ -396,9 +463,9 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: beforeContentAlignY,
 				equalCols,
 				gap,
-				children: render(beforeContent)
+				children: beforeContent
 			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
 				contentType: "content",
 				parentDirection: wrapperDirection,
@@ -407,7 +474,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols,
-				children: contentRenderOutput
+				children: CHILDREN
 			}),
 			afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -419,7 +486,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: afterContentAlignY,
 				equalCols,
 				gap,
-				children: render(afterContent)
+				children: afterContent
 			})
 		]
 	});
@@ -429,53 +496,6 @@ Component$7.displayName = name$5;
 Component$7.pkgName = PKG_NAME;
 Component$7.VITUS_LABS__COMPONENT = name$5;
 
-//#endregion
-//#region src/Element/withEqualSizeBeforeAfter.tsx
-/**
-* HOC that equalizes the dimensions of beforeContent and afterContent areas.
-* After render, it measures both DOM nodes via useLayoutEffect and sets the
-* larger dimension on both so they match. Uses width for inline direction
-* and height for rows direction. This is useful for centering the main
-* content when before/after slots have different intrinsic sizes.
-*/
-const types = {
-	height: "offsetHeight",
-	width: "offsetWidth"
-};
-const equalize = (beforeEl, afterEl, type) => {
-	const prop = types[type];
-	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;
-	}
-};
-const withEqualBeforeAfter = (WrappedComponent) => {
-	const displayName = WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
-	const Enhanced = ({ equalBeforeAfter, direction, afterContent, beforeContent, ref, ...rest }) => {
-		const internalRef = useRef(null);
-		useImperativeHandle(ref, () => internalRef.current);
-		useLayoutEffect(() => {
-			if (!equalBeforeAfter || !beforeContent || !afterContent) return;
-			if (!internalRef.current) return;
-			const el = internalRef.current;
-			const beforeEl = el.firstElementChild;
-			const afterEl = el.lastElementChild;
-			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			...rest,
-			afterContent,
-			beforeContent,
-			ref: internalRef
-		});
-	};
-	Enhanced.displayName = `withEqualSizeBeforeAfter(${displayName})`;
-	return Enhanced;
-};
-
 //#endregion
 //#region src/Element/index.ts
 var Element_default = Component$7;
@@ -633,12 +653,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$6), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx
@@ -663,108 +685,6 @@ Component$5.displayName = name$4;
 Component$5.pkgName = PKG_NAME;
 Component$5.VITUS_LABS__COMPONENT = name$4;
 
-//#endregion
-//#region src/List/withActiveState.tsx
-/**
-* HOC that adds single or multi selection state management to a list component.
-* Tracks which items are active via a scalar key (single mode) or a Map of
-* key-to-boolean entries (multi mode). Injects `itemProps` callback that
-* provides each item with `active`, `handleItemActive`, `toggleItemActive`,
-* and other selection helpers. Supports `activeItemRequired` to prevent
-* deselecting the last active item.
-*/
-const RESERVED_KEYS = [
-	"type",
-	"activeItems",
-	"itemProps",
-	"activeItemRequired"
-];
-const component = (WrappedComponent) => {
-	const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";
-	const Enhanced = (props) => {
-		const { type = "single", activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
-		const initActiveItems = () => {
-			if (type === "single") {
-				if (!Array.isArray(activeItems)) return activeItems;
-			} else if (type === "multi") {
-				const activeItemsHelper = Array.isArray(activeItems) ? activeItems : [activeItems];
-				return new Map(activeItemsHelper.map((id) => [id, true]));
-			}
-		};
-		const [innerActiveItems, setActiveItems] = useState(initActiveItems());
-		const countActiveItems = (data) => {
-			let result = 0;
-			data.forEach((value) => {
-				if (value) result += 1;
-			});
-			return result;
-		};
-		const updateItemState = (key) => {
-			if (type === "single") setActiveItems((prevState) => {
-				if (activeItemRequired) return key;
-				if (prevState === key) return void 0;
-				return key;
-			});
-			else if (type === "multi") setActiveItems((prevState) => {
-				const activeItems = new Map(prevState);
-				if (activeItemRequired && activeItems.get(key) && countActiveItems(activeItems) === 1) return activeItems;
-				activeItems.set(key, !activeItems.get(key));
-				return activeItems;
-			});
-			else setActiveItems(void 0);
-		};
-		const handleItemActive = (key) => {
-			updateItemState(key);
-		};
-		const updateAllItemsState = (status) => {
-			if (!status) setActiveItems(/* @__PURE__ */ new Map());
-		};
-		const setItemActive = (key) => {
-			updateItemState(key);
-		};
-		const unsetItemActive = (key) => {
-			updateItemState(key);
-		};
-		const toggleItemActive = (key) => {
-			updateItemState(key);
-		};
-		const unsetAllItemsActive = () => {
-			updateAllItemsState(false);
-		};
-		const isItemActive = (key) => {
-			if (!innerActiveItems) return false;
-			if (type === "single") return innerActiveItems === key;
-			if (type === "multi" && innerActiveItems instanceof Map) return !!innerActiveItems.get(key);
-			return false;
-		};
-		const attachMultipleProps = { unsetAllItemsActive };
-		const attachItemProps = (props) => {
-			const { key } = props;
-			return {
-				...typeof itemProps === "object" ? itemProps : itemProps(props),
-				active: isItemActive(key),
-				handleItemActive: () => handleItemActive(key),
-				setItemActive,
-				unsetItemActive,
-				toggleItemActive,
-				...type === "multi" ? attachMultipleProps : {}
-			};
-		};
-		useEffect(() => {
-			if (type === "single" && Array.isArray(activeItems)) {
-				if (process.env.NODE_ENV !== "production") console.warn("[@vitus-labs/elements] List/withActiveState: `activeItems` was passed as an array but `type` is \"single\". In single selection mode, `activeItems` should be a single key (string | number). The array value will be ignored.");
-			}
-		}, [type, activeItems]);
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			...rest,
-			itemProps: attachItemProps
-		});
-	};
-	Enhanced.RESERVED_KEYS = RESERVED_KEYS;
-	Enhanced.displayName = `@vitus-labs/elements/List/withActiveState(${displayName})`;
-	return Enhanced;
-};
-
 //#endregion
 //#region src/List/index.ts
 var List_default = Component$5;
@@ -1409,5 +1329,5 @@ Component$1.VITUS_LABS__COMPONENT = name;
 var Util_default = Component$1;
 
 //#endregion
-export { Element_default as Element, List_default as List, Overlay_default as Overlay, Component as OverlayProvider, Portal_default as Portal, Provider, Text_default as Text, Util_default as Util, useOverlay, component as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { Element_default as Element, List_default as List, Overlay_default as Overlay, Component as OverlayProvider, Portal_default as Portal, Provider, Text_default as Text, Util_default as Util, useOverlay };
 //# sourceMappingURL=index.js.map

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

@@ -1,6 +1,6 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
 import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
 import { createPortal } from "react-dom";
@@ -21,7 +21,7 @@ const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 * equalCols flex distribution. The "content" slot gets `flex: 1` to
 * fill remaining space between before and after.
 */
-const { styled: styled$2, css: css$2, component: component$2 } = config;
+const { styled: styled$2, css: css$2, component: component$1 } = config;
 const equalColsCSS = `
   flex: 1;
 `;
@@ -67,7 +67,7 @@ const styles$2 = ({ css, theme: t, rootSize }) => css`
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
-const StyledComponent = styled$2(component$2)`
+const StyledComponent = styled$2(component$1)`
   ${""};
 
   display: flex;
@@ -86,11 +86,22 @@ const StyledComponent = styled$2(component$2)`
 
 //#endregion
 //#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+/**
+* Memoized content area used inside Element to render one of the three
+* layout slots (before, content, after). Passes alignment, direction,
+* gap, and equalCols styling props to the underlying styled component.
+* Adds a `data-vl-element` attribute in development for debugging.
+*
+* Children are passed as raw content and rendered inside the memo boundary
+* via core `render()` — this lets React.memo skip re-renders when the
+* content reference is stable (common for component-type or string content).
+*/
+const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, children, ...props }) => {
+	const debugProps = IS_DEVELOPMENT ? { "data-vl-element": contentType } : {};
 	return /* @__PURE__ */ jsx(StyledComponent, {
 		as: tag,
 		$contentType: contentType,
-		$element: {
+		$element: useMemo(() => ({
 			contentType,
 			parentDirection,
 			direction,
@@ -99,16 +110,26 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 			equalCols,
 			gap,
 			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		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
@@ -119,7 +140,7 @@ var Content_default = component_default;
 * split flex behavior across two DOM nodes for button/fieldset/legend
 * elements where a single flex container is insufficient.
 */
-const { styled: styled$1, css: css$1, component: component$1 } = config;
+const { styled: styled$1, css: css$1, component } = config;
 const childFixCSS = `
   display: flex;
   flex: 1;
@@ -147,7 +168,7 @@ const styles$1 = ({ theme: t, css }) => css`
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
 const platformCSS = `display: flex;`;
-var styled_default$1 = styled$1(component$1)`
+var styled_default$1 = styled$1(component)`
   position: relative;
   ${platformCSS};
 
@@ -172,19 +193,47 @@ var styled_default$1 = styled$1(component$1)`
 */
 const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : {};
 const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(styled_default$1, {
+	const COMMON_PROPS = {
 		...props,
 		...DEV_PROPS,
 		ref,
-		as: tag,
-		$element: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		as: tag
+	};
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		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,
 		children
 	});
 });
@@ -203,11 +252,26 @@ var Wrapper_default = Component$8;
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
 */
+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;
+		}
+	}
+};
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
 const defaultAlignY = "center";
-const Component$7 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, 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 }, ref) => {
+const Component$7 = forwardRef(({ innerRef, 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 }, ref) => {
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
 	const isInline = false;
@@ -236,8 +300,24 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
+	const equalizeRef = useRef(null);
+	const externalRef = ref ?? innerRef;
+	const mergedRef = useCallback((node) => {
+		equalizeRef.current = node;
+		if (typeof externalRef === "function") externalRef(node);
+		else if (externalRef != null) externalRef.current = node;
+	}, [externalRef]);
+	useLayoutEffect(() => {
+		if (!equalBeforeAfter || !beforeContent || !afterContent) return;
+		if (equalizeRef.current) equalize(equalizeRef.current, direction);
+	}, [
+		equalBeforeAfter,
+		beforeContent,
+		afterContent,
+		direction
+	]);
 	const WRAPPER_PROPS = {
-		ref: ref ?? innerRef,
+		ref: mergedRef,
 		extendCss: css,
 		tag,
 		block,
@@ -246,7 +326,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY: wrapperAlignY,
 		as: void 0
 	};
-	const contentRenderOutput = render(CHILDREN);
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...props,
 		...WRAPPER_PROPS,
@@ -262,9 +341,9 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: beforeContentAlignY,
 				equalCols,
 				gap,
-				children: render(beforeContent)
+				children: beforeContent
 			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
 				contentType: "content",
 				parentDirection: wrapperDirection,
@@ -273,7 +352,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols,
-				children: contentRenderOutput
+				children: CHILDREN
 			}),
 			afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -285,7 +364,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: afterContentAlignY,
 				equalCols,
 				gap,
-				children: render(afterContent)
+				children: afterContent
 			})
 		]
 	});
@@ -295,53 +374,6 @@ Component$7.displayName = name$5;
 Component$7.pkgName = PKG_NAME;
 Component$7.VITUS_LABS__COMPONENT = name$5;
 
-//#endregion
-//#region src/Element/withEqualSizeBeforeAfter.tsx
-/**
-* HOC that equalizes the dimensions of beforeContent and afterContent areas.
-* After render, it measures both DOM nodes via useLayoutEffect and sets the
-* larger dimension on both so they match. Uses width for inline direction
-* and height for rows direction. This is useful for centering the main
-* content when before/after slots have different intrinsic sizes.
-*/
-const types = {
-	height: "offsetHeight",
-	width: "offsetWidth"
-};
-const equalize = (beforeEl, afterEl, type) => {
-	const prop = types[type];
-	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;
-	}
-};
-const withEqualBeforeAfter = (WrappedComponent) => {
-	const displayName = WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
-	const Enhanced = ({ equalBeforeAfter, direction, afterContent, beforeContent, ref, ...rest }) => {
-		const internalRef = useRef(null);
-		useImperativeHandle(ref, () => internalRef.current);
-		useLayoutEffect(() => {
-			if (!equalBeforeAfter || !beforeContent || !afterContent) return;
-			if (!internalRef.current) return;
-			const el = internalRef.current;
-			const beforeEl = el.firstElementChild;
-			const afterEl = el.lastElementChild;
-			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			...rest,
-			afterContent,
-			beforeContent,
-			ref: internalRef
-		});
-	};
-	Enhanced.displayName = `withEqualSizeBeforeAfter(${displayName})`;
-	return Enhanced;
-};
-
 //#endregion
 //#region src/Element/index.ts
 var Element_default = Component$7;
@@ -499,12 +531,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$6), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx
@@ -529,108 +563,6 @@ Component$5.displayName = name$4;
 Component$5.pkgName = PKG_NAME;
 Component$5.VITUS_LABS__COMPONENT = name$4;
 
-//#endregion
-//#region src/List/withActiveState.tsx
-/**
-* HOC that adds single or multi selection state management to a list component.
-* Tracks which items are active via a scalar key (single mode) or a Map of
-* key-to-boolean entries (multi mode). Injects `itemProps` callback that
-* provides each item with `active`, `handleItemActive`, `toggleItemActive`,
-* and other selection helpers. Supports `activeItemRequired` to prevent
-* deselecting the last active item.
-*/
-const RESERVED_KEYS = [
-	"type",
-	"activeItems",
-	"itemProps",
-	"activeItemRequired"
-];
-const component = (WrappedComponent) => {
-	const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";
-	const Enhanced = (props) => {
-		const { type = "single", activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
-		const initActiveItems = () => {
-			if (type === "single") {
-				if (!Array.isArray(activeItems)) return activeItems;
-			} else if (type === "multi") {
-				const activeItemsHelper = Array.isArray(activeItems) ? activeItems : [activeItems];
-				return new Map(activeItemsHelper.map((id) => [id, true]));
-			}
-		};
-		const [innerActiveItems, setActiveItems] = useState(initActiveItems());
-		const countActiveItems = (data) => {
-			let result = 0;
-			data.forEach((value) => {
-				if (value) result += 1;
-			});
-			return result;
-		};
-		const updateItemState = (key) => {
-			if (type === "single") setActiveItems((prevState) => {
-				if (activeItemRequired) return key;
-				if (prevState === key) return void 0;
-				return key;
-			});
-			else if (type === "multi") setActiveItems((prevState) => {
-				const activeItems = new Map(prevState);
-				if (activeItemRequired && activeItems.get(key) && countActiveItems(activeItems) === 1) return activeItems;
-				activeItems.set(key, !activeItems.get(key));
-				return activeItems;
-			});
-			else setActiveItems(void 0);
-		};
-		const handleItemActive = (key) => {
-			updateItemState(key);
-		};
-		const updateAllItemsState = (status) => {
-			if (!status) setActiveItems(/* @__PURE__ */ new Map());
-		};
-		const setItemActive = (key) => {
-			updateItemState(key);
-		};
-		const unsetItemActive = (key) => {
-			updateItemState(key);
-		};
-		const toggleItemActive = (key) => {
-			updateItemState(key);
-		};
-		const unsetAllItemsActive = () => {
-			updateAllItemsState(false);
-		};
-		const isItemActive = (key) => {
-			if (!innerActiveItems) return false;
-			if (type === "single") return innerActiveItems === key;
-			if (type === "multi" && innerActiveItems instanceof Map) return !!innerActiveItems.get(key);
-			return false;
-		};
-		const attachMultipleProps = { unsetAllItemsActive };
-		const attachItemProps = (props) => {
-			const { key } = props;
-			return {
-				...typeof itemProps === "object" ? itemProps : itemProps(props),
-				active: isItemActive(key),
-				handleItemActive: () => handleItemActive(key),
-				setItemActive,
-				unsetItemActive,
-				toggleItemActive,
-				...type === "multi" ? attachMultipleProps : {}
-			};
-		};
-		useEffect(() => {
-			if (type === "single" && Array.isArray(activeItems)) {
-				if (process.env.NODE_ENV !== "production") console.warn("[@vitus-labs/elements] List/withActiveState: `activeItems` was passed as an array but `type` is \"single\". In single selection mode, `activeItems` should be a single key (string | number). The array value will be ignored.");
-			}
-		}, [type, activeItems]);
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			...rest,
-			itemProps: attachItemProps
-		});
-	};
-	Enhanced.RESERVED_KEYS = RESERVED_KEYS;
-	Enhanced.displayName = `@vitus-labs/elements/List/withActiveState(${displayName})`;
-	return Enhanced;
-};
-
 //#endregion
 //#region src/List/index.ts
 var List_default = Component$5;
@@ -1273,5 +1205,5 @@ Component$1.VITUS_LABS__COMPONENT = name;
 var Util_default = Component$1;
 
 //#endregion
-export { Element_default as Element, List_default as List, Overlay_default as Overlay, Component as OverlayProvider, Portal_default as Portal, Provider, Text_default as Text, Util_default as Util, useOverlay, component as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { Element_default as Element, List_default as List, Overlay_default as Overlay, Component as OverlayProvider, Portal_default as Portal, Provider, Text_default as Text, Util_default as Util, useOverlay };
 //# sourceMappingURL=vitus-labs-elements.native.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/elements",
-  "version": "2.0.0-alpha.2+8004069",
+  "version": "2.0.0-alpha.20",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -61,15 +61,15 @@
     "react-dom": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.2+8004069",
-    "@vitus-labs/rocketstyle": "2.0.0-alpha.2+8004069",
+    "@vitus-labs/core": "2.0.0-alpha.20",
+    "@vitus-labs/rocketstyle": "2.0.0-alpha.20",
     "@vitus-labs/tools-rolldown": "^1.6.0",
     "@vitus-labs/tools-storybook": "^1.6.0",
     "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "2.0.0-alpha.2+8004069"
+    "@vitus-labs/unistyle": "2.0.0-alpha.20"
   },
   "dependencies": {
     "react-is": "^19.2.3"
   },
-  "gitHead": "80040697d7306c958055474e2581d1fcdab0deb9"
+  "gitHead": "4159928108bd65c6d0756ecf21430908c8b6804d"
 }