feat: update consumers for new input setting

package.json

@@ -16,8 +16,8 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-query": "^4.36.1",
-    "@useparagon/connect": "2.2.3-experimental.3",
     "@tanstack/react-query-devtools": "^4.42.0",
+    "@useparagon/connect": "2.2.8-experimental-18633.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -28,6 +28,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.60.0",
+    "react-intersection-observer": "^10.0.3",
     "react-markdown": "^10.1.0",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.4",

src/app.tsx

@@ -34,6 +34,124 @@ async function authenticate() {
   );
   paragon.setHeadless(true);
 
+  // paragon.setDataSources({
+  //   // Static dropdown options (available to all integrations)
+  //   dropdowns: {
+  //     'priority-level': [
+  //       { label: 'Low', value: 'low' },
+  //       { label: 'Medium', value: 'medium' },
+  //       { label: 'High', value: 'high' },
+  //     ],
+  //     'pokemon-picker': {
+  //       loadOptions: async (cursor, search) => {
+  //         const offset = cursor ? parseInt(cursor, 10) : 0;
+  //         const limit = 20;
+  //         const res = await fetch(
+  //           `https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`,
+  //         );
+  //         const data: PokeApiListResponse = await res.json();
+  //         const options = data.results.map((p) => ({
+  //           label: p.name.charAt(0).toUpperCase() + p.name.slice(1),
+  //           value: p.name,
+  //         }));
+  //         const filtered = search
+  //           ? options.filter((o) =>
+  //               o.label.toLowerCase().includes(search.toLowerCase()),
+  //             )
+  //           : options;
+  //         const nextPageCursor = data.next ? String(offset + limit) : null;
+  //         return { options: filtered, nextPageCursor };
+  //       },
+  //     },
+  //   },
+  //
+  //   // Field mapping sources (available to all integrations)
+  //   mapObjectFields: {
+  //     // Static field mapping
+  //     Test: {
+  //       fields: [
+  //         { label: 'Title', value: 'title' },
+  //         { label: 'Description', value: 'description' },
+  //         { label: 'Completed?', value: 'isCompleted' },
+  //       ],
+  //     },
+  //
+  //     // Dynamic field mapping (PokeAPI)
+  //     Task: {
+  //       objectTypes: {
+  //         get: async (cursor, search) => {
+  //           const offset = cursor ? parseInt(cursor, 10) : 0;
+  //           const limit = 10;
+  //           const res = await fetch(
+  //             `https://pokeapi.co/api/v2/type?limit=${limit}&offset=${offset}`,
+  //           );
+  //           const data: PokeApiListResponse = await res.json();
+  //           const options = data.results.map((t) => ({
+  //             label: t.name.charAt(0).toUpperCase() + t.name.slice(1),
+  //             value: t.url.split('/').filter(Boolean).pop() as string,
+  //           }));
+  //           const filtered = search
+  //             ? options.filter((o) =>
+  //                 o.label.toLowerCase().includes(search.toLowerCase()),
+  //               )
+  //             : options;
+  //           const nextPageCursor = data.next ? String(offset + limit) : null;
+  //           return { options: filtered, nextPageCursor };
+  //         },
+  //       },
+  //       integrationFields: {
+  //         get: async ({ objectType }, cursor, search) => {
+  //           const offset = cursor ? parseInt(cursor, 10) : 0;
+  //           const limit = 20;
+  //           const res = await fetch(
+  //             `https://pokeapi.co/api/v2/type/${objectType}`,
+  //           );
+  //           const data: PokeApiTypeResponse = await res.json();
+  //           const all = data.pokemon.map((p) => ({
+  //             label:
+  //               p.pokemon.name.charAt(0).toUpperCase() +
+  //               p.pokemon.name.slice(1),
+  //             value: p.pokemon.name,
+  //           }));
+  //           const filtered = search
+  //             ? all.filter((o) =>
+  //                 o.label.toLowerCase().includes(search.toLowerCase()),
+  //               )
+  //             : all;
+  //           const page = filtered.slice(offset, offset + limit);
+  //           const nextPageCursor =
+  //             offset + limit < filtered.length ? String(offset + limit) : null;
+  //           return { options: page, nextPageCursor };
+  //         },
+  //       },
+  //       applicationFields: {
+  //         fields: [
+  //           { label: 'Name', value: 'name' },
+  //           { label: 'Type', value: 'type' },
+  //           { label: 'Base Experience', value: 'base_experience' },
+  //         ],
+  //         defaultFields: [],
+  //         userCanRemoveMappings: true,
+  //       },
+  //     },
+  //   },
+  //
+  //   // Integration-specific sources (override global sources for a given integration)
+  //   integrationSpecificSources: {
+  //     jira: {
+  //       dropdowns: {
+  //         'priority-level': [
+  //           { label: 'Lowest', value: 'lowest' },
+  //           { label: 'Low', value: 'low' },
+  //           { label: 'Medium', value: 'medium' },
+  //           { label: 'High', value: 'high' },
+  //           { label: 'Highest', value: 'highest' },
+  //         ],
+  //       },
+  //     },
+  //   },
+  // });
+
   return null;
 }
 

src/components/feature/combo-input.tsx

