Merge branch 'main' into feat-update-node-edge

lib/components/NodeBaseInputField.tsx

@@ -19,7 +19,14 @@ export const NodeBaseInputField = ({
   onPointerDown,
   onPointerLeave,
   children,
-  ...props
+  inputMode,
+  pattern,
+  maxLength,
+  minLength,
+  max,
+  min,
+  step,
+  placeholder,
 }: NodeBaseInputFieldProps) => {
   const [labelVisible, setLabelVisible] = useState(true)
   const ref = useRef<HTMLInputElement>(null)
@@ -45,7 +52,6 @@ export const NodeBaseInputField = ({
     >
       {children}
       <input
-        {...props}
         ref={ref}
         style={{
           background: '#545555',
@@ -71,6 +77,14 @@ export const NodeBaseInputField = ({
         }}
         onPointerDown={onPointerDown}
         onPointerLeave={onPointerLeave}
+        inputMode={inputMode}
+        pattern={pattern}
+        maxLength={maxLength}
+        minLength={minLength}
+        max={max}
+        min={min}
+        step={step}
+        placeholder={placeholder}
       />
       {labelVisible ? (
         <div

lib/components/NodeCheckboxField.tsx

@@ -11,7 +11,7 @@ export const NodeCheckboxField = memo(
     const [value, setValue] = useNodeFieldValue(props.id, props.defaultValue)
 
     const handleChange = useCallback(
-      (e) => setValue(e.target.checked),
+      (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.checked),
       [setValue],
     )
 

lib/components/NodeInputField.tsx

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 import { NodeBaseInputField } from './NodeBaseInputField'
 import { useNodeFieldValue } from '../hooks/node'
-import { NodeInputConfig, ValueTypeConfig } from '../config'
+import { NodeInputConfig } from '../config'
 import { BaseInputProps } from './inputs.ts'
 import './NodeInputField.css'
 
 type NodeInputFieldProps = BaseInputProps &
-  Omit<NodeInputConfig, 'valueType'> &
-  ValueTypeConfig &
+  Pick<NodeInputConfig, 'isConstant' | 'id' | 'defaultValue' | 'name'> &
   React.InputHTMLAttributes<any>
 
 export const NodeInputField = ({
@@ -16,10 +15,12 @@ export const NodeInputField = ({
   type,
   isConstant,
   slots,
+  id,
+  defaultValue,
   ...props
 }: NodeInputFieldProps) => {
   const Handle = slots?.Handle
-  const [value, setValue] = useNodeFieldValue(props.id, props.defaultValue)
+  const [value, setValue] = useNodeFieldValue(id, defaultValue)
 
   return (
     <NodeBaseInputField
@@ -95,7 +96,7 @@ export const NodeInputDecimalField = ({
 type NodeInputTypedFieldProps = Omit<NodeInputFieldProps, 'type'>
 
 export const NodeInputTextField = (
-  props: NodeInputTypedFieldProps & { maxlength?: number; minlength?: number },
+  props: NodeInputTypedFieldProps & { maxLength?: number; minLength?: number },
 ) => {
   return <NodeInputField type="text" {...props} />
 }
@@ -107,7 +108,7 @@ export const NodeInputNumberField = (
 }
 
 export const NodeInputPasswordField = (
-  props: NodeInputTypedFieldProps & { maxlength?: number; minlength?: number },
+  props: NodeInputTypedFieldProps & { maxLength?: number; minLength?: number },
 ) => {
   return <NodeInputField type="password" {...props} />
 }

lib/index.ts

@@ -1,5 +1,5 @@
 export { GraphConfig, type InputProps } from './config'
-export { NodeGraphEditor } from './NodeGraphEditor'
+export { NodeGraphEditor, type NodeGraphHandle } from './NodeGraphEditor'
 export { useBuildGraphConfig } from './hooks/config.ts'
 export {
   useNodeCollapsed,

lib/node-builder.tsx

@@ -81,7 +81,7 @@ export function NodeBody({
 export function NodeWrapper({
   children,
 }: NodeFocusState & { children: ReactNode }) {
-  return <>{children}</>
+  return <>{children!}</>
 }
 
 /**

lib/types/slots.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactElement } from 'react'
+import { ComponentType, ReactNode } from 'react'
 import { NodeHeader, NodeHeaderProps } from '../components/NodeHeader.tsx'
 import {
   NodeBody,
@@ -10,9 +10,7 @@ import {
 export type GraphSlots = {
   header: ComponentType<NodeHeaderProps>
   body: ComponentType<NodeBodyProps>
-  wrapper: ComponentType<
-    NodeFocusState & { children: ReactElement | ReactElement[] }
-  >
+  wrapper: ComponentType<NodeFocusState & { children: ReactNode }>
   bodyTop?: ComponentType<NodeFocusState>
   bodyBottom?: ComponentType<NodeFocusState>
 }

package.json

@@ -12,13 +12,13 @@
   "main": "dist/cjs/main.jsx",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/es/index.js",
       "require": "./dist/cjs/index.js",
       "default": "./dist/es/index.js"
     }
   },
-  "types": "dist/es/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],