lilact 0.9.1 → 0.10.0

package/src/errors.jsx

@@ -58,6 +58,7 @@ function getErrorLocation(err) // works for both error and error-event, and also
 // Chrome/Edge:   at fn (eval:xxx:LINE:COL)
 // Firefox:       fn@eval:xxx:LINE:COL
 // Safari:        @eval:xxx:LINE:COL   (sometimes)
+/** @ignore */
 function parseEvalLocationFromStack(stack, urlPrefix = "eval:/") {
   const raw = typeof stack === "string" ? stack : String(stack || "");
   const lines = raw.split(/\r?\n/);
@@ -125,34 +126,36 @@ export function scanBlockLabels(code, path)
  * Debug tool to get the Lilact traced location of an error. It can also produce some block based stack trace 
  * if `Lilact.transpilerConfig.enableLabelStack` is set to `true` before loading the script. This is `false`
  * by default for efficiency.
+ * 
+ * @param error - The error object 
  *
  * @returns A new object that includes `path`, `row`, `col`, `msg`, `name`, and optional `stack`. 
  * The exception itself is stored as `err`.
  */
-export function traceError(err)
+export function traceError(error)
 {
-	if(err?.is_traced) {
-		return err;
+	if(error?.is_traced) {
+		return error;
 	}
 
-	const loc = parseEvalLocationFromStack(err.stack);
+	const loc = parseEvalLocationFromStack(error.stack);
 
 	const obj = {
-		fileName: loc.url?.slice(6) || err.fileName,
+		fileName: loc.url?.slice(6) || error.fileName,
 		
 		lineNumber: loc.line,
 		columnNumber: loc.col,
 
-		message: err.message,
-		name: err.name,
+		message: error.message,
+		name: error.name,
 
-		stack: err.stack,
-		_error: err,
+		stack: error.stack,
+		_error: error,
 
 		is_traced: true
 	};		
 
-	if( err.name!=='JSXParseError' ) {
+	if( error.name!=='JSXParseError' ) {
 
 		let mps;
 
@@ -165,18 +168,18 @@ export function traceError(err)
 			obj.lineNumber = mloc.line;
 			obj.columnNumber = mloc.col;
 		}
-		else if( err.lilact_trace!==undefined) {
+		else if( error.lilact_trace!==undefined) {
 
-			let loc = getErrorLocation(err);
+			let loc = getErrorLocation(error);
 
 			let mps;
 			let blk;
 
-			if(typeof(err.lilact_trace)==='object') {
-				blk = Lilact.blocks_info.labels[err.lilact_trace[0]];
+			if(typeof(error.lilact_trace)==='object') {
+				blk = Lilact.blocks_info.labels[error.lilact_trace[0]];
 			}
 			else {
-				blk = Lilact.blocks_info.labels[err.lilact_trace];
+				blk = Lilact.blocks_info.labels[error.lilact_trace];
 			}
 
 			if(blk) {
@@ -194,8 +197,8 @@ export function traceError(err)
 		
 	}
 	else {
-		const loc = getErrorLocation(err);
-		if(err.fileName) obj.fileName = err.fileName;
+		const loc = getErrorLocation(error);
+		if(error.fileName) obj.fileName = error.fileName;
 		obj.lineNumber = loc.line;
 		obj.columnNumber = loc.col;
 	}
@@ -219,14 +222,15 @@ export function traceError(err)
  *	Lilact.globalErrorHandler(e);
  * });
  * `
+ * @param error - The error object 
  * 
  */
-export function globalErrorHandler(err)
+export function globalErrorHandler(error)
 {
 	Lilact.pauseTimers();
-	if(err.error) err = err.error;
+	if(error.error) error = error.error;
 
-	err = Lilact.traceError(err);
+	error = Lilact.traceError(error);
 
 	const cls = Lilact.emotion.css(`
 			background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
@@ -254,11 +258,11 @@ export function globalErrorHandler(err)
 	//<b>⚠</b> 
 	el.innerHTML = 
 		`<h3 style=""><red>Error!</red></h3>
-		<b>${err.fileName?'At '+err.fileName:''}
-		${Number.isFinite(err.lineNumber)?": Line "+(err.lineNumber+1):""}</b><br><br>
-		<b>${err.name}</b>:&nbsp;<span>${err.message}</span><br><br>
-		${Lilact.required_scripts[err.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
-		${err._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+err._error.componentStackLog+'</pre></code>':''}
+		<b>${error.fileName?'At '+error.fileName:''}
+		${Number.isFinite(error.lineNumber)?": Line "+(error.lineNumber+1):""}</b><br><br>
+		<b>${error.name}</b>:&nbsp;<span>${error.message}</span><br><br>
+		${Lilact.required_scripts[error.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
+		${error._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+error._error.componentStackLog+'</pre></code>':''}
 		`;
 
 
@@ -266,16 +270,16 @@ export function globalErrorHandler(err)
 
 	const pres = el.querySelectorAll('pre');
 
-	if(Lilact.required_scripts[err.fileName]) {
-		const lines = Lilact.required_scripts[err.fileName].code.split("\n");
+	if(Lilact.required_scripts[error.fileName]) {
+		const lines = Lilact.required_scripts[error.fileName].code.split("\n");
 
-		if(lines?.[err.lineNumber-1])
-			pres[0].innerText = lines[err.lineNumber-1];
+		if(lines?.[error.lineNumber-1])
+			pres[0].innerText = lines[error.lineNumber-1];
 
-		if(lines?.[err.lineNumber]) el.querySelector('pre red').innerText = lines[err.lineNumber];
+		if(lines?.[error.lineNumber]) el.querySelector('pre red').innerText = lines[error.lineNumber];
 
-		if(lines?.[err.lineNumber+1])
-			pres[2].innerText = lines[err.lineNumber+1];
+		if(lines?.[error.lineNumber+1])
+			pres[2].innerText = lines[error.lineNumber+1];
 	}
 
 	el.showModal();

package/src/events.jsx

@@ -57,79 +57,207 @@ if (typeof Event !== 'undefined' && !Event.prototype.composedPath) {
 // Event pool for reuse
 const _pool = [];
 const MAX_POOL_SIZE = 10;
+const POINTER_TYPES = ["mouse", "pen", "touch"];
 
 export function createSyntheticEvent(nativeEvent, currentTarget) {
-	// Reuse object from pool if available
-	const e = _pool.length ? _pool.pop() : {};
-
-	e.nativeEvent = nativeEvent;
-	e.type = nativeEvent.type;
-	e.target = nativeEvent.target || nativeEvent.srcElement || null;
-	e.currentTarget = currentTarget || nativeEvent.currentTarget || null;
-	e.timeStamp = nativeEvent.timeStamp || Date.now();
-	e.defaultPrevented = !!(nativeEvent.defaultPrevented);
-	e.isPropagationStopped = false;
-	e.isPersistent = false;
-
-	e.isDefaultPrevented = () => e.defaultPrevented;
-	e.preventDefault = () => {
-		if (nativeEvent.preventDefault) nativeEvent.preventDefault();
-		e.defaultPrevented = true;
-	};
-	e.stopPropagation = () => {
-		if (nativeEvent.stopPropagation) nativeEvent.stopPropagation();
-		e.isPropagationStopped = true;
-	};
-	e.persist = () => { e.isPersistent = true; };
-
-	// Convenience: normalized values for common props (touch, key, target value)
-	e.nativeEvent = nativeEvent;
-	e.key = nativeEvent.key || null;
-	e.code = nativeEvent.code || null;
-	e.which = nativeEvent.which || nativeEvent.keyCode || null;
-
-	// For input-like events normalize value and checked
-	try {
-		const tgt = e.target;
-		e.value = tgt && ('value' in tgt) ? tgt.value : undefined;
-		e.checked = tgt && ('checked' in tgt) ? tgt.checked : undefined;
-	} catch (err) {
-		e.value = undefined;
-		e.checked = undefined;
-	}
-
-	// composedPath helper
-	e.path = typeof nativeEvent.composedPath === 'function' ? nativeEvent.composedPath() : [e.target];
-
-	return e;
+  const e = _pool.length ? _pool.pop() : {};
+
+  e.nativeEvent = nativeEvent;
+  e.type = nativeEvent.type;
+  e.target = nativeEvent.target || nativeEvent.srcElement || null;
+  e.currentTarget = currentTarget || nativeEvent.currentTarget || null;
+  e.timeStamp = nativeEvent.timeStamp || Date.now();
+
+  // Standard flags
+  e.defaultPrevented = !!nativeEvent.defaultPrevented;
+  e.isPropagationStopped = false;
+  e.isPersistent = false;
+
+  // Common DOM meta when present
+  e.bubbles = !!nativeEvent.bubbles;
+  e.cancelable = !!nativeEvent.cancelable;
+  e.composed = !!nativeEvent.composed;
+  e.detail = nativeEvent.detail;
+
+  e.relatedTarget =
+    nativeEvent.relatedTarget ||
+    (nativeEvent.fromElement ? nativeEvent.fromElement : null) ||
+    (nativeEvent.toElement ? nativeEvent.toElement : null) ||
+    null;
+
+  // Modifier keys
+  e.altKey = !!nativeEvent.altKey;
+  e.ctrlKey = !!nativeEvent.ctrlKey;
+  e.metaKey = !!nativeEvent.metaKey;
+  e.shiftKey = !!nativeEvent.shiftKey;
+
+  // preventDefault / stopPropagation
+  e.isDefaultPrevented = () => e.defaultPrevented;
+  e.preventDefault = () => {
+    if (nativeEvent.preventDefault) nativeEvent.preventDefault();
+    e.defaultPrevented = true;
+  };
+
+  e.stopPropagation = () => {
+    if (nativeEvent.stopPropagation) nativeEvent.stopPropagation();
+    e.isPropagationStopped = true;
+  };
+
+  e.persist = () => { e.isPersistent = true; };
+
+  // Key/mouse/pointer related
+  e.key = nativeEvent.key || null;
+  e.code = nativeEvent.code || null;
+  e.which = nativeEvent.which ?? nativeEvent.keyCode ?? null;
+
+  // Mouse / Pointer button state normalization
+  // - "button" often is 0/1/2 for mouse; for pointer events it's also present.
+  // - "buttons" is a bitmask of which buttons are down (often important for drag).
+  e.button = nativeEvent.button ?? null;
+  e.buttons = nativeEvent.buttons ?? null;
+
+  // Pointer identity + type (critical for multi-touch / pointer capture)
+  e.pointerId = nativeEvent.pointerId ?? null;
+  e.pointerType = nativeEvent.pointerType ?? null;
+  e.isPrimary = nativeEvent.isPrimary ?? null;
+
+  // Coordinates: React/SyntheticEvent uses these directly (React provides them too)
+  e.clientX = nativeEvent.clientX ?? 0;
+  e.clientY = nativeEvent.clientY ?? 0;
+  e.screenX = nativeEvent.screenX ?? 0;
+  e.screenY = nativeEvent.screenY ?? 0;
+
+  // pageX/pageY might be derived; keep if present
+  // (Using pageX/pageY only if you need it; most drag uses clientX/Y.)
+  e.pageX = nativeEvent.pageX ?? null;
+  e.pageY = nativeEvent.pageY ?? null;
+
+  // movementX/movementY exist on some mouse events; harmless if absent
+  e.movementX = nativeEvent.movementX ?? 0;
+  e.movementY = nativeEvent.movementY ?? 0;
+
+  // Pressure/tilt (Pointer Events)
+  e.pressure = nativeEvent.pressure ?? null;
+  e.tiltX = nativeEvent.tiltX ?? null;
+  e.tiltY = nativeEvent.tiltY ?? null;
+  e.width = nativeEvent.width ?? null;
+  e.height = nativeEvent.height ?? null;
+
+  // If the native event has a pointer capture API, you can forward bind/capture calls.
+  // (These are methods on the EventTarget, not on the event, but keeping fields is enough.)
+  e.pointerEventsSupported = POINTER_TYPES.includes(e.pointerType);
+
+  // For input-like events normalize value and checked
+  try {
+    const tgt = e.target;
+    e.value = tgt && ("value" in tgt) ? tgt.value : undefined;
+    e.checked = tgt && ("checked" in tgt) ? tgt.checked : undefined;
+
+    // Some input events have selectionStart/selectionEnd etc.
+    e.selectionStart = tgt && ("selectionStart" in tgt) ? tgt.selectionStart : undefined;
+    e.selectionEnd = tgt && ("selectionEnd" in tgt) ? tgt.selectionEnd : undefined;
+  } catch (err) {
+    e.value = undefined;
+    e.checked = undefined;
+    e.selectionStart = undefined;
+    e.selectionEnd = undefined;
+  }
+
+  // Touch lists (useful for touch events; sometimes pointerType === "touch" uses pointer events instead)
+  // Keep references only if they exist.
+  e.touches = nativeEvent.touches || null;
+  e.targetTouches = nativeEvent.targetTouches || null;
+  e.changedTouches = nativeEvent.changedTouches || null;
+
+  // composedPath helper
+  e.path = typeof nativeEvent.composedPath === "function"
+    ? nativeEvent.composedPath()
+    : [e.target];
+
+  // Additional keyboard extras when present
+  e.repeat = nativeEvent.repeat ?? false;
+  e.location = nativeEvent.location ?? 0;
+
+  return e;
 }
 
 export function releaseSyntheticEvent(e) {
-	if (e && !e.isPersistent) {
-		// Clean up references to avoid leaks
-		e.nativeEvent = null;
-		e.type = null;
-		e.target = null;
-		e.currentTarget = null;
-		e.timeStamp = 0;
-		e.defaultPrevented = false;
-		e.isPropagationStopped = false;
-		e.isPersistent = false;
-		e.isDefaultPrevented = null;
-		e.preventDefault = null;
-		e.stopPropagation = null;
-		e.persist = null;
-		e.key = null;
-		e.code = null;
-		e.which = null;
-		e.value = undefined;
-		e.checked = undefined;
-		e.path = null;
-
-		if (_pool.length < MAX_POOL_SIZE) _pool.push(e);
-	}
+  if (e && !e.isPersistent) {
+    e.nativeEvent = null;
+    e.type = null;
+    e.target = null;
+    e.currentTarget = null;
+    e.timeStamp = 0;
+
+    e.defaultPrevented = false;
+    e.isPropagationStopped = false;
+
+    e.isPersistent = false;
+
+    e.isDefaultPrevented = null;
+    e.preventDefault = null;
+    e.stopPropagation = null;
+    e.persist = null;
+
+    e.bubbles = false;
+    e.cancelable = false;
+    e.composed = false;
+    e.detail = undefined;
+    e.relatedTarget = null;
+
+    // modifier keys
+    e.altKey = false;
+    e.ctrlKey = false;
+    e.metaKey = false;
+    e.shiftKey = false;
+
+    // pointer/mouse fields
+    e.key = null;
+    e.code = null;
+    e.which = null;
+
+    e.button = null;
+    e.buttons = null;
+    e.pointerId = null;
+    e.pointerType = null;
+    e.isPrimary = null;
+
+    e.clientX = 0;
+    e.clientY = 0;
+    e.screenX = 0;
+    e.screenY = 0;
+    e.pageX = null;
+    e.pageY = null;
+
+    e.movementX = 0;
+    e.movementY = 0;
+
+    e.pressure = null;
+    e.tiltX = null;
+    e.tiltY = null;
+    e.width = null;
+    e.height = null;
+
+    // input-like
+    e.value = undefined;
+    e.checked = undefined;
+    e.selectionStart = undefined;
+    e.selectionEnd = undefined;
+
+    // touch lists
+    e.touches = null;
+    e.targetTouches = null;
+    e.changedTouches = null;
+
+    e.path = null;
+    e.repeat = false;
+    e.location = 0;
+
+    if (_pool.length < MAX_POOL_SIZE) _pool.push(e);
+  }
 }
 
+
 // Main wrapper factory
 // fn: function(syntheticEvent) { ... }
 // opts: { capture: bool, passive: bool, once: bool, stopPropagationOnTrueReturn: bool }

package/src/hooks.jsx

@@ -457,21 +457,6 @@ export function useDeferredValue(value, initialValue)
 	return deferred;
 }
 
-
-/**
- * Wraps a render function so that a parent can pass a `ref` into it.
- * The forwarded `ref` is provided as the second argument to the render function: `(props, ref)`.
- *
- * @param {function(props: any, ref: any)} render
- *   The component render function that receives the props and the forwarded ref.
- * @returns {}
- */
-export function forwardRef(render)
-{
-	return (props)=>render({...props, ref: undefined}, props.ref);
-}
-
-
 /**
  * Customizes the value that is exposed to the parent when it uses a `ref` on a component created with `forwardRef`.
  * The object returned by `factory` becomes the value of `ref.current` for object refs.

package/src/lilact.jsx

@@ -28,6 +28,26 @@
 
 */
 
+
+/*
+	note: 
+
+	If you are reading the code, keep in my mind that in the development of `Lilact`, 
+	I have used a naming convention that is a little different from the standard way:
+
+	I use underscored all lowercase names for internal variables. 
+	I use all caps for constants that are used similar to C defined macros.	e.g. shared 
+	symbols.
+
+	And I use the standard convention for exposed user space variables and arguments, and 
+	functions.
+ 	
+	So if a variable name is in the format `aaa_bbb`, it means I am counting on it to be 
+	used internally. And if it is `AAA_BBB`, I'm counting on it to be constant in the whole 
+	application lifetime.
+*/
+
+
 import * as redux from "redux";
 import * as emotion from "@emotion/css";
 import PropTypes from 'prop-types';
@@ -74,7 +94,7 @@ export {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.9",
+	VERSION: "beta.10",
 	
 	// Configuration
 
@@ -108,7 +128,6 @@ export const Lilact =
 	emotion,
 
 }
-
 globalThis.Lilact = Lilact;
 globalThis.createComponent = Lilact.createComponent;
 globalThis.Fragment = Lilact.Fragment;

package/src/misc.jsx

@@ -143,6 +143,20 @@ export const Children = {
 };
 
 
+/**
+ * Wraps a render function so that a parent can pass a `ref` into it.
+ * The forwarded `ref` is provided as the second argument to the render function: `(props, ref)`.
+ *
+ * @param {function(props: any, ref: any)} render
+ *   The component render function that receives the props and the forwarded ref.
+ * @returns {}
+ */
+export function forwardRef(render)
+{
+	return (props)=>render({...props, ref: undefined}, props.ref);
+}
+
+
 /**
  * Debug tool to detect the component visible at a point on screen.
  *

package/src/pane.jsx

@@ -1,5 +1,5 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "./hooks.jsx";
-import { Children } from "./misc.jsx";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, useImperativeHandle } from "./hooks.jsx";
+import { Children, forwardRef } from "./misc.jsx";
 
 
 const clamp = (n, min, max) => {

package/src/run.jsx

@@ -120,13 +120,13 @@ export function run(jsx, path=`InlineJSX-${++Lilact.eval_num}`, is_inline=true)
  * @param path - The path to the required file. Must be either absolute path or relative to the current 
  * document’s URL (the page/location that initiated the request).
  * 
- * @param force_update - To treat the code as inline. The main difference at the moment is that inline code doesn't include sourcemap.
+ * @param forceUpdate - To treat the code as inline. The main difference at the moment is that inline code doesn't include sourcemap.
  * 
  * @returns An array representation of the children.
  */
-export function require(path, force_update)
+export function require(path, forceUpdate)
 {
-	if(Lilact.required_scripts[path] && !force_update) return Lilact.required_scripts[path].module.exports;
+	if(Lilact.required_scripts[path] && !forceUpdate) return Lilact.required_scripts[path].module.exports;
 	
 	if(path[0]==='#') {
 
@@ -178,7 +178,7 @@ export function require(path, force_update)
  * The promise must resolve to a module whose module.exports.default is a Lilact component
  * or otherwise it will be whatever the module.exports is set to.
  * 
- * @returns A Lilact component that should be rendered inside a {@link Suspense} boundary.
+ * @returns A Lilact component that should be rendered inside a `Suspense` boundary.
  */
 export function lazy(factory) {
 	let status = "pending"; // pending | success | error

package/src/timers.jsx

@@ -277,27 +277,27 @@ export function releaseTimers()
  * @param {number} duration - Delay in milliseconds.
  * @returns {Promise} Promise that resolves after the delay.
  */
-export function timeoutPromise(duration=0, timer_source=this) 
+export function timeoutPromise(duration=0, timerSource=this) 
 {	
 	let id, resolve, reject;
 
 	const promise = new Promise((res, rej) => {
 		resolve = res;
 		reject = rej;
-		id = timer_source.setTimeout(() => {
+		id = timerSource.setTimeout(() => {
 			resolve();
 		}, duration);
 	});
 
 	// note: proceed interrupts the timer, and continues the flow if used with await.
 	promise.proceed = () => {
-		timer_source.clearTimeout(id);
+		timerSource.clearTimeout(id);
 		resolve();
 	};
 
 	// note: cancel rejects so it throws exception when using with await, this allows handling it differently.
 	promise.cancel = () => {
-		timer_source.clearTimeout(id);
+		timerSource.clearTimeout(id);
 		reject();
 	};
 

package/docs/functions/hooks.forwardRef.html

@@ -1,4 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>forwardRef | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/hooks.html">hooks</a></li><li><a href="" aria-current="page">forwardRef</a></li></ul><h1>Function forwardRef</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="forwardref"><span class="tsd-kind-call-signature">forwardRef</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">render</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><a href="#forwardref" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Wraps a render function so that a parent can pass a <code>ref</code> into it.
-The forwarded <code>ref</code> is provided as the second argument to the render function: <code>(props, ref)</code>.</p>
-</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">render</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The component render function that receives the props and the forwarded ref.</p>
-</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources"><ul><li>Defined in hooks.js:469</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>