sanity-plugin-iconify 3.0.0-beta.1 → 3.0.0

package/src/combobox/iconify-combobox.tsx

@@ -1,6 +1,7 @@
 import { Popover, useToast } from '@sanity/ui';
 import { useCombobox } from 'downshift';
-import { useCallback, useEffect, useId, useRef } from 'react';
+import { memo, useCallback, useEffect, useId, useRef } from 'react';
+import type { ObjectInputProps } from 'sanity';
 import { match } from 'ts-pattern';
 import { useSearch } from '../lib/api';
 import { OptionsWrapper } from './iconify-combobox.styles';
@@ -13,15 +14,65 @@ export interface IconifyComboboxProps {
   selectedIcon: string | null;
   onSelect: (newValue: string) => void;
   collections: string[] | null;
+  studioElementProps?: ObjectInputProps['elementProps'];
+  fieldFocused?: boolean;
 }
 
-export function IconifyCombobox(props: IconifyComboboxProps) {
-  const { selectedIcon, onSelect: pushSelection, collections } = props;
+export const IconifyCombobox = memo(function IconifyCombobox(props: IconifyComboboxProps) {
+  const {
+    selectedIcon,
+    onSelect: pushSelection,
+    collections,
+    studioElementProps,
+    fieldFocused,
+  } = props;
 
   const id = useId();
   const toast = useToast();
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Compose our inputRef (used by the Popover for positioning) with Studio's focusRef.
+  // Standard Sanity inputs spread all of elementProps onto the native element, which
+  // lets Studio programmatically re-focus the field and track focus via onPathFocus/onPathBlur.
+  const composedInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      inputRef.current = node;
+      if (studioElementProps?.ref) {
+        (studioElementProps.ref as React.RefObject<HTMLInputElement | null>).current = node;
+      }
+    },
+    [studioElementProps?.ref],
+  );
+
+  // Studio steals focus to its field-actions-trigger immediately after field activation, then
+  // re-focuses the actual input — all within the same macrotask as the original focus event.
+  // We suppress the onPathBlur for this activation blur so Studio's focused state stays accurate.
+  // The flag is reset via setTimeout so any blur in a later macrotask (real user navigation) is
+  // forwarded normally.
+  const suppressNextBlur = useRef(false);
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      suppressNextBlur.current = true;
+      setTimeout(() => {
+        suppressNextBlur.current = false;
+      }, 0);
+      studioElementProps?.onFocus?.(event as unknown as React.FocusEvent<HTMLDivElement>);
+    },
+    [studioElementProps],
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      if (suppressNextBlur.current) {
+        suppressNextBlur.current = false;
+        return;
+      }
+      studioElementProps?.onBlur?.(event as unknown as React.FocusEvent<HTMLDivElement>);
+    },
+    [studioElementProps],
+  );
+
   const { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } =
     useSearch({
       collections,
@@ -35,6 +86,7 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
     getItemProps,
     selectItem,
     setInputValue,
+    closeMenu,
   } = useCombobox({
     items: data ?? [],
     inputValue: term,
@@ -52,11 +104,18 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
     },
   });
 
+  // Close the menu when Studio considers the field unfocused. This is the state→UI equivalent
+  // of the old stateReducer: instead of intercepting downshift's blur handling imperatively,
+  // we let Studio's focused state drive whether the menu should be open.
+  useEffect(() => {
+    if (!fieldFocused) closeMenu();
+  }, [fieldFocused, closeMenu]);
+
   const handleUnset = useCallback(() => {
     pushSelection('');
     setTerm('', true);
     selectItem('');
-  }, []);
+  }, [pushSelection, setTerm, selectItem]);
 
   useEffect(() => {
     if (isError) {
@@ -71,11 +130,21 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
     }
   }, [error, id, isError, toast]);
 
