@dev-fastn-ai/react-core 2.4.2 → 2.4.3

package/README.md

@@ -603,7 +603,15 @@ For fields of type `select` or `multi-select`, use the `useFieldOptions` hook to
 ```tsx
 import { useFieldOptions } from "@fastn-ai/react-core";
 
-function SelectField({ field, value, onChange, isMulti = false }) {
+interface SelectFieldProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  isMulti?: boolean;
+  context?: any;
+}
+
+function SelectField({ field, value, onChange, isMulti = false, context }: SelectFieldProps) {
   const {
     options,
     loading,
@@ -613,9 +621,9 @@ function SelectField({ field, value, onChange, isMulti = false }) {
     error,
     search,
     totalLoadedOptions,
-  } = useFieldOptions(field);
+  } = useFieldOptions(field, context);
 
-  function handleInputChange(e) {
+  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     search(e.target.value);
   }
 
@@ -623,7 +631,7 @@ function SelectField({ field, value, onChange, isMulti = false }) {
     if (hasNext && !loadingMore) loadMore();
   }
 
-  function handleSelectChange(selectedOptions) {
+  function handleSelectChange(selectedOptions: Array<{ label: string; value: any }>) {
     if (isMulti) {
       // For multi-select, value should be an array of { label, value } objects
       const selectedValues = selectedOptions.map(option => ({
@@ -664,12 +672,12 @@ function SelectField({ field, value, onChange, isMulti = false }) {
       
       <select
         multiple={isMulti}
-        value={isMulti ? (value || []).map(v => v.value) : (value?.value || '')}
-        onChange={(e) => {
+        value={isMulti ? (value || []).map((v: any) => v.value) : (value?.value || '')}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           if (isMulti) {
             const selectedOptions = Array.from(e.target.selectedOptions).map(option => {
               const opt = options.find(o => o.value === option.value);
-              return { label: opt.label, value: opt.value };
+              return { label: opt?.label || '', value: opt?.value };
             });
             handleSelectChange(selectedOptions);
           } else {
@@ -713,6 +721,52 @@ function SelectField({ field, value, onChange, isMulti = false }) {
 }
 ```
 
+#### **Using Context with Select Fields**
+
+The `useFieldOptions` hook now supports passing context data to the `getOptions` and `loadMore` methods. This is useful when you need to pass additional form data or parameters to filter or customize the options:
+
+```tsx
+function SelectFieldWithContext({ field, value, onChange, formData }) {
+  // Pass form data as context to the hook
+  const context = formData; // This will be passed to getOptions and loadMore
+  
+  const {
+    options,
+    loading,
+    loadingMore,
+    hasNext,
+    loadMore,
+    error,
+    search,
+    totalLoadedOptions,
+  } = useFieldOptions(field, context);
+
+  // ... rest of the component logic remains the same
+}
+```
+
+**When to use context:**
+- When options depend on other form field values
+- When you need to pass authentication tokens or user-specific data
+- When implementing cascading dropdowns (e.g., country → state → city)
+- When options need to be filtered based on current form state
+
+**Example with cascading dropdowns:**
+```tsx
+function CascadingSelectField({ field, value, onChange, parentValue }) {
+  // Create context with parent field value
+  const context = {
+    parentField: parentValue,
+    // Add other relevant form data
+  };
+  
+  const { options, loading, error, search } = useFieldOptions(field, context);
+  
+  // The getOptions method in your field.optionsSource will receive this context
+  // and can use it to filter options based on the parent selection
+}
+```
+
 ### **Google Drive Picker Fields**
 
 For Google Drive file picker fields, handle the file selection flow. These fields also work with `{ label, value }` objects:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-fastn-ai/react-core",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "React hooks and components for integrating Fastn AI connector marketplace into your applications. Built on top of @fastn-ai/core with React Query for optimal performance.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",