sanity-plugin-iconify 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iconify",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Icon picker based on Iconify",
   "keywords": [
     "sanity",
@@ -37,54 +37,57 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
-    "clean": "rimraf dist",
+    "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:verify": "plugin-kit verify-package --silent",
+    "dev": "tsx dev/vite.ts",
     "format": "prettier --write --cache --ignore-unknown .",
-    "link-watch": "pnpm run generate-types && plugin-kit link-watch",
-    "lint": "eslint .",
-    "prepublish-only": "run-s build",
-    "watch": "pkg-utils watch --strict",
     "generate-types": "node src/lib/generate-types",
-    "prepare": "husky"
+    "lint": "eslint .",
+    "release": "release-it",
+    "watch": "pkg-utils watch --strict"
   },
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
-    "@headlessui/react": "^2.0.4",
-    "@iconify/react": "^5.0.1",
-    "@iconify/utils": "^2.1.24",
-    "@sanity/icons": "^3.2.0",
+    "@iconify/react": "^5.0.2",
+    "@iconify/utils": "^2.1.32",
+    "@sanity/icons": "^3.4.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^2.3.5",
-    "@tanstack/react-query": "^5.45.0",
+    "@sanity/ui": "^2.8.9",
+    "@tanstack/react-query": "^5.55.0",
     "change-case": "^5.4.4",
-    "ts-pattern": "^5.2.0",
-    "use-debounce": "^10.0.1"
+    "downshift": "^9.0.8",
+    "ts-pattern": "^5.3.1",
+    "use-debounce": "^10.0.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@commitlint/load": "^19.2.0",
-    "@iconify/json": "^2.2.218",
+    "@commitlint/cli": "^19.4.1",
+    "@commitlint/config-conventional": "^19.4.1",
+    "@iconify/json": "^2.2.245",
     "@iconify/types": "^2.0.0",
-    "@sanity/pkg-utils": "^6.9.3",
-    "@sanity/plugin-kit": "^4.0.17",
-    "@sanity/semantic-release-preset": "^5.0.0",
-    "@tanstack/eslint-plugin-query": "^5.43.1",
-    "@tanstack/react-query-devtools": "^5.45.0",
-    "@types/react": "^18.3.3",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "@sanity/pkg-utils": "^6.11.0",
+    "@sanity/plugin-kit": "^4.0.18",
+    "@tanstack/eslint-plugin-query": "^5.53.0",
+    "@tanstack/react-query-devtools": "^5.55.0",
+    "@types/react": "^18.3.5",
     "@types/styled-components": "^5.1.34",
-    "@waspeer/config": "^2.2.0",
-    "eslint": "^9.4.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.2",
+    "@waspeer/config": "^2.3.2",
+    "eslint": "^9.9.1",
+    "lefthook": "^1.7.15",
+    "npm-run-all2": "^6.2.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "sanity": "^3.46.0",
-    "typescript": "^5.4.5"
+    "release-it": "^17.6.0",
+    "rimraf": "^6.0.1",
+    "sanity": "^3.57.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3"
   },
   "peerDependencies": {
     "react": "^18",
@@ -96,11 +99,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@babel/traverse@<7.23.2": ">=7.23.2",
-      "conventional-changelog-conventionalcommits": "^8",
-      "follow-redirects@<1.15.4": ">=1.15.4",
-      "follow-redirects@<=1.15.5": ">=1.15.6",
-      "postcss@<8.4.31": ">=8.4.31"
+      "eslint": "^9",
+      "micromatch@<4.0.8": ">=4.0.8"
     }
   },
   "sanityPlugin": {

package/src/combobox/iconify-combobox.styles.tsx

@@ -12,30 +12,30 @@ export const OptionsWrapper = styled(Box)`
   padding: 0.5rem;
 
   & [role='listbox'] {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 2.5rem), 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     margin: 0;
     padding: 0;
     list-style: none;
-
-    @media (min-width: 650px) {
-      grid-template-columns: repeat(10, minmax(min(100%, 2.5rem), 1fr));
-    }
   }
 
   & [role='option'] {
     display: grid;
     place-items: center;
+    width: clamp(3rem, 10vw, 4rem);
 
     & button {
       cursor: pointer;
-      aspect-ratio: 1;
       width: 100%;
 
       & > [data-ui='Box'] {
         display: flex;
       }
+
+      & svg {
+        aspect-ratio: 1;
+      }
     }
   }
 `;

package/src/combobox/iconify-combobox.tsx

@@ -1,10 +1,9 @@
-import { Combobox } from '@headlessui/react';
 import { Popover, useToast } from '@sanity/ui';
-import type { ChangeEventHandler } from 'react';
+import { useCombobox } from 'downshift';
 import { useCallback, useEffect, useId, useRef } from 'react';
 import { match } from 'ts-pattern';
 import { useSearch } from '../lib/api';
-import { ComboboxWrapper, OptionsWrapper } from './iconify-combobox.styles';
+import { OptionsWrapper } from './iconify-combobox.styles';
 import { SearchInput } from './search-input';
 import type { SearchResultsProps } from './search-result';
 import { SearchResults } from './search-result';
@@ -28,20 +27,34 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
       collections,
     });
 