+  // Destructure onBlur out so downshift's InputBlur doesn't close the menu —
+  // menu lifecycle is now driven by fieldFocused via the effect above.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
+    ref: composedInputRef,
+    id: studioElementProps?.id,
+    'aria-describedby': studioElementProps?.['aria-describedby'],
+    onFocus: handleFocus,
+  });
+
   return (
     <div>
-      {/* @ts-expect-error wrong typings */}
       <SearchInput
-        {...getInputProps({ ref: inputRef })}
+        {...inputProps}
+        onBlur={handleBlur}
         selectedIcon={selectedIcon}
         suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null}
       />
@@ -109,4 +178,4 @@ export function IconifyCombobox(props: IconifyComboboxProps) {
       />
     </div>
   );
-}
+});

package/src/combobox/search-input.tsx

@@ -1,25 +1,27 @@
 import { Icon } from '@iconify/react';
 import { TextInput } from '@sanity/ui';
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 
 interface SearchInputProps extends React.HTMLAttributes<HTMLInputElement> {
   selectedIcon: string | null;
   suffix?: React.ReactNode;
 }
 
-export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => {
-  const { selectedIcon, suffix, ...rest } = props;
+export const SearchInput = memo(
+  forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => {
+    const { selectedIcon, suffix, ...rest } = props;
 
-  return (
-    <TextInput
-      {...rest}
-      ref={ref}
-      inputMode="search"
-      icon={selectedIcon ? <Icon icon={selectedIcon} /> : null}
-      placeholder={selectedIcon ? 'Search and replace selected icon...' : 'Search for an icon...'}
-      suffix={suffix}
-    />
-  );
-});
+    return (
+      <TextInput
+        {...rest}
+        ref={ref}
+        inputMode="search"
+        icon={selectedIcon ? <Icon icon={selectedIcon} /> : null}
+        placeholder={selectedIcon ? 'Search and replace selected icon...' : 'Search for an icon...'}
+        suffix={suffix}
+      />
+    );
+  }),
+);
 
 SearchInput.displayName = 'SearchInput';

package/src/combobox/search-result.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
 import { Button } from '@sanity/ui';
 import type { UseComboboxGetItemPropsOptions, UseComboboxGetItemPropsReturnValue } from 'downshift';
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import { MessageWrapper } from './iconify-combobox.styles';
 
 type GetItemProps = (
@@ -15,34 +15,41 @@ export interface SearchResultsProps extends React.HTMLAttributes<HTMLUListElemen
   highlightedIndex: number;
 }
 
