sanity-plugin-iconify 2.0.0 → 2.0.2

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,36 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
       collections,
     });
 
-  const handleTermChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (event) => setTerm(event.target.value),
-    [setTerm],
-  );
-
-  const handleSelect = useCallback(
-    (icon: string) => {
-      pushSelection(icon);
-      setTerm('', true);
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectItem,
+    setInputValue,
+  } = useCombobox({
+    items: data ?? [],
+    inputValue: term,
+    onInputValueChange({ inputValue, selectedItem }) {
+      if (inputValue !== selectedItem) {
+        setTerm(inputValue);
+      }
     },
-    [pushSelection, setTerm],
-  );
+    onSelectedItemChange({ selectedItem }) {
+      if (selectedItem) {
+        pushSelection(selectedItem);
+        setTerm('', true);
+        setInputValue('');
+      }
+    },
+  });
 
-  const handleUnset = useCallback(() => handleSelect(''), [handleSelect]);
+  const handleUnset = useCallback(() => {
+    pushSelection('');
+    setTerm('', true);
+    selectItem('');
+  }, []);
 
   useEffect(() => {
     if (isError) {
@@ -57,45 +72,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' | 'mdi-light' | 'line-md' | 'solar' | 'tabler' | 'hugeicons' | 'mingcute' | 'ri' | 'mynaui' | 'iconamoon' | 'iconoir' | 'lucide' | 'lucide-lab' | 'uil' | 'tdesign' | 'si' | 'bx' | 'bxs' | 'majesticons' | 'gg' | 'flowbite' | 'basil' | 'pixelarticons' | 'pixel' | 'akar-icons' | 'ci' | 'proicons' | 'typcn' | 'meteor-icons' | 'prime' | 'circum' | 'fe' | 'eos-icons' | 'bitcoin-icons' | 'humbleicons' | 'uim' | 'uit' | 'uis' | 'gridicons' | 'mi' | 'cuida' | 'weui' | 'duo-icons' | 'svg-spinners' | 'lets-icons' | 'mage' | 'stash' | 'lineicons' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'jam' | 'guidance' | 'carbon' | 'ion' | 'famicons' | 'ant-design' | 'lsicon' | 'gravity-ui' | 'cil' | 'ep' | 'charm' | 'quill' | 'bytesize' | 'bi' | 'rivet-icons' | 'nimbus' | 'formkit' | 'fluent' | 'ph' | 'teenyicons' | 'clarity' | 'ix' | 'octicon' | 'memory' | 'system-uicons' | 'radix-icons' | 'zondicons' | 'uiw' | 'maki' | 'codex' | 'ei' | 'heroicons' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'f7' | 'pajamas' | 'garden' | 'streamline' | 'fa6-solid' | 'fa6-regular' | 'ooui' | 'oui' | 'nrk' | 'qlementine-icons' | 'fluent-color' | 'icon-park' | 'marketeq' | 'vscode-icons' | 'codicon' | 'material-icon-theme' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'unjs' | 'simple-icons' | 'logos' | 'cib' | 'fa6-brands' | 'bxl' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'openmoji' | 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'fxemoji' | 'streamline-emojis' | 'circle-flags' | 'flag' | 'flagpack' | 'cif' | 'gis' | 'map' | 'geo' | 'game-icons' | 'fad' | 'academicons' | 'wi' | 'meteocons' | 'healthicons' | 'medical-icon' | 'covid' | 'la' | 'eva' | 'dashicons' | 'flat-color-icons' | 'entypo' | 'foundation' | 'raphael' | 'icons8' | 'iwwa' | 'gala' | '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';