@diskette/use-render 0.11.0 → 0.12.0

package/dist/fns/render-slot.d.ts

@@ -1,8 +1,10 @@
-import type { ComponentProps, ComponentPropsWithRef, ElementType, JSX, ReactNode } from 'react';
+import type { ComponentProps, ComponentPropsWithRef, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from 'react';
 import type { DataAttributes } from '../types.ts';
-export type SlotRenderer<T extends ElementType> = (props: ComponentPropsWithRef<T>) => ReactNode;
-export type SlotProps<T extends ElementType> = ComponentPropsWithRef<T> & {
-    render?: SlotRenderer<T> | JSX.Element;
+export type SlotRenderer = (props: HTMLAttributes<any> & {
+    ref?: Ref<any> | undefined;
+}) => ReactNode;
+export type SlotProps<T extends ElementType> = ComponentPropsWithRef<T> & DataAttributes & {
+    render?: SlotRenderer | JSX.Element;
 };
 export interface RenderSlotOptions<T extends ElementType> {
     baseProps?: ComponentProps<T> & DataAttributes;

package/dist/fns/render-slot.js

@@ -1,5 +1,5 @@
-import { cloneElement, createElement, isValidElement } from 'react';
-import { cx, isFunction, isString, mergeProps } from "../utils.js";
+import { createElement, isValidElement } from 'react';
+import { cloneRenderElement, cx, isFunction, isString, mergeProps } from "../utils.js";
 /**
  * Pure function for rendering slot elements with render prop support and prop merging.
  * RSC-compatible version of useRenderSlot without ref handling.
@@ -42,7 +42,7 @@ export function renderSlot(tag, options = {}) {
     const resolvedChildren = children ?? baseChildren;
     // For `<Component render={<a />} />`
     if (isValidElement(render)) {
-        return cloneElement(render, resolvedProps, resolvedChildren);
+        return cloneRenderElement(render, resolvedProps, resolvedChildren);
     }
     // For `<Component render={(props) => <a {...props} />)} />`
     if (isFunction(render)) {

package/dist/use-render-container.js

@@ -1,6 +1,6 @@
-import { cloneElement, createElement, isValidElement, useCallback, useMemo, } from 'react';
+import { createElement, isValidElement, useCallback, useMemo, } from 'react';
 import { useComposedRef } from "./use-composed-ref.js";
-import { isFunction, isString, mergeProps, resolveClassName, resolveStyle, } from "./utils.js";
+import { cloneRenderElement, isFunction, isString, mergeProps, resolveClassName, resolveStyle, } from "./utils.js";
 /**
  * Hook for rendering container elements with item-level render control.
  *
@@ -68,14 +68,14 @@ export function useRenderContainer(tag, containerState, options = {}) {
     }, [base, rest, mergedRef, resolvedClassName, resolvedStyle]);
     // Container component that handles render prop
     const Container = useCallback(({ children: containerChildren }) => {
+        // For `<Component render={<section />} />`
+        if (isValidElement(render)) {
+            return cloneRenderElement(render, resolvedProps, containerChildren);
+        }
         const propsWithChildren = {
             ...resolvedProps,
             children: containerChildren,
         };
-        // For `<Component render={<section />} />`
-        if (isValidElement(render)) {
-            return cloneElement(render, propsWithChildren);
-        }
         // For `<Component render={(props, state) => <section {...props} />} />`
         if (isFunction(render)) {
             return render(propsWithChildren, containerState);

package/dist/use-render.js

@@ -1,6 +1,6 @@
-import { cloneElement, createElement, isValidElement } from 'react';
+import { createElement, isValidElement } from 'react';
 import { useComposedRef } from "./use-composed-ref.js";
-import { isFunction, isString, mergeProps, resolveClassName, resolveStyle, } from "./utils.js";
+import { cloneRenderElement, isFunction, isString, mergeProps, resolveClassName, resolveStyle, } from "./utils.js";
 /**
  * Hook for rendering elements with render prop support, prop merging, and state-driven className/style resolution.
  *
@@ -44,7 +44,7 @@ export function useRender(tag, state, options = {}) {
     const resolvedChildren = isFunction(children) ? children(state) : children;
     // For `<Component render={<a />} />`
     if (isValidElement(render)) {
-        return cloneElement(render, resolvedProps, resolvedChildren);
+        return cloneRenderElement(render, resolvedProps, resolvedChildren);
     }
     // For `<Component render={(props) => <a {...props} />)} />`
     if (isFunction(render)) {

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { ClassName, Style } from './types.ts';
 export declare const isString: (value: unknown) => value is string;
 export declare const isFunction: (value: unknown) => value is Function;
@@ -27,3 +27,11 @@ export declare function resolveStyle<State>(state: State, defaultStyle?: Style<S
  * Returns a string with the truthy values of `args` separated by space.
  */
 export declare function cx(...args: Array<string | null | false | 0 | undefined>): string | undefined;
+/**
+ * Clones a React element, merging its props with resolved props.
+ * - className values are merged via `cx`
+ * - style objects are spread-merged (render element styles as base, resolved styles on top)
+ * - event handlers are composed via `mergeProps`
+ * - children are set if provided
+ */
+export declare function cloneRenderElement(render: ReactElement, resolvedProps: React.ComponentProps<'div'>, children?: ReactNode): ReactNode;

package/dist/utils.js

@@ -1,3 +1,4 @@
+import { cloneElement } from 'react';
 export const isString = (value) => typeof value === 'string';
 export const isFunction = (value) => typeof value === 'function';
 export const isUndefined = (value) => typeof value === 'undefined';
@@ -73,3 +74,26 @@ export function resolveStyle(state, defaultStyle, propsStyle) {
 export function cx(...args) {
     return args.filter(Boolean).join(' ') || undefined;
 }
+/**
+ * Clones a React element, merging its props with resolved props.
+ * - className values are merged via `cx`
+ * - style objects are spread-merged (render element styles as base, resolved styles on top)
+ * - event handlers are composed via `mergeProps`
+ * - children are set if provided
+ */
+export function cloneRenderElement(render, resolvedProps, children) {
+    const { className: renderClassName, style: renderStyle, children: _renderChildren, ...renderRest } = render.props;
+    const { className: resolvedClassName, style: resolvedStyle, children: _resolvedChildren, ...resolvedRest } = resolvedProps;
+    const merged = mergeProps(renderRest, resolvedRest);
+    const mergedClassName = cx(renderClassName, resolvedClassName);
+    if (isString(mergedClassName)) {
+        merged.className = mergedClassName;
+    }
+    if (renderStyle || resolvedStyle) {
+        merged.style = { ...renderStyle, ...resolvedStyle };
+    }
+    if (children !== undefined) {
+        merged.children = children;
+    }
+    return cloneElement(render, merged);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diskette/use-render",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "exports": {
     ".": "./dist/index.js",
     "./fns": "./dist/fns/index.js"