-export const SearchResults = forwardRef<HTMLUListElement, SearchResultsProps>((props, ref) => {
-  const { state, data, getItemProps, highlightedIndex, ...rest } = props;
+export const SearchResults = memo(
+  forwardRef<HTMLUListElement, SearchResultsProps>((props, ref) => {
+    const { state, data, getItemProps, highlightedIndex, ...rest } = props;
 
-  return (
-    <>
-      {(() => {
-        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>;
-        }
-      })()}
+    return (
+      <>
+        {(() => {
+          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>
-    </>
-  );
-});
+        <ul
+          {...rest}
+          ref={ref}
+          data-testid="iconify-results"
+          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/combobox/unset-button.tsx

@@ -14,7 +14,14 @@ export function UnsetButton(props: UnsetButtonProps) {
 
   return (
     <Card border borderLeft={false} padding={1} display="flex" radius={2}>
-      <Button icon={<TrashIcon />} onClick={onUnset} mode="bleed" fontSize={1} padding={2} />
+      <Button
+        data-testid="iconify-unset"
+        icon={<TrashIcon />}
+        onClick={onUnset}
+        mode="bleed"
+        fontSize={1}
+        padding={2}
+      />
     </Card>
   );
 }

package/src/iconify-input.tsx

@@ -1,6 +1,6 @@
 import { Flex, Stack, Text, ThemeProvider } from '@sanity/ui';
 import { buildTheme } from '@sanity/ui/theme';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import type { ObjectInputProps } from 'sanity';
 import { set, unset } from 'sanity';
 import { IconifyCombobox } from './combobox';
@@ -8,12 +8,14 @@ import { QueryClientProvider } from './lib/query-client';
 import type { IconifyPluginConfig, IconOptions } from './lib/types';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
 
+const theme = buildTheme();
+
 interface IconifyInputProps extends ObjectInputProps {
   config: IconifyPluginConfig;
 }
 
-export function IconifyInput(props: IconifyInputProps) {
-  const { config, value, onChange: pushChange, schemaType } = props;
+export const IconifyInput = memo(function IconifyInput(props: IconifyInputProps) {
+  const { config, value, onChange: pushChange, schemaType, elementProps, focused } = props;
 
   const selectedIcon: string | null = value?.name ?? null;
 
@@ -33,12 +35,14 @@ export function IconifyInput(props: IconifyInputProps) {
 
   return (
     <QueryClientProvider>
-      <ThemeProvider theme={buildTheme()}>
+      <ThemeProvider theme={theme}>
         <Stack space={2}>
           <IconifyCombobox
             selectedIcon={selectedIcon}
             onSelect={handleSelect}
             collections={collections}
+            studioElementProps={elementProps}
+            fieldFocused={focused}
           />
 
           {showName && selectedIcon ? <IconifyNameDisplay name={selectedIcon} /> : null}
@@ -46,7 +50,7 @@ export function IconifyInput(props: IconifyInputProps) {
       </ThemeProvider>
     </QueryClientProvider>
   );
-}
+});
 
 interface IconifyNameDisplayProps {
   name?: string | null;

package/src/iconify-preview.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@iconify/react';
 import type { IconifyIconName } from '@iconify/utils';
 import { stringToIcon } from '@iconify/utils';
+import { memo } from 'react';
 import type { PreviewProps } from 'sanity';
 import { QueryClientProvider } from './lib/query-client';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
@@ -9,7 +10,7 @@ import { usePrettyIconName } from './lib/use-pretty-icon-name';
 // ICONIFY PREVIEW //
 // --------------- //
 
-export function IconifyPreview(props: PreviewProps) {
+export const IconifyPreview = memo(function IconifyPreview(props: PreviewProps) {
   const { title } = props;
   const iconName = typeof props.title === 'string' ? stringToIcon(props.title) : null;
 
@@ -23,7 +24,7 @@ export function IconifyPreview(props: PreviewProps) {
   }
 
   return props.renderDefault(props);
-}
+});
 
 // --------------------- //
 // ICONIFY PREVIEW INNER //

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

@@ -1 +1 @@
-export type IconPrefix = 'material-symbols' | 'material-symbols-light' | 'ic' | 'mdi' | 'mdi-light' | 'line-md' | 'solar' | 'tabler' | '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' | 'hugeicons' | 'lets-icons' | 'streamline-ultimate' | 'streamline-plump' | 'streamline-sharp' | 'mage' | 'stash' | 'lineicons' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'jam' | 'streamline-cyber' | 'guidance' | 'carbon' | 'ion' | 'famicons' | 'ant-design' | 'lsicon' | 'gravity-ui' | 'cil' | 'ep' | 'charm' | 'quill' | 'bytesize' | 'bi' | 'streamline-pixel' | 'streamline-block' | 'rivet-icons' | 'nimbus' | 'formkit' | 'fluent' | 'ph' | 'teenyicons' | 'clarity' | 'streamline-freehand' | 'ix' | 'octicon' | 'memory' | 'system-uicons' | 'radix-icons' | 'zondicons' | 'uiw' | 'maki' | 'codex' | 'ei' | 'heroicons' | 'sidekickicons' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'f7' | 'pajamas' | 'garden' | 'streamline' | 'streamline-flex' | 'fa7-solid' | 'fa7-regular' | 'picon' | 'ooui' | 'oui' | 'nrk' | 'dinkie-icons' | 'qlementine-icons' | 'streamline-ultimate-color' | 'streamline-plump-color' | 'streamline-freehand-color' | 'streamline-kameleon-color' | 'streamline-stickies-color' | 'fluent-color' | 'streamline-color' | 'streamline-flex-color' | 'streamline-sharp-color' | 'streamline-cyber-color' | 'icon-park' | 'marketeq' | 'vscode-icons' | 'codicon' | 'material-icon-theme' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'unjs' | 'simple-icons' | 'logos' | 'streamline-logos' | 'cib' | 'fa7-brands' | 'bxl' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'openmoji' | 'twemoji' | 'noto' | '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' | 'fa6-solid' | 'fa6-regular' | 'fa6-brands' | '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' | 'fluent-emoji';
+export type IconPrefix = 'material-symbols' | 'material-symbols-light' | 'ic' | 'mdi' | 'mdi-light' | 'line-md' | 'solar' | 'tabler' | 'boxicons' | 'mingcute' | 'ri' | 'mynaui' | 'iconamoon' | 'iconoir' | 'lucide' | 'lucide-lab' | 'uil' | 'tdesign' | 'si' | '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' | 'hugeicons' | 'lets-icons' | 'streamline-ultimate' | 'streamline-plump' | 'streamline-sharp' | 'mage' | 'stash' | 'lineicons' | 'wordpress' | 'icon-park-outline' | 'icon-park-solid' | 'icon-park-twotone' | 'jam' | 'streamline-cyber' | 'guidance' | 'carbon' | 'ion' | 'famicons' | 'ant-design' | 'lsicon' | 'gravity-ui' | 'cil' | 'roentgen' | 'ep' | 'charm' | 'quill' | 'bytesize' | 'bi' | 'streamline-pixel' | 'streamline-block' | 'rivet-icons' | 'nimbus' | 'formkit' | 'fluent' | 'ph' | 'glyphs' | 'glyphs-poly' | 'teenyicons' | 'clarity' | 'streamline-freehand' | 'ix' | 'octicon' | 'memory' | 'system-uicons' | 'radix-icons' | 'zondicons' | 'uiw' | 'codex' | 'ei' | 'heroicons' | 'sidekickicons' | 'pepicons-pop' | 'pepicons-print' | 'pepicons-pencil' | 'f7' | 'pajamas' | 'garden' | 'streamline' | 'streamline-flex' | 'fa7-solid' | 'fa7-regular' | 'picon' | 'ooui' | 'maki' | 'temaki' | 'oui' | 'nrk' | 'dinkie-icons' | 'qlementine-icons' | 'streamline-ultimate-color' | 'streamline-plump-color' | 'streamline-freehand-color' | 'streamline-kameleon-color' | 'streamline-stickies-color' | 'fluent-color' | 'streamline-color' | 'streamline-flex-color' | 'streamline-sharp-color' | 'streamline-cyber-color' | 'icon-park' | 'marketeq' | 'vscode-icons' | 'codicon' | 'material-icon-theme' | 'file-icons' | 'devicon' | 'devicon-plain' | 'catppuccin' | 'skill-icons' | 'unjs' | 'simple-icons' | 'logos' | 'streamline-logos' | 'cib' | 'fa7-brands' | 'bxl' | 'nonicons' | 'arcticons' | 'cbi' | 'brandico' | 'entypo-social' | 'token' | 'token-branded' | 'cryptocurrency' | 'cryptocurrency-color' | 'openmoji' | 'twemoji' | 'noto' | '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' | 'bx' | 'bxs' | 'fa6-solid' | 'fa6-regular' | 'fa6-brands' | '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' | 'fluent-emoji';

package/src/lib/types.test.ts

@@ -0,0 +1,85 @@
+import { defineField } from 'sanity';
+import type { IntrinsicDefinitions } from 'sanity';
+import { describe, expectTypeOf, it } from 'vitest';
+import type { IconDefinition, IconValue } from './types';
+
+// These are type-level tests: they fail at compile time if types are wrong,
+// not at runtime. Credit: danilo-arioli (PR #13).
+
+describe('IconDefinition type safety', () => {
+  it('registers icon in IntrinsicDefinitions (module augmentation)', () => {
+    // If this fails, the declare module 'sanity' augmentation is broken and
+    // Sanity won't recognise 'icon' as a valid type string in defineField/defineType.
+    expectTypeOf<IntrinsicDefinitions['icon']>().toMatchTypeOf<IconDefinition>();
+  });
+
+  it('types value as IconValue in validation callbacks', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      validation: (Rule) =>
+        Rule.custom((value) => {
+          expectTypeOf(value).toExtend<IconValue>();
+          expectTypeOf(value?.name).toExtend<string | undefined>();
+          return value?.name ? true : 'Icon is required';
+        }),
+    });
+  });
+
+  it('types value as IconValue in hidden callbacks', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      hidden: ({ value, document }) => {
+        expectTypeOf(value).toExtend<IconValue>();
+        expectTypeOf(value?.name).toExtend<string | undefined>();
+        return value?.name === 'hidden-icon' || document?._type === 'simple';
+      },
+    });
+  });
+
+  it('types value as IconValue in readOnly callbacks', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      readOnly: ({ value, document }) => {
+        expectTypeOf(value).toExtend<IconValue>();
+        expectTypeOf(value?.name).toExtend<string | undefined>();
+        return document?.published === true && (value?.name?.startsWith('system:') ?? false);
+      },
+    });
+  });
+
+  it('types value as IconValue in initialValue callbacks', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      initialValue: (params, context) => {
+        expectTypeOf(context.currentUser).toMatchTypeOf<{ id: string } | null>();
+        return { name: 'mdi:home' } satisfies IconValue;
+      },
+    });
+  });
+
+  it('accepts collapsible and collapsed options', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      options: {
+        collapsible: true,
+        collapsed: false,
+        collections: ['mdi'],
+        showName: true,
+      },
+    });
+  });
+
+  it('rejects unknown options', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      // @ts-expect-error unknown option should not be accepted
+      options: { unknownOption: true },
+    });
+  });
+});

