@srothgan/sanity-plugin-autocomplete-input 3.0.0 → 3.0.2

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright © 2025 Simon Peter Rothgang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,121 +1,197 @@
-# @srothgan/sanity-plugin-autocomplete-input
-
-[![npm version](https://img.shields.io/npm/v/@srothgan/sanity-plugin-autocomplete-input)](https://www.npmjs.com/package/@srothgan/sanity-plugin-autocomplete-input)
-[![Original Repository](https://img.shields.io/badge/original-LiamMartens%2Fsanity--plugin--autocomplete--input-blue)](https://github.com/LiamMartens/sanity-plugin-autocomplete-input)
-
-![example](https://raw.githubusercontent.com/LiamMartens/sanity-plugin-autocomplete-input/main/docs/img/example.gif)
-
-This plugin is similar to the [Autocomplete Tags Plugin](https://www.sanity.io/plugins/autocomplete-tags), but it acts as a single text input as opposed to an array of tags. The input can also be customized to change the autocomplete options.
-
-**Successor to [sanity-plugin-autocomplete-input](https://github.com/LiamMartens/sanity-plugin-autocomplete-input)**  
-Original by [@LiamMartens](https://github.com/LiamMartens) (last updated 2023).  
-This maintained fork adds Sanity v4 & v5 compatibility and modern tooling.
-
-> **Note**: A PR with these changes was submitted to the original repository.  
-> If the original becomes active again, this fork may redirect users back.
-
-## Compatibility
-
-- **v3.x:** Sanity Studio v4 & v5 (Node.js v20.19+, React 18 or 19)
-  - Fully compatible with both Sanity v4 and v5
-  - Supports React 18 (Sanity v4) and React 19 (Sanity v5)
-- **v2.x:** Sanity Studio v3 (Node.js v18+, React 18)
-- **v1.x:** Sanity Studio v2
-
-## Installation
-
-```
-npm install --save @srothgan/sanity-plugin-autocomplete-input
-```
-
-or
-
-```
-yarn add @srothgan/sanity-plugin-autocomplete-input
-```
-
-## Usage
-
-Add it as a plugin in sanity.config.ts (or .js):
-
-```js
-import { autocompletInput } from "@srothgan/sanity-plugin-autocomplete-input";
-
-export default defineConfig({
-  // ...
-  plugins: [autocompletInput()],
-});
-```
-
-You can just use it as a schema type. To customize the autocomplete list you have 3 options:
-
-1. Specify the `autocompleteFieldPath` option, which the plugin will use to look for documents with the same field path to aggregate the option values.
-2. Manually specify options in the schema option
-3. Specify your own GROQ query returning a `[{ "value": "foobar" }]` format (you can use a `transform` function if this is not achievable using GROQ only)
-
-```javascript
-export default {
-  fields: [
-    {
-      name: "autocomplete-input",
-      type: "autocomplete",
-      options: {
-        // specify field path
-        autocompleteFieldPath: "title",
-        // this option can be used to disable using "new" values
-        disableNew: false,
-        // manually specify options
-        options: [{ value: "Option 1" }, { value: "Option 2" }],
-        // specify custom groq query
-        groq: {
-          query: '*[_type == $type] { "value": title }',
-          params: {
-            type: "page",
-          },
-          transform: (values) => values,
-        },
-      },
-    },
-  ],
-};
-```
-
-### Advanced GROQ parameters
-
-It is also possible to refer to the current parent value (for a top-level field this would be the current document) by passing a function to the `params` option:
-
-```javascript
-export default {
-  fields: [
-    {
-      name: "autocomplete-input",
-      type: "autocomplete",
-      options: {
-        groq: {
-          query: "*[_id != $docId]",
-          params: (parent) => ({
-            docId: parent?._id,
-          }),
-        },
-      },
-    },
-  ],
-};
-```
-
-## Differences from Original
-
-This maintained fork includes the following enhancements:
-
-### Updated Dependencies
-- **Sanity v4 & v5 Support**: Fully compatible with both Sanity Studio v4 and v5
-- **React 18 & 19 Support**: Works with React 18 (Sanity v4) and React 19 (Sanity v5)
-- **Modern Build Tooling**: Migrated from Babel to SWC for faster builds
-- **TypeScript 5.3**: Updated to latest TypeScript with improved type safety
-
-### Maintained & Active
-- Regular dependency updates for security and compatibility
-- Active issue tracking and bug fixes
-- Community-driven improvements
-
-All original functionality and API remain unchanged for seamless migration.
+# @srothgan/sanity-plugin-autocomplete-input
+
+[![npm version](https://img.shields.io/npm/v/@srothgan/sanity-plugin-autocomplete-input)](https://www.npmjs.com/package/@srothgan/sanity-plugin-autocomplete-input)
+[![Original Repository](https://img.shields.io/badge/original-LiamMartens%2Fsanity--plugin--autocomplete--input-blue)](https://github.com/LiamMartens/sanity-plugin-autocomplete-input)
+
+![example](https://raw.githubusercontent.com/LiamMartens/sanity-plugin-autocomplete-input/main/docs/img/example.gif)
+
+This plugin is similar to the [Autocomplete Tags Plugin](https://www.sanity.io/plugins/autocomplete-tags), but it acts as a single text input as opposed to an array of tags. The input can also be customized to change the autocomplete options.
+
+**Successor to [sanity-plugin-autocomplete-input](https://github.com/LiamMartens/sanity-plugin-autocomplete-input)**  
+Original by [@LiamMartens](https://github.com/LiamMartens) (last updated 2023).  
+This maintained fork adds Sanity v4 & v5 compatibility and modern tooling.
+
+> **Note**: A PR with these changes was submitted to the original repository.  
+> If the original becomes active again, this fork may redirect users back.
+
+## Compatibility
+
+- **v3.x:** Sanity Studio v4 & v5 (Node.js v20.19+, React 18 or 19)
+  - Fully compatible with both Sanity v4 and v5
+  - Supports React 18 (Sanity v4) and React 19 (Sanity v5)
+- **v2.x:** Sanity Studio v3 (Node.js v18+, React 18)
+- **v1.x:** Sanity Studio v2
+
+## Installation
+
+```
+npm install --save @srothgan/sanity-plugin-autocomplete-input
+```
+
+or
+
+```
+yarn add @srothgan/sanity-plugin-autocomplete-input
+```
+
+## Usage
+
+Add it as a plugin in sanity.config.ts (or .js):
+
+```js
+import { autocompletInput } from "@srothgan/sanity-plugin-autocomplete-input";
+
+export default defineConfig({
+  // ...
+  plugins: [autocompletInput()],
+});
+```
+
+You can just use it as a schema type. To customize the autocomplete list you have 3 options:
+
+1. Specify the `autocompleteFieldPath` option, which the plugin will use to look for documents with the same field path to aggregate the option values.
+2. Manually specify options in the schema option
+3. Specify your own GROQ query returning a `[{ "value": "foobar" }]` format (you can use a `transform` function if this is not achievable using GROQ only)
+
+```javascript
+export default {
+  fields: [
+    {
+      name: "autocomplete-input",
+      type: "autocomplete",
+      options: {
+        // specify field path
+        autocompleteFieldPath: "title",
+        // this option can be used to disable using "new" values
+        disableNew: false,
+        // manually specify options
+        options: [{ value: "Option 1" }, { value: "Option 2" }],
+        // specify custom groq query
+        groq: {
+          query: '*[_type == $type] { "value": title }',
+          params: {
+            type: "page",
+          },
+          transform: (values) => values,
+        },
+      },
+    },
+  ],
+};
+```
+
+### Advanced GROQ parameters
+
+It is also possible to refer to the current parent value (for a top-level field this would be the current document) by passing a function to the `params` option:
+
+```javascript
+export default {
+  fields: [
+    {
+      name: "autocomplete-input",
+      type: "autocomplete",
+      options: {
+        groq: {
+          query: "*[_id != $docId]",
+          params: (parent) => ({
+            docId: parent?._id,
+          }),
+        },
+      },
+    },
+  ],
+};
+```
+
+## Differences from Original
+
+This maintained fork includes the following enhancements:
+
+### Updated Dependencies
+- **Sanity v4 & v5 Support**: Fully compatible with both Sanity Studio v4 and v5
+- **React 18 & 19 Support**: Works with React 18 (Sanity v4) and React 19 (Sanity v5)
+- **Modern Build Tooling**: Migrated from Babel to SWC for faster builds
+- **TypeScript 5.3**: Updated to latest TypeScript with improved type safety
+
+### Maintained & Active
+- Regular dependency updates for security and compatibility
+- Active issue tracking and bug fixes
+- Community-driven improvements
+
+All original functionality and API remain unchanged for seamless migration.
+
+## TypeScript Usage
+
+The plugin is written in TypeScript and exports all necessary types:
+
+```typescript
+import { defineConfig } from 'sanity'
+import { autocompletInput } from '@srothgan/sanity-plugin-autocomplete-input'
+import type { InputOptions } from '@srothgan/sanity-plugin-autocomplete-input'
+
+export default defineConfig({
+  // ...
+  plugins: [autocompletInput()],
+  schema: {
+    types: [
+      {
+        name: 'myDocument',
+        type: 'document',
+        fields: [
+          {
+            name: 'category',
+            type: 'autocomplete',
+            options: {
+              autocompleteFieldPath: 'category',
+              disableNew: false,
+            } satisfies InputOptions,
+          },
+        ],
+      },
+    ],
+  },
+})
+```
+
+## Troubleshooting
+
+### Plugin not appearing in Studio
+Make sure you've added the plugin to your `sanity.config.ts`:
+```typescript
+import { autocompletInput } from '@srothgan/sanity-plugin-autocomplete-input'
+
+export default defineConfig({
+  plugins: [autocompletInput()],
+})
+```
+
+### Autocomplete options not loading
+- Verify your GROQ query returns data in the format `[{ "value": "..." }]`
+- Check the browser console for any query errors
+- Ensure the `autocompleteFieldPath` matches an existing field in your documents
+
+### TypeScript errors
+Make sure your `tsconfig.json` includes:
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  }
+}
+```
+
+## Contributing
+
+Contributions are welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to contribute to this project.
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for a list of changes and version history.
+
+## License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+Original work by [Liam Martens](https://github.com/LiamMartens)  
+Maintained fork by [Simon Rothgang](https://github.com/srothgan)

package/lib/AutoCompleteInput.js

@@ -35,7 +35,7 @@ export const AutoCompleteInput = (props)=>{
         canCreateNew
     ]);
     const handleQueryChange = useCallback((query)=>{
-        setQuery(query ?? '');
+        setQuery(query ?? "");
     }, []);
     const handleChange = useCallback((value)=>{
         onChange(PatchEvent.from(value ? set(value) : unset()));
@@ -44,28 +44,31 @@ export const AutoCompleteInput = (props)=>{
     ]);
     useEffect(()=>{
         if (schemaType.options?.options) {
-            setLoading(false);
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setOptions(schemaType.options.options);
-        } else {
-            const path = schemaType.options?.autocompleteFieldPath ?? "title";
-            const { query, transform, params = {} } = schemaType.options?.groq || {
-                query: `*[defined(${path})] { "value": ${path} }`
-            };
-            const resolvedParams = typeof params === "function" ? params(documentValue) : params;
-            sanityClient.fetch(query, resolvedParams).then((results)=>{
-                if (Array.isArray(results)) {
-                    const transformedResults = transform ? transform(results) : results;
-                    const compactedValues = compact(transformedResults.map((doc)=>get(doc, "value")));
-                    setLoading(false);
-                    setOptions(compactedValues.map((value)=>({
-                            value: String(value)
-                        })));
-                }
-            });
+            setLoading(false);
+            return;
         }
+        const path = schemaType.options?.autocompleteFieldPath ?? "title";
+        const { query, transform, params = {} } = schemaType.options?.groq || {
+            query: `*[defined(${path})] { "value": ${path} }`
+        };
+        const resolvedParams = typeof params === "function" ? params(documentValue) : params;
+        setLoading(true);
+        sanityClient.fetch(query, resolvedParams).then((results)=>{
+            if (Array.isArray(results)) {
+                const transformedResults = transform ? transform(results) : results;
+                const compactedValues = compact(transformedResults.map((doc)=>get(doc, "value")));
+                setOptions(compactedValues.map((value)=>({
+                        value: String(value)
+                    })));
+                setLoading(false);
+            }
+        });
     }, [
-        query,
-        schemaType.options
+        schemaType.options,
+        documentValue,
+        sanityClient
     ]);
     return /*#__PURE__*/ React.createElement(Autocomplete, {
         id: id,

package/package.json

@@ -1,63 +1,82 @@
-{
-  "name": "@srothgan/sanity-plugin-autocomplete-input",
-  "version": "3.0.0",
-  "license": "MIT",
-  "type": "module",
-  "types": "./lib/index.d.ts",
-  "module": "./lib/index.js",
-  "exports": {
-    ".": {
-      "types": "./lib/index.d.ts",
-      "import": "./lib/index.js",
-      "default": "./lib/index.js"
-    }
-  },
-  "browserslist": "> 0.5%, last 2 versions, not dead",
-  "files": [
-    "lib"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/srothgan/srothgan-sanity-plugin-autocomplete-input"
-  },
-  "bugs": {
-    "url": "https://github.com/srothgan/srothgan-sanity-plugin-autocomplete-input/issues"
-  },
-  "author": {
-    "name": "Simon Rothgang",
-    "email": "simonrothgang@gmail.com"
-  },
-  "contributors": [
-    {
-      "name": "Liam Martens",
-      "email": "liam@freighter.studio",
-      "url": "https://github.com/LiamMartens"
-    }
-  ],
-  "keywords": ["sanity-plugin", "autocomplete", "v4", "v5", "maintained", "input", "sanity-v5"],
-  "devDependencies": {
-    "@sanity/ui": "^3.1.11",
-    "@swc/cli": "^0.7.9",
-    "@swc/core": "^1.3.99",
-    "@types/node": "^20.19.0",
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.17",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "sanity": "^5.1.0",
-    "styled-components": "^6.1.19",
-    "typescript": "~5.3.2"
-  },
-  "dependencies": {
-    "just-compact": "^3.2.0",
-    "just-pick": "^4.2.0",
-    "just-safe-get": "^4.2.0",
-    "just-unique": "^4.2.0",
-    "npm-run-all": "^4.1.5"
-  },
-  "scripts": {
-    "build:js": "swc ./src -d ./lib --strip-leading-paths",
-    "build:types": "tsc -p .",
-    "build": "run-p build:*"
-  }
-}
+{
+  "name": "@srothgan/sanity-plugin-autocomplete-input",
+  "version": "3.0.2",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build:js": "swc ./src -d ./lib --strip-leading-paths",
+    "build:types": "tsc -p .",
+    "build": "run-p build:*",
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "lint:fix": "eslint src/**/*.{ts,tsx} --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json}\""
+  },
+  "types": "./lib/index.d.ts",
+  "module": "./lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    }
+  },
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "files": [
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/srothgan/srothgan-sanity-plugin-autocomplete-input"
+  },
+  "bugs": {
+    "url": "https://github.com/srothgan/srothgan-sanity-plugin-autocomplete-input/issues"
+  },
+  "author": {
+    "name": "Simon Rothgang",
+    "email": "simonrothgang@gmail.com"
+  },
+  "contributors": [
+    {
+      "name": "Liam Martens",
+      "email": "liam@freighter.studio",
+      "url": "https://github.com/LiamMartens"
+    }
+  ],
+  "keywords": [
+    "sanity-plugin",
+    "autocomplete",
+    "v4",
+    "v5",
+    "maintained",
+    "input",
+    "sanity-v5"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@sanity/ui": "^3.1.11",
+    "@swc/cli": "^0.7.9",
+    "@swc/core": "^1.3.99",
+    "@types/node": "^20.19.0",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sanity": "^5.1.0",
+    "styled-components": "^6.1.19",
+    "typescript": "~5.3.2"
+  },
+  "dependencies": {
+    "just-compact": "^3.2.0",
+    "just-pick": "^4.2.0",
+    "just-safe-get": "^4.2.0",
+    "just-unique": "^4.2.0"
+  }
+}

package/lib/src/AutoCompleteInput.js

@@ -1,87 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import get from "just-safe-get";
-import compact from "just-compact";
-import unique from "just-unique";
-import { Autocomplete, Text, Card } from "@sanity/ui";
-import { PatchEvent, set, unset, useClient, useFormValue } from "sanity";
-export const AutoCompleteInput = (props)=>{
-    const { id, schemaType, value, validationError, readOnly, onChange } = props;
-    const sanityClient = useClient();
-    const documentValue = useFormValue([]);
-    const [loading, setLoading] = useState(false);
-    const [query, setQuery] = React.useState("");
-    const [options, setOptions] = React.useState([]);
-    const canCreateNew = schemaType.options?.disableNew !== true;
-    const optionsList = useMemo(()=>{
-        const uniqueOptions = unique(options.map(({ value })=>value), false, true);
-        const queryInOptions = uniqueOptions.find((value)=>value === query);
-        if (!queryInOptions && canCreateNew) {
-            return [
-                ...uniqueOptions.map((value)=>({
-                        value
-                    })),
-                {
-                    value: query,
-                    isNew: true
-                }
-            ];
-        }
-        return uniqueOptions.map((value)=>({
-                value
-            }));
-    }, [
-        query,
-        options,
-        canCreateNew
-    ]);
-    const handleQueryChange = useCallback((query)=>{
-        setQuery(query ?? '');
-    }, []);
-    const handleChange = useCallback((value)=>{
-        onChange(PatchEvent.from(value ? set(value) : unset()));
-    }, [
-        onChange
-    ]);
-    useEffect(()=>{
-        if (schemaType.options?.options) {
-            setLoading(false);
-            setOptions(schemaType.options.options);
-        } else {
-            const path = schemaType.options?.autocompleteFieldPath ?? "title";
-            const { query, transform, params = {} } = schemaType.options?.groq || {
-                query: `*[defined(${path})] { "value": ${path} }`
-            };
-            const resolvedParams = typeof params === "function" ? params(documentValue) : params;
-            sanityClient.fetch(query, resolvedParams).then((results)=>{
-                if (Array.isArray(results)) {
-                    const transformedResults = transform ? transform(results) : results;
-                    const compactedValues = compact(transformedResults.map((doc)=>get(doc, "value")));
-                    setLoading(false);
-                    setOptions(compactedValues.map((value)=>({
-                            value: String(value)
-                        })));
-                }
-            });
-        }
-    }, [
-        query,
-        schemaType.options
-    ]);
-    return /*#__PURE__*/ React.createElement(Autocomplete, {
-        id: id,
-        readOnly: readOnly ?? false,
-        customValidity: validationError,
-        loading: loading,
-        disabled: loading,
-        options: optionsList,
-        value: value ?? "",
-        onChange: handleChange,
-        onQueryChange: handleQueryChange,
-        renderOption: (option)=>/*#__PURE__*/ React.createElement(Card, {
-                as: "button",
-                padding: 3,
-                tone: option.isNew ? "primary" : "default",
-                shadow: 1
-            }, option.isNew ? canCreateNew && /*#__PURE__*/ React.createElement(Text, null, 'Create new option "', option.value, '"') : /*#__PURE__*/ React.createElement(Text, null, option.value))
-    });
-};

package/lib/src/index.js

@@ -1,10 +0,0 @@
-import { definePlugin } from "sanity";
-import { autocompleteString } from "./schemas/autocompleteString";
-export const autocompletInput = definePlugin({
-    name: "sanity-plugin-autocomplete-input",
-    schema: {
-        types: [
-            autocompleteString
-        ]
-    }
-});

package/lib/src/schemas/autocompleteString.js

@@ -1,11 +0,0 @@
-import { defineType } from "sanity";
-import { AutoCompleteInput } from "../AutoCompleteInput";
-const typeName = "autocomplete";
-export const autocompleteString = defineType({
-    name: typeName,
-    type: "string",
-    title: "Autocomplete",
-    components: {
-        input: AutoCompleteInput
-    }
-});

package/lib/src/types/InputOptions.js

@@ -1 +0,0 @@
-export { };

package/lib/src/types/Option.js

@@ -1 +0,0 @@
-export { };

package/lib/src/types/index.js

@@ -1 +0,0 @@
-export { };