sanity-plugin-iconify 3.0.0 → 4.0.1

package/dist/index.mjs

@@ -0,0 +1,434 @@
+import { definePlugin, set, unset } from "sanity";
+import { Box, Button, Card, Flex, Grid, Popover, Stack, Text, TextInput, ThemeProvider, useToast } from "@sanity/ui";
+import { buildTheme } from "@sanity/ui/theme";
+import { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCombobox } from "downshift";
+import { match } from "ts-pattern";
+import { QueryClient, QueryClientProvider, keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+import { TrashIcon } from "@sanity/icons";
+import { stringToIcon } from "@iconify/utils";
+import { sentenceCase } from "change-case";
+//#region src/lib/api.ts
+const BASE_API_URL = "https://api.iconify.design";
+function fetchJson({ url, signal }) {
+	return fetch(url, { signal }).then((response) => {
+		if (!response.ok) throw new Error(`Network error: status ${response.status}`);
+		return response.json();
+	}).then((result) => result, (error) => {
+		if (error instanceof Error) throw error;
+		else {
+			console.error(`Unknown error: ${error}`);
+			throw new Error("Something went wrong");
+		}
+	});
+}
+function useSearch({ collections }) {
+	const queryClient = useQueryClient();
+	const [term, setTerm] = useState("");
+	const [debouncedTerm, setDebouncedTerm] = useDebounce(term, 500);
+	const updateTerm = useCallback((newTerm, updateImmediately = false) => {
+		setTerm(newTerm);
+		if (updateImmediately) setDebouncedTerm(newTerm);
+	}, [setDebouncedTerm]);
+	const { isLoading, isError, error, data, isPlaceholderData } = useQuery({
+		queryKey: [
+			"search",
+			collections,
+			debouncedTerm
+		],
+		queryFn: async ({ signal }) => {
+			const url = new URL(`/search`, BASE_API_URL);
+			url.searchParams.append("query", debouncedTerm);
+			url.searchParams.append("limit", "60");
+			if (collections) url.searchParams.append("prefixes", collections.join(","));
+			const result = debouncedTerm ? await fetchJson({
+				url,
+				signal
+			}) : null;
+			if (result) Object.entries(result.collections).forEach(([prefix, info]) => {
+				queryClient.setQueryData(["iconSetInfo", prefix], info);
+			});
+			return result?.icons ?? [];
+		},
+		enabled: debouncedTerm.length > 0,
+		placeholderData: keepPreviousData,
+		staleTime: 300 * 1e3
+	});
+	return {
+		term,
+		setTerm: updateTerm,
+		debouncedTerm,
+		isLoading,
+		isError,
+		error,
+		data,
+		isPreviousData: isPlaceholderData
+	};
+}
+function useIconSetInfo({ prefix }) {
+	return useQuery({
+		queryKey: ["iconSetInfo", prefix],
+		queryFn: async ({ signal }) => {
+			if (!prefix) return null;
+			const url = new URL("/collection", BASE_API_URL);
+			url.searchParams.append("prefix", prefix);
+			url.searchParams.append("info", "true");
+			return (await fetchJson({
+				url,
+				signal
+			}))?.info ?? null;
+		},
+		staleTime: Infinity
+	});
+}
+styled(Grid)`
+  grid-template-columns: 1fr min-content;
+  position: relative;
+`;
+const OptionsWrapper = styled(Box)`
+  box-sizing: border-box;
+  padding: 0.5rem;
+
+  & [role='listbox'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & [role='option'] {
+    display: grid;
+    place-items: center;
+    width: clamp(3rem, 10vw, 4rem);
+
+    & button {
+      cursor: pointer;
+      width: 100%;
+
+      & > [data-ui='Box'] {
+        display: flex;
+      }
+
+      & svg {
+        aspect-ratio: 1;
+      }
+    }
+  }
+`;
+function MessageWrapper({ children }) {
+	return /* @__PURE__ */ jsx(Card, {
+		padding: 4,
+		children: /* @__PURE__ */ jsx(Text, {
+			align: "center",
+			muted: true,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/combobox/search-input.tsx
+const SearchInput = memo(forwardRef((props, ref) => {
+	const { selectedIcon, suffix, onChange, ...rest } = props;
+	return /* @__PURE__ */ jsx(TextInput, {
+		...rest,
+		onChange,
+		ref,
+		inputMode: "search",
+		icon: selectedIcon ? /* @__PURE__ */ jsx(Icon, { icon: selectedIcon }) : null,
+		placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
+		suffix
+	});
+}));
+SearchInput.displayName = "SearchInput";
+//#endregion
+//#region src/combobox/search-result.tsx
+const SearchResults = memo(forwardRef((props, ref) => {
+	const { state, data, getItemProps, highlightedIndex, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [(() => {
+		switch (state) {
+			case "initial": return /* @__PURE__ */ jsx(MessageWrapper, { children: "Search for icons" });
+			case "loading": return /* @__PURE__ */ jsx(MessageWrapper, { children: "Searching..." });
+			case "error": return /* @__PURE__ */ jsx(MessageWrapper, { children: "Something went wrong..." });
+			case "empty": return /* @__PURE__ */ jsx(MessageWrapper, { children: "No icons found" });
+		}
+	})(), /* @__PURE__ */ jsx("ul", {
+		...rest,
+		ref,
+		"data-testid": "iconify-results",
+		style: { opacity: state === "stale" ? .5 : 1 },
+		children: (state === "data" || state === "stale") && data?.map((icon, index) => /* @__PURE__ */ jsx("li", {
+			...getItemProps({
+				item: icon,
+				index
+			}),
+			children: /* @__PURE__ */ jsx(Button, {
+				padding: 3,
+				mode: "bleed",
+				selected: index === highlightedIndex,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon,
+					width: "100%",
+					height: "100%"
+				})
+			})
+		}, icon))
+	})] });
+}));
+//#endregion
+//#region src/combobox/unset-button.tsx
+function UnsetButton(props) {
+	const { onUnset } = props;
+	return /* @__PURE__ */ jsx(Card, {
+		border: true,
+		borderLeft: false,
+		padding: 1,
+		display: "flex",
+		radius: 2,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-testid": "iconify-unset",
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+			onClick: onUnset,
+			mode: "bleed",
+			fontSize: 1,
+			padding: 2
+		})
+	});
+}
+//#endregion
+//#region src/combobox/iconify-combobox.tsx
+const IconifyCombobox = memo(function IconifyCombobox(props) {
+	const { selectedIcon, onSelect: pushSelection, collections, studioElementProps, fieldFocused } = props;
+	const id = useId();
+	const toast = useToast();
+	const inputRef = useRef(null);
+	const composedInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (studioElementProps?.ref) studioElementProps.ref.current = node;
+	}, [studioElementProps?.ref]);
+	const suppressNextBlur = useRef(false);
+	const handleFocus = useCallback((event) => {
+		suppressNextBlur.current = true;
+		setTimeout(() => {
+			suppressNextBlur.current = false;
+		}, 0);
+		studioElementProps?.onFocus?.(event);
+	}, [studioElementProps]);
+	const handleBlur = useCallback((event) => {
+		if (suppressNextBlur.current) {
+			suppressNextBlur.current = false;
+			return;
+		}
+		studioElementProps?.onBlur?.(event);
+	}, [studioElementProps]);
+	const { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({ collections });
+	const { isOpen, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectItem, setInputValue, closeMenu } = useCombobox({
+		items: data ?? [],
+		inputValue: term,
+		onInputValueChange({ inputValue, selectedItem }) {
+			if (inputValue !== selectedItem) setTerm(inputValue);
+		},
+		onSelectedItemChange({ selectedItem }) {
+			if (selectedItem) {
+				pushSelection(selectedItem);
+				setTerm("", true);
+				setInputValue("");
+			}
+		}
+	});
+	useEffect(() => {
+		if (!fieldFocused) closeMenu();
+	}, [fieldFocused, closeMenu]);
+	const handleUnset = useCallback(() => {
+		pushSelection("");
+		setTerm("", true);
+		selectItem("");
+	}, [
+		pushSelection,
+		setTerm,
+		selectItem
+	]);
+	useEffect(() => {
+		if (isError) {
+			console.error("Iconify input error:", error);
+			toast.push({
+				id,
+				status: "error",
+				title: "Iconify input error",
+				description: error?.message
+			});
+		}
+	}, [
+		error,
+		id,
+		isError,
+		toast
+	]);
+	const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
+		ref: composedInputRef,
+		id: studioElementProps?.id,
+		"aria-describedby": studioElementProps?.["aria-describedby"],
+		onFocus: handleFocus
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SearchInput, {
+		...inputProps,
+		onBlur: handleBlur,
+		selectedIcon,
+		suffix: selectedIcon ? /* @__PURE__ */ jsx(UnsetButton, { onUnset: handleUnset }) : null
+	}), /* @__PURE__ */ jsx(Popover, {
+		open: true,
+		style: { display: isOpen ? "block" : "none" },
+		placement: "bottom",
+		arrow: false,
+		matchReferenceWidth: true,
+		constrainSize: true,
+		referenceElement: inputRef.current,
+		content: /* @__PURE__ */ jsx(OptionsWrapper, { children: /* @__PURE__ */ jsx(SearchResults, {
+			...getMenuProps(),
+			state: match(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
+			data,
+			getItemProps,
+			highlightedIndex
+		}) })
+	})] });
+});
+//#endregion
+//#region src/lib/query-client.tsx
+const queryClient = new QueryClient();
+function QueryClientProvider$1(props) {
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: queryClient,
+		children: props.children
+	});
+}
+//#endregion
+//#region src/lib/use-pretty-icon-name.ts
+function usePrettyIconName(props) {
+	const { name } = props;
+	const iconMeta = useMemo(() => props.iconMeta ?? (name ? stringToIcon(name) : null), [name, props.iconMeta]);
+	const iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
+	return useMemo(() => iconMeta ? {
+		name: sentenceCase(iconMeta.name),
+		collection: iconSetInfo.data?.name ?? iconMeta.prefix
+	} : null, [iconMeta, iconSetInfo.data?.name]);
+}
+//#endregion
+//#region src/iconify-input.tsx
+const theme = buildTheme();
+const IconifyInput = memo(function IconifyInput(props) {
+	const { config, value, onChange: pushChange, schemaType, elementProps, focused } = props;
+	const selectedIcon = value?.name ?? null;
+	const options = schemaType.options;
+	const collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null;
+	const showName = options?.showName ?? config?.showName ?? false;
+	return /* @__PURE__ */ jsx(QueryClientProvider$1, { children: /* @__PURE__ */ jsx(ThemeProvider, {
+		theme,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			space: 2,
+			children: [/* @__PURE__ */ jsx(IconifyCombobox, {
+				selectedIcon,
+				onSelect: useCallback((icon) => {
+					pushChange(icon === "" ? unset() : set(icon, ["name"]));
+				}, [pushChange]),
+				collections,
+				studioElementProps: elementProps,
+				fieldFocused: focused
+			}), showName && selectedIcon ? /* @__PURE__ */ jsx(IconifyNameDisplay, { name: selectedIcon }) : null]
+		})
+	}) });
+});
+function IconifyNameDisplay(props) {
+	const { name } = props;
+	const prettyName = usePrettyIconName({ name });
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				size: 1,
+				muted: true,
+				children: "Selected:"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				size: 1,
+				weight: "semibold",
+				children: prettyName?.name ?? name
+			}),
+			prettyName?.collection && /* @__PURE__ */ jsxs(Text, {
+				size: 1,
+				muted: true,
+				style: { fontStyle: "italic" },
+				children: ["by ", prettyName?.collection]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/iconify-preview.tsx
+const IconifyPreview = memo(function IconifyPreview(props) {
+	const { title } = props;
+	const iconName = typeof props.title === "string" ? stringToIcon(props.title) : null;
+	if (typeof title === "string" && iconName) return /* @__PURE__ */ jsx(QueryClientProvider$1, { children: /* @__PURE__ */ jsx(IconifyPreviewInner, {
+		...props,
+		iconName: title,
+		iconMeta: iconName
+	}) });
+	return props.renderDefault(props);
+});
+function IconifyPreviewInner(props) {
+	const { iconMeta, iconName, ...previewProps } = props;
+	const prettyName = usePrettyIconName({ iconMeta });
+	return props.renderDefault({
+		...previewProps,
+		media: /* @__PURE__ */ jsx(Icon, { icon: iconName }),
+		title: prettyName?.name ?? iconName,
+		subtitle: prettyName?.collection
+	});
+}
+//#endregion
+//#region src/iconify-plugin.tsx
+/**
+* Usage in `sanity.config.ts` (or .js)
+*
+* ```ts
+* import { defineConfig } from 'sanity'
+* import { iconify } from 'sanity-plugin-iconify'
+*
+* export default defineConfig({
+*   // ...
+*   plugins: [iconify()],
+* })
+* ```
+*/
+const iconify = definePlugin((config = {}) => {
+	return {
+		name: "sanity-plugin-iconify",
+		schema: { types: [{
+			name: "icon",
+			title: "Icon",
+			type: "object",
+			fields: [{
+				name: "name",
+				title: "Name",
+				type: "string"
+			}],
+			components: {
+				input: (props) => /* @__PURE__ */ jsx(IconifyInput, {
+					...props,
+					config
+				}),
+				preview: IconifyPreview,
+				field: (props) => props.renderDefault({
+					...props,
+					level: 0
+				})
+			}
+		}] }
+	};
+});
+//#endregion
+export { iconify };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iconify",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "description": "Icon picker based on Iconify",
   "keywords": [
     "sanity",
@@ -21,15 +21,20 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist",
     "sanity.json",
@@ -37,94 +42,115 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s build:clean build:verify build:bundle build:check",
-    "build:bundle": "pkg-utils build --strict",
-    "build:check": "pkg-utils --strict",
-    "build:clean": "rimraf dist",
+    "build": "run-s build:verify build:bundle build:check",
+    "build:bundle": "tsdown",
+    "build:check": "node scripts/check-dist.mjs",
     "build:verify": "plugin-kit verify-package --silent",
     "dev": "vite dev --config dev/vite.config.ts",
+    "dev:dist": "vite build --config dev/vite.config.ts && vite preview --config dev/vite.config.ts",
     "format": "prettier --write --cache --ignore-unknown .",
     "generate-types": "node src/lib/generate-types",
     "lint": "eslint .",
+    "prepublishOnly": "node scripts/check-dist.mjs",
     "release": "release-it",
     "test": "vitest run",
     "test:e2e": "playwright test",
+    "test:e2e:dist": "PLUGIN_TARGET=dist playwright test",
     "test:e2e:setup": "tsx playwright/auth-setup.ts",
     "test:e2e:ui": "playwright test --ui",
     "test:ui": "vitest --ui",
     "test:watch": "vitest",
-    "watch": "pkg-utils watch --strict"
+    "watch": "tsdown --watch"
   },
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
     "@iconify/react": "^6.0.2",
-    "@iconify/utils": "^3.1.0",
+    "@iconify/utils": "^3.1.3",
     "@sanity/icons": "^3.7.4",
     "@sanity/incompatible-plugin": "^1.0.5",
-    "@sanity/ui": "^3.1.3",
-    "@tanstack/react-query": "^5.89.0",
+    "@sanity/ui": "^3.2.0",
+    "@tanstack/react-query": "^5.101.0",
     "change-case": "^5.4.4",
-    "downshift": "^9.0.13",
+    "downshift": "^9.3.6",
     "ts-pattern": "^5.9.0",
-    "use-debounce": "^10.0.6"
+    "use-debounce": "^10.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.2.0",
-    "@commitlint/config-conventional": "^20.2.0",
-    "@iconify/json": "^2.2.420",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@iconify/json": "^2.2.486",
     "@iconify/types": "^2.0.0",
-    "@playwright/test": "^1.58.2",
-    "@release-it/conventional-changelog": "^10.0.4",
-    "@sanity/pkg-utils": "^10.2.3",
+    "@playwright/test": "^1.61.0",
+    "@release-it/conventional-changelog": "^11.0.1",
     "@sanity/plugin-kit": "^4.0.20",
-    "@tanstack/eslint-plugin-query": "^5.89.0",
-    "@tanstack/react-query-devtools": "^5.89.0",
-    "@types/react": "^19.2.7",
+    "@tanstack/eslint-plugin-query": "^5.101.0",
+    "@tanstack/react-query-devtools": "^5.101.0",
+    "@types/react": "^19.2.17",
     "@types/styled-components": "^5.1.36",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/ui": "^4.1.0",
-    "@waspeer/config": "^2.4.5",
-    "eslint": "9.39.2",
-    "lefthook": "^2.0.12",
-    "npm-run-all2": "^8.0.4",
-    "prettier": "^3.7.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-is": "^19.2.3",
-    "release-it": "^19.1.0",
-    "rimraf": "^6.1.2",
-    "sanity": "^5.0.1",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.1.0"
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/ui": "^4.1.9",
+    "@waspeer/config": "^3.0.0",
+    "eslint": "^10.1.0",
+    "lefthook": "^2.1.9",
+    "npm-run-all2": "^9.0.2",
+    "prettier": "^3.8.4",
+    "publint": "^0.3.18",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-is": "^19.2.7",
+    "release-it": "^20.2.0",
+    "rimraf": "^6.1.3",
+    "sanity": "^6.0.0",
+    "tsdown": "^0.22.2",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.2",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "react": "^19.2",
-    "sanity": "^5.0.0-0",
+    "sanity": "^5.0.0-0 || ^6.0.0-0",
     "styled-components": "^6"
   },
   "packageManager": "pnpm@10.17.0",
   "engines": {
-    "node": ">=20.19"
+    "node": ">=22.12"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild",
-      "lefthook"
+      "lefthook",
+      "unrs-resolver"
     ],
     "overrides": {
-      "esbuild@<=0.24.2": ">=0.25.0",
-      "eslint": "^9",
+      "@babel/core@<7.29.6": ">=7.29.6",
+      "@isaacs/brace-expansion@<5.0.1": ">=5.0.1",
+      "@typescript-eslint/utils": "^8.61.1",
+      "brace-expansion@>=4.0.0 <5.0.6": ">=5.0.6",
+      "brace-expansion@<2.0.3": ">=2.0.3",
+      "esbuild@<0.28.1": ">=0.28.1",
+      "follow-redirects@<1.16.0": ">=1.16.0",
+      "lodash@<4.17.23": ">=4.17.23",
       "micromatch@<4.0.8": ">=4.0.8",
-      "prismjs@<1.30.0": ">=1.30.0"
+      "minimatch@<10.2.3": ">=10.2.3",
+      "picomatch@<4.0.4": ">=4.0.4",
+      "postcss@<8.5.10": ">=8.5.10",
+      "prismjs@<1.30.0": ">=1.30.0",
+      "rollup@<4.59.0": ">=4.59.0",
+      "serialize-javascript@<7.0.5": ">=7.0.5",
+      "shell-quote@<1.8.4": ">=1.8.4",
+      "tmp@<0.2.6": ">=0.2.6",
+      "uuid@>=11.0.0 <11.1.1": ">=11.1.1"
     }
   },
   "sanityPlugin": {
     "verifyPackage": {
       "scripts": false,
       "eslintImports": false,
-      "nodeEngine": false
+      "nodeEngine": false,
+      "pkg-utils": false,
+      "rollupConfig": false,
+      "tsconfig": false
     }
   }
 }