-  const handleTermChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (event) => setTerm(event.target.value),
-    [setTerm],
-  );
-
-  const handleSelect = useCallback(
-    (icon: string) => {
-      pushSelection(icon);
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectItem,
+    setInputValue,
+  } = useCombobox({
+    items: data ?? [],
+    inputValue: term,
+    onInputValueChange({ inputValue, selectedItem }) {
+      if (inputValue !== selectedItem) {
+        setTerm(inputValue);
+      }
+    },
+    onSelectedItemChange({ selectedItem }) {
+      pushSelection(selectedItem);
       setTerm('', true);
+      setInputValue('');
     },
-    [pushSelection, setTerm],
-  );
+  });
 
-  const handleUnset = useCallback(() => handleSelect(''), [handleSelect]);
+  const handleUnset = useCallback(() => {
+    pushSelection('');
+    setTerm('', true);
+    selectItem('');
+  }, []);
 
   useEffect(() => {
     if (isError) {
@@ -57,45 +70,41 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
   }, [error, id, isError, toast]);
 
   return (
-    <ComboboxWrapper>
-      <Combobox onChange={handleSelect}>
-        {({ open }) => (
-          <>
-            <SearchInput
-              ref={inputRef}
-              term={term}
-              selectedIcon={selectedIcon}
-              onChange={handleTermChange}
-              suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null}
-            />
+    <div>
+      {/* @ts-expect-error wrong typings */}
+      <SearchInput
+        {...getInputProps({ ref: inputRef })}
+        selectedIcon={selectedIcon}
+        suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null}
+      />
 
-            <Popover
-              open={open}
-              placement="bottom"
-              arrow={false}
-              matchReferenceWidth
-              portal
-              constrainSize
-              referenceElement={inputRef.current}
-              content={
-                <OptionsWrapper>
-                  <SearchResults
-                    state={match<boolean>(true)
-                      .returnType<SearchResultsProps['state']>()
-                      .with(isLoading, () => 'loading')
-                      .with(!debouncedTerm, () => 'initial')
-                      .with(isError, () => 'error')
-                      .with(!data || data.length === 0, () => 'empty')
-                      .with(isPreviousData, () => 'stale')
-                      .otherwise(() => 'data')}
-                    data={data}
-                  />
-                </OptionsWrapper>
-              }
+      <Popover
+        open={true}
+        style={{ display: isOpen ? 'block' : 'none' }}
+        placement="bottom"
+        arrow={false}
+        matchReferenceWidth
+        constrainSize
+        referenceElement={inputRef.current}
+        content={
+          <OptionsWrapper>
+            <SearchResults
+              {...getMenuProps()}
+              state={match<boolean>(true)
+                .returnType<SearchResultsProps['state']>()
+                .with(isLoading, () => 'loading')
+                .with(!debouncedTerm, () => 'initial')
+                .with(isError, () => 'error')
+                .with(!data || data.length === 0, () => 'empty')
+                .with(isPreviousData, () => 'stale')
+                .otherwise(() => 'data')}
+              data={data}
+              getItemProps={getItemProps}
+              highlightedIndex={highlightedIndex}
             />
-          </>
-        )}
-      </Combobox>
-    </ComboboxWrapper>
+          </OptionsWrapper>
+        }
+      />
+    </div>
   );
 }

