zag-ripple 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zag-ripple",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "RippleJS Adapter for Zag JS",
   "keywords": [
     "js",

package/src/machine.ripple

@@ -39,7 +39,7 @@ export function useMachine(
   machine,
   _userProps,
 ) {
-  let [id, ids, getRootNode,rest ]= trackSplit(access(_userProps), ['id', 'ids', 'getRootNode'])
+  let [id, ids, getRootNode, rest]= trackSplit(access(_userProps), ['id', 'ids', 'getRootNode'])
   let scope = track(() => {
     return createScope({ id: @id, ids: @ids, getRootNode: @getRootNode })
   })
@@ -47,11 +47,12 @@ export function useMachine(
     if (machine.debug) console.log(...args)
   }
 
-  let props = track(() => 
-    machine.props?.({ props: compact(access(@rest)), scope: @scope }) ?? access(@rest)
-  )
+  let props = track(() => {
+    const p = { ...@rest, id: @id, ids: @ids, getRootNode: @getRootNode }
+    return machine.props?.({ props: compact(p), scope: @scope }) ?? p
+  })
   
-  const prop = useProp(() => ({...@props, id: @id, ids: @ids, getRootNode: @getRootNode }))
+  const prop = useProp(() => @props)
 
   const context = machine.context?.({
     prop,

package/src/normalize-props.ripple

@@ -9,16 +9,8 @@ const propMap: Record<string, string> = {
   defaultValue: "value",
   htmlFor: "for",
   onChange: "onInput",
-  // TODO
-  // onFocus: "onFocusIn",
-  // onBlur: "onFocusOut",
-  // TODO remove when ripple fix is merged
-  onFocus: "onFocusin",
-  onBlur: "onFocusout",
-  onKeyDown: "onKeydown",
-  onPointerDown: "onPointerdown",
-  onPointerMove: "onPointermove",
-  onPointerLeave: "onPointerleave",
+  onFocus: "onFocusIn",
+  onBlur: "onFocusOut",
 }
 
 export function toStyleString(style: Record<string, number | string>) {

package/src/portal.ripple

@@ -1,9 +1,16 @@
 import { Portal as RipplePortal } from 'ripple';
 
-export component Portal({ disabled, getRootNode, container, ...rest }:any) {
-    if(!disabled) {
+export component Portal({ disabled, getRootNode, container, children }:any) {
+    const isServer = typeof window === "undefined"
+    
+    if(isServer || disabled){
+        <children />
+    }
+    else {
         const doc = getRootNode?.()?.ownerDocument ?? document
         const target = container ?? doc.body
-        <RipplePortal {...rest} {target} />
+        <RipplePortal {target}>
+            <children />
+        </RipplePortal>
     }
 }