@whatworks/payload-select-search-field 1.0.0 → 1.0.2

package/README.md

@@ -3,6 +3,11 @@
 Server-backed search select field and plugin for Payload. The client component queries a shared endpoint
 and passes the current search query plus any currently selected values.
 
+## Demo
+
+https://github.com/user-attachments/assets/0f49d3f9-8473-4d77-8e20-ee07a1276a8e
+
+
 ## Usage
 
 Add the plugin:
@@ -15,7 +20,7 @@ export default buildConfig({
 })
 ```
 
-Add a field with `selectSearch` (recommended):c
+Add a field with `selectSearch` (recommended):
 
 ```ts
 import { selectSearch } from '@whatworks/payload-select-search-field'
@@ -23,6 +28,8 @@ import { selectSearch } from '@whatworks/payload-select-search-field'
 selectSearch({
   name: 'stripeCustomer',
   hasMany: true,
+  passDataToSearchFunction: true,
+  passSiblingDataToSearchFunction: true,
   searchFunction: async ({ query, selectedValues }) => {
     return [
       { value: 'cus_123', label: `Result for ${query}` },
@@ -32,17 +39,14 @@ selectSearch({
       })),
     ]
   },
-  admin: {
-    components: {
-      Field: '@whatworks/payload-select-search-field/client#SelectSearchField',
-    },
-  },
 })
 ```
 
 `searchFunction` receives:
 - `query`: the current input text.
 - `selectedValues`: an array of currently selected values (empty array when nothing is selected).
+- `siblingData`: sibling field values for the current field path when `passSiblingDataToSearchFunction: true`.
+- `data`: full form data when `passDataToSearchFunction: true`.
 - `req`, `field`, and `collection`/`global` context.
 
 The client component calls the shared endpoint path from `selectSearchEndpoint`.

package/dist/endpoint.js

@@ -0,0 +1,111 @@
+import { getFieldByPath } from 'payload';
+import { selectSearchEndpoint } from './endpointName.js';
+const maxQueryLength = 200;
+const parseBody = async (req)=>{
+    if (typeof req.json === 'function') {
+        return await req.json();
+    }
+    if (req.body && typeof req.body === 'object') {
+        return req.body;
+    }
+    return {};
+};
+export const selectSearchEndpointHandler = ()=>({
+        method: 'post',
+        path: selectSearchEndpoint,
+        handler: async (req)=>{
+            if (!req.user) {
+                return Response.json({
+                    error: 'Unauthorized'
+                }, {
+                    status: 401
+                });
+            }
+            let body;
+            try {
+                body = await parseBody(req);
+            } catch (error) {
+                return Response.json({
+                    error: 'Invalid JSON body'
+                }, {
+                    status: 400
+                });
+            }
+            const { entityType, slug, schemaPath } = body;
+            if (entityType !== 'collection' && entityType !== 'global') {
+                return Response.json({
+                    error: 'Invalid entityType'
+                }, {
+                    status: 400
+                });
+            }
+            if (!slug || !schemaPath) {
+                return Response.json({
+                    error: 'Missing slug or schemaPath'
+                }, {
+                    status: 400
+                });
+            }
+            const safeQuery = String(body.query || '').slice(0, maxQueryLength);
+            const selectedValues = Array.isArray(body.selectedValues) ? body.selectedValues.map((value)=>String(value)) : [];
+            const config = req.payload.config;
+            const entityConfig = entityType === 'collection' ? config.collections?.find((collection)=>collection.slug === slug) : config.globals?.find((global)=>global.slug === slug);
+            if (!entityConfig) {
+                return Response.json({
+                    error: 'Unknown entity'
+                }, {
+                    status: 404
+                });
+            }
+            const fields = entityConfig.flattenedFields;
+            if (!Array.isArray(fields)) {
+                return Response.json({
+                    error: 'Fields not searchable'
+                }, {
+                    status: 400
+                });
+            }
+            const fieldResult = getFieldByPath({
+                fields,
+                path: schemaPath.split('.').slice(1).join('.')
+            });
+            if (!fieldResult) {
+                return Response.json({
+                    error: 'Field not found'
+                }, {
+                    status: 400
+                });
+            }
+            const searchFunction = fieldResult?.field?.custom?.searchFunction;
+            if (typeof searchFunction !== 'function') {
+                return Response.json({
+                    error: 'Field not searchable'
+                }, {
+                    status: 400
+                });
+            }
+            const collectionConfig = entityType === 'collection' ? entityConfig : undefined;
+            const globalConfig = entityType === 'global' ? entityConfig : undefined;
+            const options = await searchFunction({
+                req,
+                query: safeQuery,
+                selectedValues,
+                field: fieldResult.field,
+                collection: collectionConfig,
+                global: globalConfig
+            });
+            if (!Array.isArray(options)) {
+                return Response.json({
+                    error: 'Invalid searchFunction response'
+                }, {
+                    status: 500
+                });
+            }
+            const res = {
+                options
+            };
+            return Response.json(res);
+        }
+    });
+
+//# sourceMappingURL=endpoint.js.map

package/dist/endpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/endpoint.ts"],"sourcesContent":["import type {\n  Endpoint,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n} from 'payload'\nimport { getFieldByPath } from 'payload'\nimport type { SelectSearchRequest, SelectSearchResponse, SelectSearchFunction } from './types.js'\nimport { selectSearchEndpoint } from './endpointName.js'\n\nconst maxQueryLength = 200\n\nconst parseBody = async (req: PayloadRequest): Promise<Partial<SelectSearchRequest>> => {\n  if (typeof req.json === 'function') {\n    return (await req.json()) as Partial<SelectSearchRequest>\n  }\n\n  if (req.body && typeof req.body === 'object') {\n    return req.body as Partial<SelectSearchRequest>\n  }\n\n  return {}\n}\n\nexport const selectSearchEndpointHandler = (): Endpoint => ({\n  method: 'post',\n  path: selectSearchEndpoint,\n  handler: async (req: PayloadRequest) => {\n    if (!req.user) {\n      return Response.json({ error: 'Unauthorized' }, { status: 401 })\n    }\n\n    let body: Partial<SelectSearchRequest>\n    try {\n      body = await parseBody(req)\n    } catch (error) {\n      return Response.json({ error: 'Invalid JSON body' }, { status: 400 })\n    }\n\n    const { entityType, slug, schemaPath } = body\n    if (entityType !== 'collection' && entityType !== 'global') {\n      return Response.json({ error: 'Invalid entityType' }, { status: 400 })\n    }\n\n    if (!slug || !schemaPath) {\n      return Response.json({ error: 'Missing slug or schemaPath' }, { status: 400 })\n    }\n\n    const safeQuery = String(body.query || '').slice(0, maxQueryLength)\n    const selectedValues = Array.isArray(body.selectedValues)\n      ? body.selectedValues.map((value) => String(value))\n      : []\n\n    const config = req.payload.config\n    const entityConfig =\n      entityType === 'collection'\n        ? config.collections?.find((collection) => collection.slug === slug)\n        : config.globals?.find((global) => global.slug === slug)\n\n    if (!entityConfig) {\n      return Response.json({ error: 'Unknown entity' }, { status: 404 })\n    }\n\n    const fields = entityConfig.flattenedFields\n    if (!Array.isArray(fields)) {\n      return Response.json({ error: 'Fields not searchable' }, { status: 400 })\n    }\n\n    const fieldResult = getFieldByPath({\n      fields,\n      path: schemaPath.split('.').slice(1).join('.'),\n    })\n\n    if (!fieldResult) {\n      return Response.json({ error: 'Field not found' }, { status: 400 })\n    }\n\n    const searchFunction = fieldResult?.field?.custom?.searchFunction as\n      | SelectSearchFunction\n      | undefined\n\n    if (typeof searchFunction !== 'function') {\n      return Response.json({ error: 'Field not searchable' }, { status: 400 })\n    }\n\n    const collectionConfig =\n      entityType === 'collection' ? (entityConfig as SanitizedCollectionConfig) : undefined\n    const globalConfig =\n      entityType === 'global' ? (entityConfig as SanitizedGlobalConfig) : undefined\n\n    const options = await searchFunction({\n      req,\n      query: safeQuery,\n      selectedValues,\n      field: fieldResult.field,\n      collection: collectionConfig,\n      global: globalConfig,\n    })\n\n    if (!Array.isArray(options)) {\n      return Response.json({ error: 'Invalid searchFunction response' }, { status: 500 })\n    }\n\n    const res: SelectSearchResponse = {\n      options,\n    }\n\n    return Response.json(res)\n  },\n})\n"],"names":["getFieldByPath","selectSearchEndpoint","maxQueryLength","parseBody","req","json","body","selectSearchEndpointHandler","method","path","handler","user","Response","error","status","entityType","slug","schemaPath","safeQuery","String","query","slice","selectedValues","Array","isArray","map","value","config","payload","entityConfig","collections","find","collection","globals","global","fields","flattenedFields","fieldResult","split","join","searchFunction","field","custom","collectionConfig","undefined","globalConfig","options","res"],"mappings":"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"}

package/dist/endpointName.js

@@ -0,0 +1,3 @@
+export const selectSearchEndpoint = '/select-search';
+
+//# sourceMappingURL=endpointName.js.map

package/dist/endpointName.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/endpointName.ts"],"sourcesContent":["export const selectSearchEndpoint = '/select-search'\n"],"names":["selectSearchEndpoint"],"mappings":"AAAA,OAAO,MAAMA,uBAAuB,iBAAgB"}

package/dist/exports/client.js

@@ -0,0 +1,3 @@
+export { SelectSearchField } from '../ui/SelectSearchField.js';
+
+//# sourceMappingURL=client.js.map

package/dist/exports/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { SelectSearchField } from '../ui/SelectSearchField.js'\n"],"names":["SelectSearchField"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,6BAA4B"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { selectSearchPlugin as selectSearchPlugin } from './plugin.js';
+export { selectSearchEndpoint } from './endpointName.js';
+export { selectSearchEndpointHandler } from './endpoint.js';
+export { selectSearchField } from './selectSearchField.js';
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { selectSearchPlugin as selectSearchPlugin } from './plugin.js'\nexport { selectSearchEndpoint } from './endpointName.js'\nexport { selectSearchEndpointHandler } from './endpoint.js'\nexport { selectSearchField } from './selectSearchField.js'\nexport type {\n  SelectSearchFunction,\n  SelectSearchFunctionArgs,\n  SelectSearchOption,\n  SelectSearchRequest,\n  SelectSearchResponse,\n} from './types.js'\n"],"names":["selectSearchPlugin","selectSearchEndpoint","selectSearchEndpointHandler","selectSearchField"],"mappings":"AAAA,SAASA,sBAAsBA,kBAAkB,QAAQ,cAAa;AACtE,SAASC,oBAAoB,QAAQ,oBAAmB;AACxD,SAASC,2BAA2B,QAAQ,gBAAe;AAC3D,SAASC,iBAAiB,QAAQ,yBAAwB"}

package/dist/plugin.js

@@ -0,0 +1,12 @@
+import { selectSearchEndpointHandler } from './endpoint.js';
+export const selectSearchPlugin = ()=>{
+    return async (config)=>{
+        config.endpoints = [
+            ...config.endpoints || [],
+            selectSearchEndpointHandler()
+        ];
+        return config;
+    };
+};
+
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["import type { Plugin } from 'payload'\nimport { selectSearchEndpointHandler } from './endpoint.js'\n\nexport const selectSearchPlugin = (): Plugin => {\n  return async (config) => {\n    config.endpoints = [...(config.endpoints || []), selectSearchEndpointHandler()]\n    return config\n  }\n}\n"],"names":["selectSearchEndpointHandler","selectSearchPlugin","config","endpoints"],"mappings":"AACA,SAASA,2BAA2B,QAAQ,gBAAe;AAE3D,OAAO,MAAMC,qBAAqB;IAChC,OAAO,OAAOC;QACZA,OAAOC,SAAS,GAAG;eAAKD,OAAOC,SAAS,IAAI,EAAE;YAAGH;SAA8B;QAC/E,OAAOE;IACT;AACF,EAAC"}

package/dist/{src/selectSearchField.d.ts → selectSearchField.d.ts}

@@ -1,10 +1,11 @@
 import type { Field, TextField } from 'payload';
 import type { SelectSearchFunction } from './types.js';
-export type SelectSearchFieldArgs = Omit<TextField, 'admin' | 'custom' | 'type' | 'hasMany'> & {
+export type SelectSearchFieldArgs = {
+    admin?: TextField['admin'];
+    custom?: Record<string, unknown>;
     hasMany?: boolean;
-    type?: 'text';
+    passDataToSearchFunction?: boolean;
     searchFunction: SelectSearchFunction;
-    custom?: Record<string, unknown>;
-    admin?: TextField['admin'];
-};
+    type?: 'text';
+} & Omit<TextField, 'admin' | 'custom' | 'hasMany' | 'type'>;
 export declare const selectSearchField: (args: SelectSearchFieldArgs) => Field;

package/dist/selectSearchField.js

@@ -0,0 +1,20 @@
+export const selectSearchField = (args)=>{
+    const { searchFunction, ...rest } = args;
+    return {
+        ...rest,
+        type: 'text',
+        custom: {
+            ...args.custom,
+            searchFunction: args.searchFunction
+        },
+        admin: {
+            ...args.admin,
+            components: {
+                ...args.admin?.components,
+                Field: args.admin?.components?.Field ?? '@whatworks/payload-select-search-field/client#SelectSearchField'
+            }
+        }
+    };
+};
+
+//# sourceMappingURL=selectSearchField.js.map

package/dist/selectSearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selectSearchField.ts"],"sourcesContent":["import type { Field, TextField } from 'payload'\nimport type { SelectSearchFunction } from './types.js'\n\nexport type SelectSearchFieldArgs = Omit<TextField, 'admin' | 'custom' | 'type' | 'hasMany'> & {\n  hasMany?: boolean\n  type?: 'text'\n  searchFunction: SelectSearchFunction\n  custom?: Record<string, unknown>\n  admin?: TextField['admin']\n}\n\nexport const selectSearchField = (args: SelectSearchFieldArgs): Field => {\n  const { searchFunction, ...rest } = args\n  return {\n    ...rest,\n    type: 'text',\n    custom: {\n      ...args.custom,\n      searchFunction: args.searchFunction,\n    },\n    admin: {\n      ...args.admin,\n      components: {\n        ...args.admin?.components,\n        Field:\n          args.admin?.components?.Field ??\n          '@whatworks/payload-select-search-field/client#SelectSearchField',\n      },\n    },\n  } as Field\n}\n"],"names":["selectSearchField","args","searchFunction","rest","type","custom","admin","components","Field"],"mappings":"AAWA,OAAO,MAAMA,oBAAoB,CAACC;IAChC,MAAM,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGF;IACpC,OAAO;QACL,GAAGE,IAAI;QACPC,MAAM;QACNC,QAAQ;YACN,GAAGJ,KAAKI,MAAM;YACdH,gBAAgBD,KAAKC,cAAc;QACrC;QACAI,OAAO;YACL,GAAGL,KAAKK,KAAK;YACbC,YAAY;gBACV,GAAGN,KAAKK,KAAK,EAAEC,UAAU;gBACzBC,OACEP,KAAKK,KAAK,EAAEC,YAAYC,SACxB;YACJ;QACF;IACF;AACF,EAAC"}

package/dist/{src/types.d.ts → types.d.ts}

@@ -1,24 +1,28 @@
-import type { FlattenedField, PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload';
+import type { Data, FlattenedField, PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload';
 export type SelectSearchOption = {
+    [key: string]: unknown;
     label: string;
     value: string;
-    [key: string]: unknown;
 };
 export type SelectSearchFunctionArgs = {
-    req: PayloadRequest;
-    query: string;
-    selectedValues: string[];
-    field: FlattenedField;
     collection?: SanitizedCollectionConfig;
+    data?: Data;
+    field: FlattenedField;
     global?: SanitizedGlobalConfig;
+    query: string;
+    req: PayloadRequest;
+    selectedValues: string[];
+    siblingData?: Data;
 };
 export type SelectSearchFunction = (args: SelectSearchFunctionArgs) => Promise<SelectSearchOption[]> | SelectSearchOption[];
 export type SelectSearchRequest = {
+    data?: Data;
     entityType: 'collection' | 'global';
-    slug: string;
-    schemaPath: string;
     query?: string;
+    schemaPath: string;
     selectedValues?: string[];
+    siblingData?: Data;
+    slug: string;
 };
 export type SelectSearchResponse = {
     options: SelectSearchOption[];

package/dist/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type {\n  FlattenedField,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n} from 'payload'\n\nexport type SelectSearchOption = {\n  label: string\n  value: string\n  [key: string]: unknown\n}\n\nexport type SelectSearchFunctionArgs = {\n  req: PayloadRequest\n  query: string\n  selectedValues: string[]\n  field: FlattenedField\n  collection?: SanitizedCollectionConfig\n  global?: SanitizedGlobalConfig\n}\n\nexport type SelectSearchFunction = (\n  args: SelectSearchFunctionArgs,\n) => Promise<SelectSearchOption[]> | SelectSearchOption[]\n\nexport type SelectSearchRequest = {\n  entityType: 'collection' | 'global'\n  slug: string\n  schemaPath: string\n  query?: string\n  selectedValues?: string[]\n}\n\nexport type SelectSearchResponse = {\n  options: SelectSearchOption[]\n}\n"],"names":[],"mappings":"AAkCA,WAEC"}

package/dist/ui/SelectSearchField.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectInput, useConfig, useDocumentInfo, useField } from '@payloadcms/ui';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { selectSearchEndpoint } from '../endpointName.js';
+const debounceMs = 300;
+export const SelectSearchField = (props)=>{
+    const { field, path, schemaPath: schemaPathProp } = props;
+    const { value, setValue, showError } = useField({
+        path
+    });
+    const { collectionSlug, globalSlug } = useDocumentInfo();
+    const { config } = useConfig();
+    const [options, setOptions] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const [remoteError, setRemoteError] = useState(null);
+    const abortRef = useRef(null);
+    const entityType = globalSlug ? 'global' : 'collection';
+    const slug = globalSlug || collectionSlug;
+    const schemaPath = schemaPathProp ?? field.name;
+    const hasMany = field.hasMany ?? false;
+    const apiPath = config.routes?.api || '/api';
+    const apiRoute = apiPath.startsWith('/') ? apiPath : `/${apiPath}`;
+    const baseURL = config.serverURL || '';
+    const endpointURL = `${baseURL}${apiRoute}${selectSearchEndpoint}`;
+    const selectedValues = useMemo(()=>{
+        if (hasMany) {
+            return Array.isArray(value) ? value.map((entry)=>String(entry)) : [];
+        }
+        if (Array.isArray(value) || value === null || value === undefined) {
+            return [];
+        }
+        return [
+            String(value)
+        ];
+    }, [
+        hasMany,
+        value
+    ]);
+    const fetchOptions = useCallback(async (query)=>{
+        if (!slug || !schemaPath) {
+            setOptions([]);
+            return;
+        }
+        if (abortRef.current) {
+            abortRef.current.abort();
+        }
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setRemoteError(null);
+        const res = await fetch(endpointURL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'include',
+            signal: controller.signal,
+            body: JSON.stringify({
+                entityType,
+                slug,
+                schemaPath,
+                query,
+                selectedValues
+            })
+        });
+        if (!res.ok) {
+            const errorBody = await res.json().catch(()=>null);
+            const message = errorBody?.error || 'Failed to fetch options';
+            setRemoteError(message);
+            setOptions([]);
+            return;
+        }
+        const data = await res.json();
+        setOptions(Array.isArray(data.options) ? data.options : []);
+    }, [
+        endpointURL,
+        entityType,
+        schemaPath,
+        selectedValues,
+        slug
+    ]);
+    useEffect(()=>{
+        if (!slug || !schemaPath) {
+            return;
+        }
+        const timeout = setTimeout(()=>{
+            void fetchOptions(inputValue);
+        }, debounceMs);
+        return ()=>{
+            clearTimeout(timeout);
+        };
+    }, [
+        fetchOptions,
+        inputValue,
+        schemaPath,
+        slug
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            if (abortRef.current) {
+                abortRef.current.abort();
+            }
+        };
+    }, []);
+    const handleChange = useCallback((option)=>{
+        if (Array.isArray(option)) {
+            const values = option.map((entry)=>String(entry.value));
+            setValue(values);
+            return;
+        }
+        if (!option) {
+            setValue(hasMany ? [] : null);
+            return;
+        }
+        setValue(String(option.value));
+    }, [
+        hasMany,
+        setValue
+    ]);
+    const description = useMemo(()=>{
+        if (remoteError) {
+            return remoteError;
+        }
+        return field.admin?.description;
+    }, [
+        field.admin?.description,
+        remoteError
+    ]);
+    const selectValue = useMemo(()=>{
+        if (hasMany) {
+            return Array.isArray(value) ? value : [];
+        }
+        return Array.isArray(value) ? '' : value ?? '';
+    }, [
+        hasMany,
+        value
+    ]);
+    return /*#__PURE__*/ _jsx(SelectInput, {
+        description: description,
+        hasMany: hasMany,
+        label: field.label,
+        localized: field.localized,
+        name: field.name,
+        onChange: handleChange,
+        onInputChange: setInputValue,
+        options: options,
+        path: path,
+        required: field.required,
+        showError: showError,
+        value: selectValue
+    });
+};
+
+//# sourceMappingURL=SelectSearchField.js.map

package/dist/ui/SelectSearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/SelectSearchField.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject, TextFieldClientComponent } from 'payload'\nimport type { ReactSelectOption } from '@payloadcms/ui'\nimport { SelectInput, useConfig, useDocumentInfo, useField } from '@payloadcms/ui'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { selectSearchEndpoint } from '../endpointName.js'\n\nconst debounceMs = 300\n\nexport const SelectSearchField: TextFieldClientComponent = (props) => {\n  const { field, path, schemaPath: schemaPathProp } = props\n\n  const { value, setValue, showError } = useField<string | string[]>({\n    path,\n  })\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const { config } = useConfig()\n\n  const [options, setOptions] = useState<OptionObject[]>([])\n\n  const [inputValue, setInputValue] = useState('')\n  const [remoteError, setRemoteError] = useState<string | null>(null)\n\n  const abortRef = useRef<AbortController | null>(null)\n\n  const entityType = globalSlug ? 'global' : 'collection'\n  const slug = globalSlug || collectionSlug\n\n  const schemaPath = schemaPathProp ?? field.name\n  const hasMany = field.hasMany ?? false\n\n  const apiPath = config.routes?.api || '/api'\n  const apiRoute = apiPath.startsWith('/') ? apiPath : `/${apiPath}`\n  const baseURL = config.serverURL || ''\n  const endpointURL = `${baseURL}${apiRoute}${selectSearchEndpoint}`\n\n  const selectedValues = useMemo(() => {\n    if (hasMany) {\n      return Array.isArray(value) ? value.map((entry) => String(entry)) : []\n    }\n\n    if (Array.isArray(value) || value === null || value === undefined) {\n      return []\n    }\n\n    return [String(value)]\n  }, [hasMany, value])\n\n  const fetchOptions = useCallback(\n    async (query: string) => {\n      if (!slug || !schemaPath) {\n        setOptions([])\n        return\n      }\n\n      if (abortRef.current) {\n        abortRef.current.abort()\n      }\n\n      const controller = new AbortController()\n      abortRef.current = controller\n\n      setRemoteError(null)\n\n      const res = await fetch(endpointURL, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        credentials: 'include',\n        signal: controller.signal,\n        body: JSON.stringify({\n          entityType,\n          slug,\n          schemaPath,\n          query,\n          selectedValues,\n        }),\n      })\n\n      if (!res.ok) {\n        const errorBody = await res.json().catch(() => null)\n        const message = errorBody?.error || 'Failed to fetch options'\n        setRemoteError(message)\n        setOptions([])\n        return\n      }\n\n      const data = (await res.json()) as { options?: OptionObject[] }\n      setOptions(Array.isArray(data.options) ? data.options : [])\n    },\n    [endpointURL, entityType, schemaPath, selectedValues, slug],\n  )\n\n  useEffect(() => {\n    if (!slug || !schemaPath) {\n      return\n    }\n\n    const timeout = setTimeout(() => {\n      void fetchOptions(inputValue)\n    }, debounceMs)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [fetchOptions, inputValue, schemaPath, slug])\n\n  useEffect(() => {\n    return () => {\n      if (abortRef.current) {\n        abortRef.current.abort()\n      }\n    }\n  }, [])\n\n  const handleChange = useCallback(\n    (option: ReactSelectOption | ReactSelectOption[] | null) => {\n      if (Array.isArray(option)) {\n        const values = option.map((entry) => String(entry.value))\n        setValue(values)\n        return\n      }\n\n      if (!option) {\n        setValue(hasMany ? [] : null)\n        return\n      }\n\n      setValue(String(option.value))\n    },\n    [hasMany, setValue],\n  )\n\n  const description = useMemo(() => {\n    if (remoteError) {\n      return remoteError\n    }\n\n    return field.admin?.description\n  }, [field.admin?.description, remoteError])\n\n  const selectValue = useMemo(() => {\n    if (hasMany) {\n      return Array.isArray(value) ? value : []\n    }\n\n    return Array.isArray(value) ? '' : (value ?? '')\n  }, [hasMany, value])\n\n  return (\n    <SelectInput\n      description={description}\n      hasMany={hasMany}\n      label={field.label as string}\n      localized={field.localized}\n      name={field.name}\n      onChange={handleChange as (value: ReactSelectOption | ReactSelectOption[]) => void}\n      onInputChange={setInputValue}\n      options={options}\n      path={path}\n      required={field.required}\n      showError={showError}\n      value={selectValue}\n    />\n  )\n}\n"],"names":["SelectInput","useConfig","useDocumentInfo","useField","useCallback","useEffect","useMemo","useRef","useState","selectSearchEndpoint","debounceMs","SelectSearchField","props","field","path","schemaPath","schemaPathProp","value","setValue","showError","collectionSlug","globalSlug","config","options","setOptions","inputValue","setInputValue","remoteError","setRemoteError","abortRef","entityType","slug","name","hasMany","apiPath","routes","api","apiRoute","startsWith","baseURL","serverURL","endpointURL","selectedValues","Array","isArray","map","entry","String","undefined","fetchOptions","query","current","abort","controller","AbortController","res","fetch","method","headers","credentials","signal","body","JSON","stringify","ok","errorBody","json","catch","message","error","data","timeout","setTimeout","clearTimeout","handleChange","option","values","description","admin","selectValue","label","localized","onChange","onInputChange","required"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatworks/payload-select-search-field",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Payload plugin and field component for server-backed search select fields.",
   "license": "MIT",
   "type": "module",
@@ -11,6 +11,11 @@
     "LICENSE.md",
     "README.md"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/what-works-global/payload-packages",
+    "directory": "packages/select-search-field"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -37,9 +42,15 @@
     "@payloadcms/db-mongodb": "^3.0.0",
     "@payloadcms/eslint-config": "^3.0.0",
     "@payloadcms/next": "^3.0.0",
-    "@types/node": "^22.5.4",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.2",
+    "@swc-node/register": "1.10.9",
+    "@swc/cli": "0.6.0",
+    "@types/node": "22.19.9",
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "15.4.11",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "next": "^16.1.6",
@@ -49,15 +60,19 @@
     "typescript": "5.5.3"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.json",
-    "clean": "rimraf {dist,*.tsbuildinfo,package}",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "dev": "next dev dev",
-    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --outDir dist --rootDir ./src",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "dev": "next dev dev --turbo",
     "dev:generate-importmap": "pnpm dev:payload generate:importmap",
     "dev:generate-types": "pnpm dev:payload generate:types",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "typecheck": "tsc --noEmit"
+    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "generate:importmap": "pnpm dev:generate-importmap",
+    "generate:types": "pnpm dev:generate-types",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "typecheck": "tsc --outDir dist --rootDir ./src"
   }
 }