package/src/combobox/search-input.tsx

@@ -1,30 +1,20 @@
-import { ComboboxInput } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { TextInput } from '@sanity/ui';
-import type { ChangeEventHandler } from 'react';
 import { forwardRef } from 'react';
 
-// ------------ //
-// SEARCH INPUT //
-// ------------ //
-
-interface SearchInputProps {
-  term: string;
+interface SearchInputProps extends React.HTMLAttributes<HTMLInputElement> {
   selectedIcon: string | null;
-  onChange: ChangeEventHandler<HTMLInputElement>;
   suffix?: React.ReactNode;
 }
 
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => {
-  const { term, selectedIcon, onChange, suffix } = props;
+  const { selectedIcon, suffix, ...rest } = props;
 
   return (
-    <ComboboxInput
-      as={TextInput}
+    <TextInput
+      {...rest}
       ref={ref}
       inputMode="search"
-      value={term}
-      onChange={onChange}
       icon={selectedIcon ? <Icon icon={selectedIcon} /> : null}
       placeholder={selectedIcon ? 'Search and replace selected icon...' : 'Search for an icon...'}
       suffix={suffix}

package/src/combobox/search-result.tsx

@@ -1,47 +1,48 @@
-import { ComboboxOption, ComboboxOptions } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button } from '@sanity/ui';
+import type { UseComboboxGetItemPropsOptions, UseComboboxGetItemPropsReturnValue } from 'downshift';
+import { forwardRef } from 'react';
 import { MessageWrapper } from './iconify-combobox.styles';
 
-// -------------- //
-// SEARCH RESULTS //
-// -------------- //
+type GetItemProps = (
+  options: UseComboboxGetItemPropsOptions<string>,
+) => UseComboboxGetItemPropsReturnValue;
 
-export interface SearchResultsProps {
+export interface SearchResultsProps extends React.HTMLAttributes<HTMLUListElement> {
   state: 'initial' | 'loading' | 'error' | 'empty' | 'data' | 'stale';
   data?: string[];
+  getItemProps: GetItemProps;
+  highlightedIndex: number;
 }
 
-export function SearchResults(props: SearchResultsProps) {
-  const { state, data } = props;
-
-  if (state === 'initial') {
-    return <MessageWrapper>Search for icons</MessageWrapper>;
-  }
-
-  if (state === 'loading') {
-    return <MessageWrapper>Searching...</MessageWrapper>;
-  }
-
-  if (state === 'error') {
-    return <MessageWrapper>Something went wrong...</MessageWrapper>;
-  }
-
-  if (state === 'empty') {
-    return <MessageWrapper>No icons found</MessageWrapper>;
-  }
+export const SearchResults = forwardRef<HTMLUListElement, SearchResultsProps>((props, ref) => {
+  const { state, data, getItemProps, highlightedIndex, ...rest } = props;
 
   return (
-    <ComboboxOptions style={{ opacity: state === 'stale' ? 0.5 : 1 }}>
-      {data!.map((icon) => (
-        <ComboboxOption key={icon} value={icon}>
-          {({ focus }) => (
-            <Button padding={3} mode="bleed" selected={focus}>
-              <Icon icon={icon} width="100%" height="100%" />
-            </Button>
-          )}
-        </ComboboxOption>
-      ))}
-    </ComboboxOptions>
+    <>
+      {(() => {
+        switch (state) {
+          case 'initial':
+            return <MessageWrapper>Search for icons</MessageWrapper>;
+          case 'loading':
+            return <MessageWrapper>Searching...</MessageWrapper>;
+          case 'error':
+            return <MessageWrapper>Something went wrong...</MessageWrapper>;
+          case 'empty':
+            return <MessageWrapper>No icons found</MessageWrapper>;
+        }
+      })()}
+
+      <ul {...rest} ref={ref} style={{ opacity: state === 'stale' ? 0.5 : 1 }}>
+        {(state === 'data' || state === 'stale') &&
+          data?.map((icon, index) => (
+            <li key={icon} {...getItemProps({ item: icon, index })}>
+              <Button padding={3} mode="bleed" selected={index === highlightedIndex}>
+                <Icon icon={icon} width="100%" height="100%" />
+              </Button>
+            </li>
+          ))}
+      </ul>
+    </>
   );
-}
+});

package/src/iconify-input.tsx

@@ -8,10 +8,6 @@ import { QueryClientProvider } from './lib/query-client';
 import type { IconifyPluginConfig, IconOptions } from './lib/types';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
 
-// -------------- //
-// ICONIFY INPUT //
-// -------------- //
-
 interface IconifyInputProps extends ObjectInputProps {
   config: IconifyPluginConfig;
 }
@@ -28,12 +24,6 @@ export function IconifyInput(props: IconifyInputProps) {
     null;
   const showName = options?.showName ?? config?.showName ?? false;
 
-  // const parentTheme = useTheme();
-  // const theme: RootTheme = useMemo(
-  //   () => (parentTheme ? { ...parentTheme.sanity, color: studioTheme.color } : studioTheme),
-  //   [parentTheme],
-  // );
-
   const handleSelect = useCallback(
     (icon: string) => {
       pushChange(icon === '' ? unset() : set(icon, ['name']));
@@ -62,7 +52,7 @@ interface IconifyNameDisplayProps {
   name?: string | null;
 }
 
-function IconifyNameDisplay(props: IconifyNameDisplayProps) {
+export function IconifyNameDisplay(props: IconifyNameDisplayProps) {
   const { name } = props;
   const prettyName = usePrettyIconName({ name });
 

package/src/lib/icon-types.gen.ts

@@ -0,0 +1 @@
+export type IconPrefix = 'material-symbols' | 'material-symbols-light' | 'ic' | 'mdi' | 'ph' | 'solar' | 'tabler' | 'hugeicons' | 'mingcute' | 'ri' | 'bi' | 'carbon' | 'iconamoon' | 'iconoir' | 'ion' | 'lucide' | 'lucide-lab' | 'uil' | 'tdesign' | 'teenyicons' | 'clarity' | 'bx' | 'bxs' | 'majesticons' | 'ant-design' | 'gg' | 'gravity-ui' | 'octicon' | 'memory' | 'cil' | 'flowbite' | 'mynaui' | 'basil' | 'pixelarticons' | 'akar-icons' | 'ci' | 'system-uicons' | 'typcn' | 'radix-icons' | 'zondicons' | 'ep' | 'circum' | 'mdi-light' | 'fe' | 'eos-icons' | 'bitcoin-icons' | 'charm' | 'prime' | 'humbleicons' | 'uiw' | 'uim' | 'uit' | 'uis' | 'maki' | 'gridicons' | 'mi' | 'weui' | 'quill' | 'gala' | 'lets-icons' | 'f7' | 'mage' | 'marketeq' | 'fluent' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'icon-park' | 'jam' | 'heroicons' | 'pajamas' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'bytesize' | 'ei' | 'streamline' | 'guidance' | 'fa6-solid' | 'fa6-regular' | 'ooui' | 'rivet-icons' | 'nimbus' | 'oui' | 'formkit' | 'line-md' | 'meteocons' | 'svg-spinners' | 'openmoji' | 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'fxemoji' | 'streamline-emojis' | 'bxl' | 'logos' | 'simple-icons' | 'cib' | 'fa6-brands' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'flag' | 'circle-flags' | 'flagpack' | 'cif' | 'gis' | 'map' | 'geo' | 'vscode-icons' | 'codicon' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'unjs' | 'game-icons' | 'fad' | 'academicons' | 'wi' | 'healthicons' | 'medical-icon' | 'covid' | 'la' | 'eva' | 'dashicons' | 'flat-color-icons' | 'entypo' | 'foundation' | 'raphael' | 'icons8' | 'iwwa' | 'heroicons-outline' | 'heroicons-solid' | 'fa-solid' | 'fa-regular' | 'fa-brands' | 'fa' | 'fluent-mdl2' | 'fontisto' | 'icomoon-free' | 'subway' | 'oi' | 'wpf' | 'simple-line-icons' | 'et' | 'el' | 'vaadin' | 'grommet-icons' | 'whh' | 'si-glyph' | 'zmdi' | 'ls' | 'bpmn' | 'flat-ui' | 'vs' | 'topcoat' | 'il' | 'websymbol' | 'fontelico' | 'ps' | 'feather' | 'mono-icons' | 'pepicons';