sanity-plugin-iconify 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iconify",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Icon picker based on Iconify",
   "keywords": [
     "sanity",
@@ -16,18 +16,19 @@
   },
   "license": "MIT",
   "author": "Wannes Salomé <mail@wannessalome.nl>",
+  "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "files": [
@@ -44,63 +45,71 @@
     "lint": "eslint .",
     "prepublish-only": "run-s build",
     "watch": "pkg-utils watch --strict",
-    "generate-types": "tsx src/lib/generate-types",
+    "generate-types": "node src/lib/generate-types",
     "prepare": "husky install"
   },
+  "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^1.7.18",
     "@iconify/react": "^4.1.1",
-    "@iconify/utils": "^2.1.10",
-    "@sanity/icons": "^2.4.1",
+    "@iconify/utils": "^2.1.22",
+    "@sanity/icons": "^2.11.4",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.8.2",
-    "@tanstack/react-query": "^4.35.3",
-    "change-case": "^4.1.2",
-    "ts-pattern": "^5.0.5",
-    "use-debounce": "^9.0.4"
+    "@sanity/ui": "^1.9.3",
+    "@tanstack/react-query": "^5.28.6",
+    "change-case": "^5.4.3",
+    "ts-pattern": "^5.0.8",
+    "use-debounce": "^10.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@commitlint/load": "^17.7.1",
-    "@iconify/json": "^2.2.116",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/load": "^19.2.0",
+    "@iconify/json": "^2.2.195",
     "@iconify/types": "^2.0.0",
-    "@sanity/pkg-utils": "^2.4.9",
+    "@sanity/pkg-utils": "^5.1.4",
     "@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",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.2",
+    "@sanity/semantic-release-preset": "^4.1.7",
+    "@tanstack/eslint-plugin-query": "^5.28.6",
+    "@tanstack/react-query-devtools": "^5.28.6",
+    "@types/react": "^18.2.69",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-sanity": "^7.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
-    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier": "^3.2.5",
+    "prettier-plugin-packagejson": "^2.4.12",
     "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",
-    "typescript": "^5.2.2"
+    "rimraf": "^5.0.5",
+    "sanity": "^3.35.2",
+    "typescript": "^5.4.3"
   },
   "peerDependencies": {
     "react": "^18",
     "sanity": "^3",
-    "styled-components": "^5"
+    "styled-components": "^5.2 || ^6"
   },
   "engines": {
     "node": ">=14"
   },
+  "pnpm": {
+    "overrides": {
+      "@babel/traverse@<7.23.2": ">=7.23.2",
+      "postcss@<8.4.31": ">=8.4.31",
+      "follow-redirects@<1.15.4": ">=1.15.4",
+      "follow-redirects@<=1.15.5": ">=1.15.6"
+    }
+  },
   "sanityPlugin": {
     "verifyPackage": {
       "scripts": false

package/src/combobox/iconify-combobox.tsx

@@ -2,6 +2,7 @@ import { Combobox } from '@headlessui/react';
 import { Popover, useToast } from '@sanity/ui';
 import { ChangeEventHandler, useCallback, useEffect, useId, useRef } from 'react';
 import { match } from 'ts-pattern';
+
 import { useSearch } from '../lib/api';
 import { ComboboxWrapper, OptionsWrapper } from './iconify-combobox.styles';
 import { SearchInput } from './search-input';
@@ -21,7 +22,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 +80,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/combobox/search-result.tsx

@@ -1,6 +1,7 @@
 import { Combobox } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button } from '@sanity/ui';
+
 import { MessageWrapper } from './iconify-combobox.styles';
 
 // -------------- //

package/src/iconify-input.tsx

@@ -1,9 +1,10 @@
-import { Flex, RootTheme, Stack, Text, ThemeProvider, studioTheme, useTheme } from '@sanity/ui';
+import { Flex, RootTheme, Stack, studioTheme, Text, ThemeProvider, useTheme } from '@sanity/ui';
 import { useCallback, useMemo } from 'react';
 import { ObjectInputProps, set, unset } from 'sanity';
+
 import { IconifyCombobox } from './combobox';
 import { QueryClientProvider } from './lib/query-client';
-import { IconOptions, IconifyPluginConfig } from './lib/types';
+import { IconifyPluginConfig, IconOptions } from './lib/types';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
 
 // -------------- //

package/src/iconify-plugin.tsx

@@ -1,4 +1,5 @@
-import { FieldProps, ObjectInputProps, definePlugin } from 'sanity';
+import { definePlugin, FieldProps, ObjectInputProps } from 'sanity';
+
 import { IconifyInput } from './iconify-input';
 import { IconifyPreview } from './iconify-preview';
 import { IconifyPluginConfig } from './lib/types';

package/src/iconify-preview.tsx

@@ -1,8 +1,9 @@
 import { Icon } from '@iconify/react';
-import { PreviewProps } from 'sanity';
-import { usePrettyIconName } from './lib/use-pretty-icon-name';
 import { IconifyIconName, stringToIcon } from '@iconify/utils';
+import { PreviewProps } from 'sanity';
+
 import { QueryClientProvider } from './lib/query-client';
+import { usePrettyIconName } from './lib/use-pretty-icon-name';
 
 // --------------- //
 // ICONIFY PREVIEW //

package/src/lib/api.ts

@@ -1,9 +1,10 @@
 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';
 
 function fetchJson<T>({ url, signal }: { url: string | URL; signal?: AbortSignal }): Promise<T> {
@@ -44,7 +45,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 +69,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 +77,11 @@ export function useSearch({ collections }: { collections: string[] | null }) {
     term,
     setTerm: updateTerm,
     debouncedTerm,
-    isInitialLoading,
+    isLoading,
     isError,
     error,
     data,
-    isPreviousData,
+    isPreviousData: isPlaceholderData,
   };
 }
 

package/src/lib/{generate-types.ts → generate-types.js}

@@ -1,6 +1,7 @@
-import { lookupCollections } from '@iconify/json';
 import { writeFile } from 'node:fs/promises';
 
+import { lookupCollections } from '@iconify/json';
+
 /**
  * Generates TypeScript types for available Iconify icon collections.
  *

package/src/lib/use-pretty-icon-name.ts

@@ -1,6 +1,7 @@
 import { IconifyIconName, stringToIcon } from '@iconify/utils';
 import { sentenceCase } from 'change-case';
 import { useMemo } from 'react';
+
 import { useIconSetInfo } from './api';
 
 interface UsePrettyIconNameProps {