@@ -1,12 +1,19 @@
 import {
-  ComboInputDataSource,
   SidebarInputType,
+  type DefaultFieldValueSources,
   type SerializedConnectInput,
 } from '@useparagon/connect';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
-import { ComboboxField } from '@/components/form/combobox-field';
-import { useDataSourceOptions, useFieldOptions } from '@/lib/hooks';
+import {
+  PaginatedCombobox,
+  StaticComboDropdown,
+} from '@/components/form/paginated-combobox';
+import {
+  hasSourcePagination,
+  useSourcesForInput,
+} from '@/lib/hooks';
+import { FieldLabel } from '../form/field-label';
 
 export type ComboInputValue = {
   mainInput: string | undefined;
@@ -25,109 +32,80 @@ export function ComboInputField(props: Props) {
   const [mainInputSearch, setMainInputSearch] = useState('');
   const [dependentInputSearch, setDependentInputSearch] = useState('');
 
-  const { data: options } = useDataSourceOptions<ComboInputDataSource>(
+  const sources = useSourcesForInput(
     props.integration,
     props.field.sourceType as string,
+    props.field,
   );
 
-  const { data: mainInputOptions, isFetching: isFetchingMainInput } =
-    useFieldOptions({
-      integration: props.integration,
-      sourceType: options?.mainInputSource.cacheKey as string,
-      search: mainInputSearch,
-    });
-
-  const selectedMainOption = useMemo(
-    () =>
-      mainInputOptions.data.find(
-        (option) => option.value === props.value.mainInput,
-      ),
-    [mainInputOptions.data, props.value],
-  );
-
-  const { data: dependentInputOptions, isFetching: isFetchingDependentInput } =
-    useFieldOptions({
-      enabled: Boolean(props.value.mainInput),
-      integration: props.integration,
-      sourceType: options?.dependentInputSource.cacheKey as string,
-      parameters: [
-        {
-          cacheKey: options?.mainInputSource.cacheKey as string,
-          value: props.value.mainInput,
-        },
-      ],
-      search: dependentInputSearch,
-    });
+  const comboSources =
+    sources?.kind === 'defaultFieldValue'
+      ? (sources as DefaultFieldValueSources)
+      : null;
 
-  const selectedDependentInputOption = useMemo(
-    () =>
-      dependentInputOptions.data.find(
-        (option) => option.value === props.value.dependentInput,
-      ),
-    [dependentInputOptions.data, props.value],
-  );
-
-  const mainInputMeta = options?.mainInputSource;
-  const dependentInputMeta = options?.dependentInputSource;
+  const mainInputMeta = comboSources?.mainInputSource;
+  const dependentInputMeta = comboSources?.dependentInputSource;
 
   if (!mainInputMeta || !dependentInputMeta) {
     return null;
   }
 
+  const MainDropdown = hasSourcePagination(mainInputMeta)
+    ? PaginatedCombobox
+    : StaticComboDropdown;
+
+  const DependentDropdown = hasSourcePagination(dependentInputMeta)
+    ? PaginatedCombobox
+    : StaticComboDropdown;
+
   return (
     <>
+      <FieldLabel id={props.field.id} required={props.required}>
+        {props.field.title}
+      </FieldLabel>
       <div className="w-full flex gap-4">
-        <ComboboxField
+        <MainDropdown
           id={props.field.id}
           title={mainInputMeta.title}
           required={props.required}
           value={props.value.mainInput ?? null}
-          placeholder={selectedMainOption?.label ?? 'Select an option...'}
           onSelect={(value) =>
             props.onChange({
               mainInput: value ?? undefined,
               dependentInput: undefined,
             })
           }
-          isFetching={isFetchingMainInput}
-          onDebouncedChange={setMainInputSearch}
+          search={mainInputSearch}
+          onSearchChange={setMainInputSearch}
+          integration={props.integration}
+          source={mainInputMeta}
           allowClear
-        >
-          {mainInputOptions.data.map((option) => {
-            return (
-              <ComboboxField.Item key={option.value} value={option.value}>
-                {option.label}
-              </ComboboxField.Item>
-            );
-          })}
-        </ComboboxField>
-        <ComboboxField
+        />
+        <DependentDropdown
           id={props.field.id}
           title={dependentInputMeta.title}
           required={props.required}
           value={props.value.dependentInput ?? null}
-          placeholder={
-            selectedDependentInputOption?.label ?? 'Select an option...'
-          }
           onSelect={(value) =>
             props.onChange({
               mainInput: props.value.mainInput,
               dependentInput: value ?? undefined,
             })
           }
-          isFetching={isFetchingDependentInput}
-          onDebouncedChange={setDependentInputSearch}
+          search={dependentInputSearch}
+          onSearchChange={setDependentInputSearch}
+          integration={props.integration}
+          source={dependentInputMeta}
+          parameters={[
+            {
+              cacheKey: mainInputMeta.cacheKey as string,
+              value: props.value.mainInput,
+            },
+          ]}
+          enabled={Boolean(props.value.mainInput)}
           disabled={!props.value.mainInput}
           allowClear
-        >
-          {dependentInputOptions.data.map((option) => {
-            return (
-              <ComboboxField.Item key={option.value} value={option.value}>
-                {option.label}
-              </ComboboxField.Item>
-            );
-          })}
-        </ComboboxField>
+        />
       </div>
     </>
   );