package/src/combobox/search-input.tsx

@@ -2,18 +2,28 @@ import { Icon } from '@iconify/react';
 import { TextInput } from '@sanity/ui';
 import { forwardRef, memo } from 'react';
 
-interface SearchInputProps extends React.HTMLAttributes<HTMLInputElement> {
+interface SearchInputProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+  // downshift's getInputProps() returns onChange typed against the generic
+  // `Element` (React.ChangeEventHandler with no element parameter), which is
+  // wider than HTMLAttributes' onChange. Accept that signature so the props
+  // spread from getInputProps() stays type-compatible.
+  onChange?: React.ChangeEventHandler;
   selectedIcon: string | null;
   suffix?: React.ReactNode;
 }
 
 export const SearchInput = memo(
   forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => {
-    const { selectedIcon, suffix, ...rest } = props;
+    const { selectedIcon, suffix, onChange, ...rest } = props;
 
     return (
       <TextInput
         {...rest}
+        // downshift types onChange against the generic `Element`; Sanity UI's
+        // TextInput expects an HTMLInputElement handler. The handler is only
+        // forwarded to the underlying <input>, so the element-generic
+        // difference is purely a type-variance mismatch with no runtime effect.
+        onChange={onChange as React.ChangeEventHandler<HTMLInputElement> | undefined}
         ref={ref}
         inputMode="search"
         icon={selectedIcon ? <Icon icon={selectedIcon} /> : null}

package/src/lib/api.ts

@@ -44,6 +44,7 @@ export function useSearch({ collections }: { collections: string[] | null }) {
     [setDebouncedTerm],
   );
 
+  // eslint-disable-next-line @tanstack/query/exhaustive-deps -- queryClient from useQueryClient() is a stable reference, not a query dependency
   const { isLoading, isError, error, data, isPlaceholderData } = useQuery<string[], Error>({
     queryKey: ['search', collections, debouncedTerm],
     queryFn: async ({ signal }) => {