zag-ripple 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zag-ripple",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "RippleJS Adapter for Zag JS",
   "keywords": [
     "js",
@@ -17,6 +17,12 @@
   "license": "MIT",
   "main": "src/index.ripple",
   "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ripple",
+      "types": "./src/index.d.ts"
+    }
+  },
   "repository": "https://github.com/anubra266/zag-ripple/tree/main/packages/zag-ripple",
   "sideEffects": false,
   "publishConfig": {

package/src/index.d.ts

@@ -1,4 +1,5 @@
 import type { Machine, Scope } from "@zag-js/core";
+import { Component } from "ripple";
 
 export { mergeProps } from "@zag-js/core";
 
@@ -46,3 +47,17 @@ export declare function useMachine<
     machine: Machine<TContext>,
     options?: MachineOptions | (() => MachineOptions)
 ): MachineApi<TContext, TState>;
+
+
+
+
+export interface PortalProps {
+    disabled?: boolean | undefined
+    container?: HTMLElement | undefined
+    getRootNode?: (() => ShadowRoot | Document | Node) | undefined
+    children: Component
+}
+
+export declare const Portal: Component<PortalProps>;
+// export declare function Portal(props: PortalProps): Component;
+

package/src/index.ripple

@@ -1,3 +1,4 @@
 export { mergeProps } from "@zag-js/core"
 export * from "./normalize-props.ripple"
 export * from "./machine.ripple"
+export * from "./portal.ripple"

package/src/machine.ripple

@@ -11,8 +11,8 @@ import type {
   Service,
 } from "@zag-js/core"
 import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
-import { compact, ensure, isFunction, isString, toArray, warn } from "@zag-js/utils"
-import { track, effect, flushSync } from "ripple"
+import {  ensure, isFunction, isPlainObject, isString, toArray, warn } from "@zag-js/utils"
+import { track, trackSplit, untrack, effect, flushSync } from "ripple"
 import { createBindable } from "./bindable.ripple"
 import { createRefs } from "./refs.ripple"
 import { createTrack } from "./track.ripple"
@@ -22,24 +22,36 @@ function access(userProps) {
   return userProps
 }
 
+function compact(obj) {
+  if (!isPlainObject(obj) || obj === undefined) return obj
+  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string")
+  const filtered = {}
+  for (const key of keys) {
+    const value = (obj)[key]
+    if (@value !== undefined) {
+      filtered[key as keyof T] = compact(@value)
+    }
+  }
+  return filtered as T
+}
+
 export function useMachine(
   machine,
-  userProps = {},
+  _userProps,
 ) {
+  let [id, ids, getRootNode,rest ]= trackSplit(access(_userProps), ['id', 'ids', 'getRootNode'])
   let scope = track(() => {
-    const { id, ids, getRootNode } = access(userProps)
-    return createScope({ id, ids, getRootNode })
+    return createScope({ id: @id, ids: @ids, getRootNode: @getRootNode })
   })
-
   const debug = (...args: any[]) => {
     if (machine.debug) console.log(...args)
   }
 
   let props = track(() => 
-    machine.props?.({ props: compact(access(userProps)), scope: @scope }) ?? access(userProps)
+    machine.props?.({ props: compact(access(@rest)), scope: @scope }) ?? access(@rest)
   )
   
-  const prop = useProp(() => @props)
+  const prop = useProp(() => ({...@props, id: @id, ids: @ids, getRootNode: @getRootNode }))
 
   const context = machine.context?.({
     prop,
@@ -109,7 +121,6 @@ export function useMachine(
   const refs = createRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
   const send = (event) => {
-    
     if (status !== MachineStatus.Started) return
 
     previousEventRef.current = eventRef.current
@@ -274,7 +285,6 @@ export function useMachine(
     }
   })
 
-  
 
   machine.watch?.(getParams())
 
@@ -299,7 +309,8 @@ export function useMachine(
 
 function useProp(value) {
   return function get(key) {
-    return value()[key]
+    const v = value()[key]
+    return @v
   }
 }
 

package/src/normalize-props.ripple

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

package/src/portal.ripple

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