sanity-plugin-iconify 2.1.0 → 3.0.0-beta.2

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' | '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' | 'roentgen' | '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' | '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' | '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,57 @@
+import { defineField } from 'sanity';
+import { describe, expectTypeOf, it } from 'vitest';
+import type { 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('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('accepts collapsible and collapsed options', () => {
+    defineField({
+      name: 'icon',
+      type: 'icon',
+      options: {
+        collapsible: true,
+        collapsed: false,
+        collections: ['mdi'],
+      },
+    });
+  });
+});

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;
   }