@bioturing/components 0.41.1 → 0.42.0-beta.1

package/dist/components/utils/renderProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderProp.js","sources":["../../../src/components/utils/renderProp.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { clsx } from \"./cn\";\nimport type { ClassValue } from \"./types\";\n\n/**\n * Utility function to handle render prop patterns with proper TypeScript typing.\n * Supports both function render props and ReactElement children.\n *\n * @param children - Either a render function or a ReactElement\n * @param props - Props to pass to the render function or merge with the ReactElement\n * @param state - Optional state to pass to the render function\n * @returns The rendered element\n *\n * @example\n * // With function children\n * <Component>\n *   {(props, state) => <button {...props}>Click me</button>}\n * </Component>\n *\n * @example\n * // With ReactElement children\n * <Component>\n *   <button>Click me</button>\n * </Component>\n */\nexport function createRenderProp<\n  TProps extends object = object,\n  TState = unknown\n>(\n  children:\n    | ((props: TProps, state: TState) => React.ReactElement)\n    | React.ReactElement,\n  props: TProps,\n  state?: TState\n): React.ReactElement {\n  if (typeof children === \"function\") {\n    return children(props, state as TState);\n  } else {\n    const childElement = children as React.ReactElement<{\n      className?: ClassValue;\n    }>;\n    const propsClassName =\n      \"className\" in props ? (props.className as ClassValue) : undefined;\n    const mergedClassName = clsx(propsClassName, childElement.props.className);\n\n    // Remove className from both props and child props to handle it separately\n    const { className: _propsClassName, ...propsWithoutClassName } =\n      props as any;\n    const { className: _childClassName, ...childPropsWithoutClassName } =\n      childElement.props;\n\n    // Spread trigger props first, then child props on top to preserve child's explicit props\n    // This ensures that props like 'type', 'size', etc. from the child element are preserved\n    const clonedElement = React.cloneElement(childElement, {\n      ...propsWithoutClassName,\n      ...childPropsWithoutClassName,\n      className: mergedClassName,\n    });\n    return clonedElement;\n  }\n}\n"],"names":["createRenderProp","children","props","state","childElement","propsClassName","mergedClassName","clsx","_propsClassName","propsWithoutClassName","_childClassName","childPropsWithoutClassName","React"],"mappings":";;;AA0BO,SAASA,EAIdC,GAGAC,GACAC,GACoB;AACpB,MAAI,OAAOF,KAAa;AACtB,WAAOA,EAASC,GAAOC,CAAe;AACjC;AACL,UAAMC,IAAeH,GAGfI,IACJ,eAAeH,IAASA,EAAM,YAA2B,QACrDI,IAAkBC,EAAKF,GAAgBD,EAAa,MAAM,SAAS,GAGnE,EAAE,WAAWI,GAAiB,GAAGC,MACrCP,GACI,EAAE,WAAWQ,GAAiB,GAAGC,EAAA,IACrCP,EAAa;AASf,WALsBQ,EAAM,aAAaR,GAAc;AAAA,MACrD,GAAGK;AAAA,MACH,GAAGE;AAAA,MACH,WAAWL;AAAA,IAAA,CACZ;AAAA,EAEH;AACF;"}
+{"version":3,"file":"renderProp.js","sources":["../../../src/components/utils/renderProp.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { clsx } from \"./cn\";\nimport type { ClassValue } from \"./types\";\nimport mergeRefs from \"merge-refs\";\n\n/**\n * Utility function to handle render prop patterns with proper TypeScript typing.\n * Supports both function render props and ReactElement children.\n *\n * @param children - Either a render function or a ReactElement\n * @param props - Props to pass to the render function or merge with the ReactElement\n * @param state - Optional state to pass to the render function\n * @returns The rendered element\n *\n * @example\n * // With function children\n * <Component>\n *   {(props, state) => <button {...props}>Click me</button>}\n * </Component>\n *\n * @example\n * // With ReactElement children\n * <Component>\n *   <button>Click me</button>\n * </Component>\n */\nexport function createRenderProp<\n  TProps extends object = object,\n  TState = unknown,\n  TElement = Element,\n>(\n  children:\n    | ((props: TProps, state: TState) => React.ReactElement)\n    | React.ReactElement,\n  props: TProps,\n  state?: TState,\n): React.ReactElement {\n  if (typeof children === \"function\") {\n    return children(props, state as TState);\n  } else {\n    const childElement = children as React.ReactElement<{\n      className?: ClassValue;\n      ref?: React.Ref<TElement>;\n    }>;\n\n    // Extract className and ref from props with proper typing\n    const propsWithPossibleClassNameAndRef = props as TProps & {\n      className?: ClassValue;\n      ref?: React.Ref<TElement>;\n    };\n\n    const propsClassName = propsWithPossibleClassNameAndRef.className;\n    const propsRef = propsWithPossibleClassNameAndRef.ref;\n    const mergedClassName = clsx(propsClassName, childElement.props.className);\n\n    // Merge refs from both props and child element\n    // React internally stores ref on the element, so we need to access it\n    const childRef = (\n      childElement as React.ReactElement & { ref?: React.Ref<TElement> }\n    ).ref;\n    const mergedRef =\n      propsRef && childRef\n        ? mergeRefs(childRef, propsRef)\n        : propsRef || childRef;\n\n    // Remove className and ref from props to handle them separately\n    const {\n      className: _propsClassName,\n      ref: _propsRef,\n      ...propsWithoutClassNameAndRef\n    } = propsWithPossibleClassNameAndRef;\n    const { className: _childClassName, ...childPropsWithoutClassName } =\n      childElement.props;\n\n    // Spread trigger props first, then child props on top to preserve child's explicit props\n    // This ensures that props like 'type', 'size', etc. from the child element are preserved\n    const clonedElement = React.cloneElement(childElement, {\n      ...propsWithoutClassNameAndRef,\n      ...childPropsWithoutClassName,\n      className: mergedClassName,\n      ref: mergedRef,\n    } as React.HTMLAttributes<TElement> & { ref?: React.Ref<TElement> });\n    return clonedElement;\n  }\n}\n"],"names":["createRenderProp","children","props","state","childElement","propsWithPossibleClassNameAndRef","propsClassName","propsRef","mergedClassName","clsx","childRef","mergedRef","mergeRefs","_propsClassName","_propsRef","propsWithoutClassNameAndRef","_childClassName","childPropsWithoutClassName","React"],"mappings":";;;;AA2BO,SAASA,EAKdC,GAGAC,GACAC,GACoB;AACpB,MAAI,OAAOF,KAAa;AACtB,WAAOA,EAASC,GAAOC,CAAe;AACjC;AACL,UAAMC,IAAeH,GAMfI,IAAmCH,GAKnCI,IAAiBD,EAAiC,WAClDE,IAAWF,EAAiC,KAC5CG,IAAkBC,EAAKH,GAAgBF,EAAa,MAAM,SAAS,GAInEM,IACJN,EACA,KACIO,IACJJ,KAAYG,IACRE,EAAUF,GAAUH,CAAQ,IAC5BA,KAAYG,GAGZ;AAAA,MACJ,WAAWG;AAAA,MACX,KAAKC;AAAA,MACL,GAAGC;AAAA,IAAA,IACDV,GACE,EAAE,WAAWW,GAAiB,GAAGC,EAAA,IACrCb,EAAa;AAUf,WANsBc,EAAM,aAAad,GAAc;AAAA,MACrD,GAAGW;AAAA,MACH,GAAGE;AAAA,MACH,WAAWT;AAAA,MACX,KAAKG;AAAA,IAAA,CAC4D;AAAA,EAErE;AACF;"}