sanity-plugin-iconify 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iconify",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Icon picker based on Iconify",
   "keywords": [
     "sanity",
@@ -50,47 +50,47 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@iconify/react": "^4.1.1",
-    "@iconify/utils": "^2.1.10",
-    "@sanity/icons": "^2.4.1",
+    "@iconify/utils": "^2.1.11",
+    "@sanity/icons": "^2.7.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.8.2",
-    "@tanstack/react-query": "^4.35.3",
+    "@sanity/ui": "^1.8.3",
+    "@tanstack/react-query": "^5.4.3",
     "change-case": "^4.1.2",
     "ts-pattern": "^5.0.5",
     "use-debounce": "^9.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@commitlint/load": "^17.7.1",
-    "@iconify/json": "^2.2.116",
+    "@commitlint/cli": "^18.2.0",
+    "@commitlint/config-conventional": "^18.1.0",
+    "@commitlint/load": "^18.2.0",
+    "@iconify/json": "^2.2.137",
     "@iconify/types": "^2.0.0",
-    "@sanity/pkg-utils": "^2.4.9",
+    "@sanity/pkg-utils": "^3.2.2",
     "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^4.1.4",
-    "@tanstack/eslint-plugin-query": "^4.34.1",
-    "@tanstack/react-query-devtools": "^4.35.3",
-    "@types/react": "^18.2.21",
-    "@types/styled-components": "^5.1.27",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "eslint": "^8.49.0",
+    "@sanity/semantic-release-preset": "^4.1.6",
+    "@tanstack/eslint-plugin-query": "^5.0.5",
+    "@tanstack/react-query-devtools": "^5.4.3",
+    "@types/react": "^18.2.34",
+    "@types/styled-components": "^5.1.29",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-config-sanity": "^7.0.1",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^15.0.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
-    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier-plugin-packagejson": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^5.0.1",
-    "sanity": "^3.16.7",
-    "tsx": "^3.12.10",
+    "rimraf": "^5.0.5",
+    "sanity": "^3.19.1",
+    "tsx": "^3.14.0",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
@@ -105,5 +105,11 @@
     "verifyPackage": {
       "scripts": false
     }
+  },
+  "pnpm": {
+    "overrides": {
+      "@babel/traverse@<7.23.2": ">=7.23.2",
+      "postcss@<8.4.31": ">=8.4.31"
+    }
   }
 }

package/src/combobox/iconify-combobox.tsx

@@ -21,7 +21,7 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
   const toast = useToast();
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { term, setTerm, debouncedTerm, isInitialLoading, isError, error, data, isPreviousData } =
+  const { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } =
     useSearch({
       collections,
     });
@@ -79,7 +79,7 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
                   <SearchResults
                     state={match<boolean>(true)
                       .returnType<SearchResultsProps['state']>()
-                      .with(isInitialLoading, () => 'loading')
+                      .with(isLoading, () => 'loading')
                       .with(!debouncedTerm, () => 'initial')
                       .with(isError, () => 'error')
                       .with(!data || data.length === 0, () => 'empty')

package/src/lib/api.ts

@@ -1,8 +1,8 @@
 import { IconifyInfo } from '@iconify/types';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { IconifySearchResult } from './types';
+import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
 import { useDebounce } from 'use-debounce';
+import { IconifySearchResult } from './types';
 
 const BASE_API_URL = 'https://api.iconify.design';
 
@@ -44,7 +44,7 @@ export function useSearch({ collections }: { collections: string[] | null }) {
     [setDebouncedTerm],
   );
 
-  const { isInitialLoading, isError, error, data, isPreviousData } = useQuery<string[], Error>({
+  const { isLoading, isError, error, data, isPlaceholderData } = useQuery<string[], Error>({
     queryKey: ['search', collections, debouncedTerm],
     queryFn: async ({ signal }) => {
       const url = new URL(`/search`, BASE_API_URL);
@@ -68,7 +68,7 @@ export function useSearch({ collections }: { collections: string[] | null }) {
       return result?.icons ?? [];
     },
     enabled: debouncedTerm.length > 0,
-    keepPreviousData: debouncedTerm.length > 0,
+    placeholderData: keepPreviousData,
     staleTime: 5 * 60 * 1000, // 5 minutes
   });
 
@@ -76,11 +76,11 @@ export function useSearch({ collections }: { collections: string[] | null }) {
     term,
     setTerm: updateTerm,
     debouncedTerm,
-    isInitialLoading,
+    isLoading,
     isError,
     error,
     data,
-    isPreviousData,
+    isPreviousData: isPlaceholderData,
   };
 }