@diskette/use-render 0.12.0 → 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 { createElement, isValidElement } from 'react';
-import { cloneRenderElement, cx, isFunction, isString, mergeProps } from "../utils.js";
+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 { cloneRenderElement, cx, isFunction, isString, mergeProps } from "../uti
 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,6 +39,9 @@ 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)) {

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/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactElement, ReactNode } 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,6 +27,14 @@ 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`

package/dist/utils.js

@@ -74,6 +74,34 @@ 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`

package/package.json

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