package/src/lib/types.ts

@@ -1,5 +1,14 @@
 import type { IconifyInfo } from '@iconify/types';
-import type { BaseSchemaDefinition } from 'sanity';
+import type {
+  BaseSchemaDefinition,
+  ConditionalPropertyCallbackContext,
+  FieldGroupDefinition,
+  FieldsetDefinition,
+  InitialValueProperty,
+  ObjectOptions,
+  RuleDef,
+  ValidationBuilder,
+} from 'sanity';
 
 // If this line errors, the type definitions have not been generated.
 import type { IconPrefix } from './icon-types.gen';
@@ -8,10 +17,10 @@ import type { IconPrefix } from './icon-types.gen';
 export type { BaseSchemaDefinition } from 'sanity';
 export type { IconPrefix };
 
-export interface IconOptions {
+export type IconOptions = {
   collections?: IconPrefix[];
   showName?: boolean;
-}
+} & Pick<ObjectOptions, 'collapsed' | 'collapsible'>;
 
 export interface IconifyPluginConfig {
   collections?: IconPrefix[];
@@ -23,13 +32,40 @@ export interface IconifySearchResult {
   collections: Record<string, IconifyInfo>;
 }
 
+export type IconValue =
+  | {
+      name?: string;
+    }
+  | undefined;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IconRule extends RuleDef<IconRule, IconValue> {}
+
+export type IconConditionalPropertyCallbackContext = Omit<
+  ConditionalPropertyCallbackContext,
+  'value'
+> & {
+  value: IconValue;
+};
+
+export type IconConditionalProperty =
+  | boolean
+  | ((context: IconConditionalPropertyCallbackContext) => boolean)
+  | undefined;
+
+export interface IconDefinition extends Omit<BaseSchemaDefinition, 'hidden' | 'readOnly'> {
+  type: 'icon';
+  groups?: FieldGroupDefinition[];
+  fieldsets?: FieldsetDefinition[];
+  options?: IconOptions;
+  hidden?: IconConditionalProperty;
+  readOnly?: IconConditionalProperty;
+  validation?: ValidationBuilder<IconRule, IconValue>;
+  initialValue?: InitialValueProperty<any, IconValue>;
+}
+
 // Extend the Sanity schema types to include our custom type
 declare module 'sanity' {
-  interface IconDefinition extends BaseSchemaDefinition {
-    type: 'icon';
-    options?: IconOptions;
-  }
-
   export interface IntrinsicDefinitions {
     icon: IconDefinition;
   }