@diskette/use-render 0.11.1 → 0.13.0

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

@@ -12,7 +12,7 @@ export interface RenderSlotOptions<T extends ElementType> {
 }
 /**
  * Pure function for rendering slot elements with render prop support and prop merging.
- * RSC-compatible version of useRenderSlot without ref handling.
+ * RSC-compatible version of useRenderSlot. Composes refs from baseProps and props via mergeRefs.
  *
  * @example
  * ```tsx

package/dist/fns/render-slot.js

@@ -1,8 +1,8 @@
-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, mergeRefs } from "../utils.js";
 /**
  * Pure function for rendering slot elements with render prop support and prop merging.
- * RSC-compatible version of useRenderSlot without ref handling.
+ * RSC-compatible version of useRenderSlot. Composes refs from baseProps and props via mergeRefs.
  *
  * @example
  * ```tsx
@@ -26,8 +26,8 @@ import { cx, isFunction, isString, mergeProps } from "../utils.js";
 export function renderSlot(tag, options = {}) {
     const baseProps = (options.baseProps ?? {});
     const props = (options.props ?? {});
-    const { className: baseClassName, style: baseStyle, children: baseChildren, ...base } = baseProps;
-    const { className, style, children, render, ...rest } = props;
+    const { className: baseClassName, style: baseStyle, children: baseChildren, ref: baseRef, ...base } = baseProps;
+    const { className, style, children, render, ref, ...rest } = props;
     const resolvedClassName = cx(baseClassName, className);
     const resolvedStyle = baseStyle || style ? { ...baseStyle, ...style } : undefined;
     const resolvedProps = {
@@ -39,10 +39,13 @@ export function renderSlot(tag, options = {}) {
     if (typeof resolvedStyle === 'object') {
         resolvedProps.style = resolvedStyle;
     }
+    if (baseRef || ref) {
+        resolvedProps.ref = mergeRefs([baseRef, ref]);
+    }
     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-composed-ref.d.ts

@@ -1,11 +1,5 @@
-import { type Ref, type RefCallback } from 'react';
-/**
- * Assigns a value to a ref.
- * @param ref The ref to assign the value to.
- * @param value The value to assign to the ref.
- * @returns The ref cleanup callback, if any.
- */
-export declare function assignRef<T>(ref: Ref<T> | undefined | null, value: T | null): ReturnType<RefCallback<T>>;
+import { type Ref } from 'react';
+export { assignRef } from './utils.ts';
 type RefInput<T> = Ref<T> | undefined | (Ref<T> | undefined)[];
 /**
  * Composes multiple refs into a single one and memoizes the result to avoid refs execution on each render.
@@ -14,4 +8,3 @@ type RefInput<T> = Ref<T> | undefined | (Ref<T> | undefined)[];
  * @returns Merged ref.
  */
 export declare function useComposedRef<T>(...refs: RefInput<T>[]): Ref<T>;
-export {};

package/dist/use-composed-ref.js

@@ -1,32 +1,6 @@
 import { useMemo } from 'react';
-/**
- * Assigns a value to a ref.
- * @param ref The ref to assign the value to.
- * @param value The value to assign to the ref.
- * @returns The ref cleanup callback, if any.
- */
-export function assignRef(ref, value) {
-    if (typeof ref === 'function') {
-        return ref(value);
-    }
-    else if (ref) {
-        ref.current = value;
-    }
-}
-function mergeRefs(refs) {
-    return (value) => {
-        const cleanups = [];
-        for (const ref of refs) {
-            const cleanup = assignRef(ref, value);
-            const isCleanup = typeof cleanup === 'function';
-            cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null));
-        }
-        return () => {
-            for (const cleanup of cleanups)
-                cleanup();
-        };
-    };
-}
+import { mergeRefs } from "./utils.js";
+export { assignRef } from "./utils.js";
 /**
  * Composes multiple refs into a single one and memoizes the result to avoid refs execution on each render.
  * Accepts individual refs or arrays of refs, which are flattened automatically.

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, Ref, RefCallback } 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,19 @@ 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;
+/**
+ * Assigns a value to a ref.
+ */
+export declare function assignRef<T>(ref: Ref<T> | undefined | null, value: T | null): ReturnType<RefCallback<T>>;
+/**
+ * Composes multiple refs into a single ref callback.
+ */
+export declare function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T>;
+/**
+ * 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,54 @@ export function resolveStyle(state, defaultStyle, propsStyle) {
 export function cx(...args) {
     return args.filter(Boolean).join(' ') || undefined;
 }
+/**
+ * Assigns a value to a ref.
+ */
+export function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        return ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+/**
+ * Composes multiple refs into a single ref callback.
+ */
+export function mergeRefs(refs) {
+    return (value) => {
+        const cleanups = [];
+        for (const ref of refs) {
+            const cleanup = assignRef(ref, value);
+            const isCleanup = typeof cleanup === 'function';
+            cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null));
+        }
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    };
+}
+/**
+ * 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.1",
+  "version": "0.13.0",
   "exports": {
     ".": "./dist/index.js",
     "./fns": "./dist/fns/index.js"