@diskette/use-render 0.10.0 → 0.11.0

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

@@ -1,13 +1,11 @@
-import type { CSSProperties, ElementType, HTMLAttributes, JSX, ReactNode } from 'react';
+import type { ComponentProps, ComponentPropsWithRef, ElementType, JSX, ReactNode } from 'react';
 import type { DataAttributes } from '../types.ts';
-export type SlotRenderer = (props: HTMLAttributes<any>) => ReactNode;
-export type SlotProps<T extends ElementType> = Omit<React.ComponentProps<T>, 'className' | 'style' | 'ref'> & {
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-    render?: SlotRenderer | JSX.Element;
+export type SlotRenderer<T extends ElementType> = (props: ComponentPropsWithRef<T>) => ReactNode;
+export type SlotProps<T extends ElementType> = ComponentPropsWithRef<T> & {
+    render?: SlotRenderer<T> | JSX.Element;
 };
 export interface RenderSlotOptions<T extends ElementType> {
-    baseProps?: Omit<React.ComponentProps<T>, 'ref'> & DataAttributes;
+    baseProps?: ComponentProps<T> & DataAttributes;
     props?: SlotProps<T> & DataAttributes;
 }
 /**

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { useRender } from './use-render.ts';
 export { useRenderContainer } from './use-render-container.ts';
 export { useRenderSlot } from './use-render-slot.ts';
 export type { UseRenderOptions } from './use-render.ts';
-export type { SlotProps, SlotRenderer, UseRenderSlotOptions, } from './use-render-slot.ts';
+export type { UseRenderSlotOptions } from './use-render-slot.ts';
+export type { SlotProps, SlotRenderer } from './fns/render-slot.ts';
 export type { ContainerBaseProps, ContainerProps, UseRenderContainerOptions, UseRenderContainerResult, } from './use-render-container.ts';
 export type { BaseComponentProps, ClassName, ComponentProps, ComponentRenderer, DataAttributes, Style, } from './types.ts';

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

@@ -1,16 +1,7 @@
-import type { ComponentPropsWithRef, CSSProperties, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from 'react';
-import type { DataAttributes } from './types.ts';
-export type SlotRenderer = (props: HTMLAttributes<any> & {
-    ref?: Ref<any> | undefined;
-}) => ReactNode;
-export type SlotProps<T extends ElementType> = Omit<ComponentPropsWithRef<T>, 'className' | 'style'> & {
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-    render?: SlotRenderer | JSX.Element;
-};
-export interface UseRenderSlotOptions<T extends ElementType> {
-    baseProps?: React.ComponentProps<T> & DataAttributes;
-    props?: SlotProps<T> & DataAttributes;
+import type { ElementType, ReactNode, Ref } from 'react';
+import type { RenderSlotOptions } from './fns/render-slot.ts';
+export type { SlotProps, SlotRenderer } from './fns/render-slot.ts';
+export interface UseRenderSlotOptions<T extends ElementType> extends RenderSlotOptions<T> {
     ref?: Ref<any> | (Ref<any> | undefined)[];
 }
 /**

package/dist/use-render-slot.js

@@ -1,6 +1,5 @@
-import { cloneElement, createElement, isValidElement } from 'react';
+import { renderSlot } from "./fns/render-slot.js";
 import { useComposedRef } from "./use-composed-ref.js";
-import { cx, isFunction, isString, mergeProps } from "./utils.js";
 /**
  * Hook for rendering slot elements with render prop support and prop merging.
  * A simpler version of useRender for stateless components.
@@ -25,31 +24,13 @@ import { cx, isFunction, isString, mergeProps } from "./utils.js";
  * ```
  */
 export function useRenderSlot(tag, options = {}) {
-    const baseProps = options.baseProps ?? {};
-    const props = (options.props ?? {});
-    const { className: baseClassName, style: baseStyle, children: baseChildren, ...base } = baseProps;
-    const { className, style, children, ref, render, ...rest } = props;
-    const resolvedClassName = cx(baseClassName, className);
-    const resolvedStyle = baseStyle || style ? { ...baseStyle, ...style } : undefined;
-    const mergedRef = useComposedRef(ref, options.ref);
-    const resolvedProps = {
-        ...mergeProps(base, rest),
-        ref: mergedRef,
-    };
-    if (isString(resolvedClassName)) {
-        resolvedProps.className = resolvedClassName;
+    const mergedRef = useComposedRef(options.props?.ref, options.ref);
+    const renderOptions = {};
+    if (options.props) {
+        renderOptions.props = { ...options.props, ref: mergedRef };
     }
-    if (typeof resolvedStyle === 'object') {
-        resolvedProps.style = resolvedStyle;
+    if (options.baseProps) {
+        renderOptions.baseProps = options.baseProps;
     }
-    const resolvedChildren = children ?? baseChildren;
-    // For `<Component render={<a />} />`
-    if (isValidElement(render)) {
-        return cloneElement(render, resolvedProps, resolvedChildren);
-    }
-    // For `<Component render={(props) => <a {...props} />)} />`
-    if (isFunction(render)) {
-        return render({ ...resolvedProps, children: resolvedChildren });
-    }
-    return createElement(tag, resolvedProps, resolvedChildren);
+    return renderSlot(tag, renderOptions);
 }

package/package.json

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