zag-ripple 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zag-ripple",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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

@@ -109,7 +109,6 @@ export function useMachine(
   const refs = createRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
   const send = (event) => {
-    
     if (status !== MachineStatus.Started) return
 
     previousEventRef.current = eventRef.current

package/src/normalize-props.ripple

@@ -8,9 +8,15 @@ 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",
 }
 
 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} />
+    }
+}