@vitus-labs/elements 2.1.0 → 2.2.0

package/lib/index.d.ts

@@ -1,7 +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, ReactElement, ReactNode } from "react";
+import { ComponentType, FC, ForwardRefExoticComponent, ForwardedRef, ReactElement, ReactNode, Ref } from "react";
 
 //#region src/types.d.ts
 type ExtractNullableKeys<T> = { [P in keyof T as T[P] extends null | undefined ? never : P]: T[P] };
@@ -318,48 +318,74 @@ type ExtendedProps = {
   even: boolean;
   position: number;
 };
-type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | ObjectValue, extendedProps: ExtendedProps) => TObj);
-type Props$1 = Partial<{
+/**
+ * Iterator over an array of strings/numbers. Each item is wrapped in
+ * `{ [valueName]: item }` and that object is what callbacks see + what's
+ * spread onto the rendered component.
+ */
+type SimpleProps<T extends SimpleValue> = {
+  data: Array<T | MaybeNull>; /** A React component to be rendered per item. */
+  component: ElementType;
   /**
-   * Valid React `children`
-   */
+   * Key under which each primitive value is exposed to `component` and
+   * callbacks. Defaults to `'children'` at runtime — i.e. the value is
+   * passed to the component as its children.
+   */
+  valueName?: string; /** Optional wrapper around each item. */
+  wrapComponent?: ElementType; /** Stable key per item (defaults to index). */
+  itemKey?: (item: T, index: number) => SimpleValue; /** Extra props merged onto the rendered component, optionally per-item. */
+  itemProps?: TObj | ((item: {
+    [k: string]: T;
+  }, ext: ExtendedProps) => TObj); /** Extra props merged onto the wrapper, optionally per-item. */
+  wrapProps?: TObj | ((item: {
+    [k: string]: T;
+  }, ext: ExtendedProps) => TObj);
+  children?: never;
+};
+/**
+ * Iterator over an array of objects. Each item is spread onto the rendered
+ * component as props. Per-item `component` overrides also work — when an
+ * item carries its own `component` field, the wrapper is bypassed.
+ */
+type ObjectProps<T extends ObjectValue> = {
+  data: Array<T | MaybeNull>; /** Default React component to be rendered per item (item-level `component` overrides). */
+  component: ElementType; /** `valueName` is meaningless when iterating objects — TS forbids it. */
+  valueName?: never; /** Optional wrapper around each item. */
+  wrapComponent?: ElementType; /** Stable key per item — pick a key from the item, or compute it. */
+  itemKey?: keyof T | ((item: T, index: number) => SimpleValue); /** Extra props merged onto the rendered component, optionally per-item. */
+  itemProps?: TObj | ((item: T, ext: ExtendedProps) => TObj); /** Extra props merged onto the wrapper, optionally per-item. */
+  wrapProps?: TObj | ((item: T, ext: ExtendedProps) => TObj);
+  children?: never;
+};
+/**
+ * Iterator over `children` — no `data`/`component`. Each child gets
+ * positional metadata via `itemProps` and an optional `wrapComponent`.
+ */
+type ChildrenProps = {
+  children: ReactNode;
+  data?: never;
+  component?: never;
+  valueName?: never;
+  itemKey?: never;
+  wrapComponent?: ElementType;
+  itemProps?: TObj | ((_: Record<string, never>, ext: ExtendedProps) => TObj);
+  wrapProps?: TObj | ((_: Record<string, never>, ext: ExtendedProps) => TObj);
+};
+type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | ObjectValue, extendedProps: ExtendedProps) => TObj);
+type LooseProps = Partial<{
   children: ReactNode;
-  /**
-   * Array of data passed to `component` prop
-   */
   data: Array<SimpleValue | ObjectValue | MaybeNull>;
-  /**
-   * A React component to be rendered within list
-   */
   component: ElementType;
-  /**
-   * Defines name of the prop to be passed to the iteration component
-   * when **data** prop is type of `string[]`, `number[]` or combination
-   * of both. Otherwise ignored.
-   */
   valueName: string;
-  /**
-   * A React component to be rendered within list. `wrapComponent`
-   * wraps `component`. Therefore it can be used to enhance the behavior
-   * of the list component
-   */
   wrapComponent: ElementType;
-  /**
-   * Extension of **item** `component` props to be passed
-   */
   itemProps: PropsCallback;
-  /**
-   * Extension of **item** `wrapComponent` props to be passed
-   */
-  wrapProps?: PropsCallback;
-  /**
-   * Extension of **item** `wrapComponent` props to be passed
-   */
-  itemKey?: keyof ObjectValue | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue);
+  wrapProps: PropsCallback;
+  itemKey: keyof ObjectValue | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue);
 }>;
+type Props$1<T = unknown> = unknown extends T ? LooseProps : T extends SimpleValue ? SimpleProps<T> : T extends ObjectValue ? ObjectProps<T> : ChildrenProps;
 //#endregion
 //#region src/List/component.d.ts
-type ListProps = {
+type ListOnly = {
   /**
    * A boolean value. When set to `false`, component returns `React.Fragment`
    * When set to `true`, component returns as the **root** element `Element`
@@ -369,14 +395,46 @@ type ListProps = {
   /**
    * Label prop from `Element` component is being ignored.
    */
-  label: never;
+  label?: never;
   /**
    * Content prop from `Element` component is being ignored.
    */
-  content: never;
+  content?: never;
 };
-type Props$2 = MergeTypes<[Props$1, ListProps]>;
-declare const Component$1: VLElement<Props$2>;
+/**
+ * Props that List accepts on top of the Iterator branch — the Element prop
+ * surface (so `tag`, `direction`, `alignX`, etc. forward when
+ * `rootElement` is true) plus the List-only toggle.
+ */
+type ListExtras = Props & ListOnly;
+/**
+ * Public Props — generic over the data element type so callers get the same
+ * inference Iterator does, plus the List-specific `rootElement` toggle and
+ * Element prop forwarding.
+ *
+ *   Props<string>          → SimpleProps & ListExtras  (valueName REQUIRED)
+ *   Props<{ id; name }>    → ObjectProps & ListExtras  (valueName FORBIDDEN)
+ *   Props<unknown> / Props → LooseProps & ListExtras   (today's behavior)
+ */
+type Props$2<T = unknown> = MergeTypes<[Props$1<T>, ListExtras]>;
+/**
+ * Ref slot — forwarded to the inner `<Element>` when `rootElement` is true,
+ * a no-op otherwise. Typed loosely (`Ref<any>`) because the underlying
+ * element type depends on the `tag` prop, which would require deeper
+ * conditional typing to resolve precisely.
+ */
+type RefExtra = {
+  ref?: Ref<any>;
+};
+interface ListComponent {
+  <T extends SimpleValue>(props: SimpleProps<T> & ListExtras & RefExtra): ReactNode;
+  <T extends ObjectValue>(props: ObjectProps<T> & ListExtras & RefExtra): ReactNode;
+  (props: ChildrenProps & ListExtras & RefExtra): ReactNode;
+  displayName?: string;
+  pkgName?: string;
+  VITUS_LABS__COMPONENT?: string;
+}
+declare const _default: ListComponent;
 //#endregion
 //#region src/Overlay/context.d.ts
 interface Context {
@@ -384,7 +442,7 @@ interface Context {
   setBlocked: () => void;
   setUnblocked: () => void;
 }
-declare const Component$3: FC<Context & {
+declare const Component$2: FC<Context & {
   children: ReactNode;
 }>;
 //#endregion
@@ -571,7 +629,7 @@ type Props$3 = {
    */
   contentRefName?: string;
 } & UseOverlayProps;
-declare const Component$2: VLComponent<Props$3>;
+declare const Component$1: VLComponent<Props$3>;
 //#endregion
 //#region src/Portal/component.d.ts
 interface Props$4 {
@@ -589,7 +647,7 @@ interface Props$4 {
    */
   tag?: string;
 }
-declare const Component$4: VLComponent<Props$4>;
+declare const Component$3: VLComponent<Props$4>;
 //#endregion
 //#region src/Text/component.d.ts
 type Props$5 = Partial<{
@@ -614,7 +672,7 @@ type Props$5 = Partial<{
    */
   css: ExtendCss;
 }>;
-declare const Component$5: VLComponent<Props$5> & {
+declare const Component$4: VLComponent<Props$5> & {
   isText?: true;
 };
 //#endregion
@@ -633,7 +691,7 @@ interface Props$6 {
    */
   style?: Record<string, unknown>;
 }
-declare const Component$6: VLComponent<Props$6>;
+declare const Component$5: 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 };
+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 };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -125,11 +125,11 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 		children: render(children)
 	});
 };
-var component_default$1 = memo(Component$9);
+var component_default = memo(Component$9);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default$1;
+var Content_default = component_default;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -623,14 +623,14 @@ const Component$6 = ({ itemKey, valueName, children, component, data, wrapCompon
 	const total = specs.length;
 	return Children.toArray(specs.map((spec, i) => renderSpec(spec, buildExtendedProps(i, total), itemProps, wrapProps, Wrapper)));
 };
-var component_default = Object.assign(memo(Component$6), {
+const Iterator = Object.assign(memo(Component$6), {
 	isIterator: true,
 	RESERVED_PROPS
 });
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = component_default;
+var Iterator_default = Iterator;
 
 //#endregion
 //#region src/List/component.tsx

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

@@ -124,11 +124,11 @@ const Component$6 = ({ contentType, tag, parentDirection, direction, alignX, ali
 		children: render(children)
 	});
 };
-var component_default$1 = memo(Component$6);
+var component_default = memo(Component$6);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default$1;
+var Content_default = component_default;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -481,14 +481,14 @@ const Component$3 = ({ itemKey, valueName, children, component, data, wrapCompon
 	const total = specs.length;
 	return Children.toArray(specs.map((spec, i) => renderSpec(spec, buildExtendedProps(i, total), itemProps, wrapProps, Wrapper)));
 };
-var component_default = Object.assign(memo(Component$3), {
+const Iterator = Object.assign(memo(Component$3), {
 	isIterator: true,
 	RESERVED_PROPS
 });
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = component_default;
+var Iterator_default = Iterator;
 
 //#endregion
 //#region src/List/component.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/elements",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -54,12 +54,11 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit",
-    "version": "node ../../scripts/sync-peer-deps.mjs"
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "2.1.0",
-    "@vitus-labs/unistyle": "2.1.0",
+    "@vitus-labs/core": "workspace:^",
+    "@vitus-labs/unistyle": "workspace:^",
     "react": ">= 19",
     "react-dom": ">= 19",
     "react-native": ">= 0.76"