sanity-plugin-iconify 1.1.2 → 2.0.1

package/dist/index.d.cts

@@ -1,5 +1,4 @@
 import { BaseSchemaDefinition } from 'sanity';
-import { IconifyInfo } from '@iconify/types';
 import { Plugin as Plugin_2 } from 'sanity';
 
 export { BaseSchemaDefinition };
@@ -19,6 +18,63 @@ export { BaseSchemaDefinition };
  */
 export declare const iconify: Plugin_2<void | IconifyPluginConfig>;
 
+/**
+ * Icon set information block.
+ */
+declare interface IconifyInfo {
+  // Icon set name.
+  name: string;
+
+  // Total number of icons.
+  total?: number;
+
+  // Version string.
+  version?: string;
+
+  // Author information.
+  author: {
+    // Author name.
+    name: string;
+
+    // Link to author's website or icon set website.
+    url?: string;
+  };
+
+  // License
+  license: {
+    // Human readable license.
+    title: string;
+
+    // SPDX license identifier.
+    spdx?: string;
+
+    // License URL.
+    url?: string;
+  };
+
+  // Array of icons that should be used for samples in icon sets list.
+  samples?: string[];
+
+  // Icon grid: number or array of numbers.
+  height?: number | number[];
+
+  // Display height for samples: 16 - 24
+  displayHeight?: number;
+
+  // Category on Iconify collections list.
+  category?: string;
+
+  // List of tags to group similar icon sets.
+  tags?: string[];
+
+  // Palette status. True if icons have predefined color scheme, false if icons use currentColor.
+  // Ideally, icon set should not mix icons with and without palette to simplify search.
+  palette?: boolean;
+
+  // If true, icon set should not appear in icon sets list.
+  hidden?: boolean;
+}
+
 export declare interface IconifyPluginConfig {
   collections?: IconPrefix[];
   showName?: boolean;
@@ -42,6 +98,7 @@ export declare type IconPrefix =
   | 'ph'
   | 'solar'
   | 'tabler'
+  | 'hugeicons'
   | 'mingcute'
   | 'ri'
   | 'bi'
@@ -50,6 +107,7 @@ export declare type IconPrefix =
   | 'iconoir'
   | 'ion'
   | 'lucide'
+  | 'lucide-lab'
   | 'uil'
   | 'tdesign'
   | 'teenyicons'
@@ -89,20 +147,20 @@ export declare type IconPrefix =
   | 'maki'
   | 'gridicons'
   | 'mi'
+  | 'weui'
   | 'quill'
   | 'gala'
   | 'lets-icons'
   | 'f7'
   | 'mage'
+  | 'marketeq'
   | 'fluent'
   | 'icon-park-outline'
   | 'icon-park-solid'
   | 'icon-park-twotone'
   | 'icon-park'
-  | 'vscode-icons'
   | 'jam'
   | 'heroicons'
-  | 'codicon'
   | 'pajamas'
   | 'pepicons-pop'
   | 'pepicons-print'
@@ -114,6 +172,7 @@ export declare type IconPrefix =
   | 'fa6-solid'
   | 'fa6-regular'
   | 'ooui'
+  | 'rivet-icons'
   | 'nimbus'
   | 'oui'
   | 'formkit'
@@ -140,13 +199,10 @@ export declare type IconPrefix =
   | 'nonicons'
   | 'arcticons'
   | 'cbi'
-  | 'file-icons'
-  | 'devicon'
-  | 'devicon-plain'
-  | 'skill-icons'
-  | 'unjs'
   | 'brandico'
   | 'entypo-social'
+  | 'token'
+  | 'token-branded'
   | 'cryptocurrency'
   | 'cryptocurrency-color'
   | 'flag'
@@ -156,6 +212,14 @@ export declare type IconPrefix =
   | 'gis'
   | 'map'
   | 'geo'
+  | 'vscode-icons'
+  | 'codicon'
+  | 'file-icons'
+  | 'devicon'
+  | 'devicon-plain'
+  | 'catppuccin'
+  | 'skill-icons'
+  | 'unjs'
   | 'game-icons'
   | 'fad'
   | 'academicons'

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { BaseSchemaDefinition } from 'sanity';
-import { IconifyInfo } from '@iconify/types';
 import { Plugin as Plugin_2 } from 'sanity';
 
 export { BaseSchemaDefinition };
@@ -19,6 +18,63 @@ export { BaseSchemaDefinition };
  */
 export declare const iconify: Plugin_2<void | IconifyPluginConfig>;
 
+/**
+ * Icon set information block.
+ */
+declare interface IconifyInfo {
+  // Icon set name.
+  name: string;
+
+  // Total number of icons.
+  total?: number;
+
+  // Version string.
+  version?: string;
+
+  // Author information.
+  author: {
+    // Author name.
+    name: string;
+
+    // Link to author's website or icon set website.
+    url?: string;
+  };
+
+  // License
+  license: {
+    // Human readable license.
+    title: string;
+
+    // SPDX license identifier.
+    spdx?: string;
+
+    // License URL.
+    url?: string;
+  };
+
+  // Array of icons that should be used for samples in icon sets list.
+  samples?: string[];
+
+  // Icon grid: number or array of numbers.
+  height?: number | number[];
+
+  // Display height for samples: 16 - 24
+  displayHeight?: number;
+
+  // Category on Iconify collections list.
+  category?: string;
+
+  // List of tags to group similar icon sets.
+  tags?: string[];
+
+  // Palette status. True if icons have predefined color scheme, false if icons use currentColor.
+  // Ideally, icon set should not mix icons with and without palette to simplify search.
+  palette?: boolean;
+
+  // If true, icon set should not appear in icon sets list.
+  hidden?: boolean;
+}
+
 export declare interface IconifyPluginConfig {
   collections?: IconPrefix[];
   showName?: boolean;
@@ -42,6 +98,7 @@ export declare type IconPrefix =
   | 'ph'
   | 'solar'
   | 'tabler'
+  | 'hugeicons'
   | 'mingcute'
   | 'ri'
   | 'bi'
@@ -50,6 +107,7 @@ export declare type IconPrefix =
   | 'iconoir'
   | 'ion'
   | 'lucide'
+  | 'lucide-lab'
   | 'uil'
   | 'tdesign'
   | 'teenyicons'
@@ -89,20 +147,20 @@ export declare type IconPrefix =
   | 'maki'
   | 'gridicons'
   | 'mi'
+  | 'weui'
   | 'quill'
   | 'gala'
   | 'lets-icons'
   | 'f7'
   | 'mage'
+  | 'marketeq'
   | 'fluent'
   | 'icon-park-outline'
   | 'icon-park-solid'
   | 'icon-park-twotone'
   | 'icon-park'
-  | 'vscode-icons'
   | 'jam'
   | 'heroicons'
-  | 'codicon'
   | 'pajamas'
   | 'pepicons-pop'
   | 'pepicons-print'
@@ -114,6 +172,7 @@ export declare type IconPrefix =
   | 'fa6-solid'
   | 'fa6-regular'
   | 'ooui'
+  | 'rivet-icons'
   | 'nimbus'
   | 'oui'
   | 'formkit'
@@ -140,13 +199,10 @@ export declare type IconPrefix =
   | 'nonicons'
   | 'arcticons'
   | 'cbi'
-  | 'file-icons'
-  | 'devicon'
-  | 'devicon-plain'
-  | 'skill-icons'
-  | 'unjs'
   | 'brandico'
   | 'entypo-social'
+  | 'token'
+  | 'token-branded'
   | 'cryptocurrency'
   | 'cryptocurrency-color'
   | 'flag'
@@ -156,6 +212,14 @@ export declare type IconPrefix =
   | 'gis'
   | 'map'
   | 'geo'
+  | 'vscode-icons'
+  | 'codicon'
+  | 'file-icons'
+  | 'devicon'
+  | 'devicon-plain'
+  | 'catppuccin'
+  | 'skill-icons'
+  | 'unjs'
   | 'game-icons'
   | 'fad'
   | 'academicons'

package/dist/index.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { unset, set, definePlugin } from "sanity";
-import { Grid, Box, Card, Text, TextInput, Button, useToast, Popover, useTheme, studioTheme, ThemeProvider, Stack, Flex } from "@sanity/ui";
+import { Grid, Box, Card, Text, TextInput, Button, useToast, Popover, ThemeProvider, Stack, Flex } from "@sanity/ui";
+import { buildTheme } from "@sanity/ui/theme";
 import { useState, useCallback, forwardRef, useId, useRef, useEffect, useMemo } from "react";
-import { Combobox } from "@headlessui/react";
+import { useCombobox } from "downshift";
 import { match } from "ts-pattern";
 import { useQueryClient, useQuery, keepPreviousData, QueryClient, QueryClientProvider as QueryClientProvider$1 } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
@@ -33,13 +34,12 @@ function useSearch({ collections }) {
   ), { isLoading, isError, error, data, isPlaceholderData } = useQuery({
     queryKey: ["search", collections, debouncedTerm],
     queryFn: async ({ signal }) => {
-      var _a;
       const url = new URL("/search", BASE_API_URL);
       url.searchParams.append("query", debouncedTerm), url.searchParams.append("limit", "60"), collections && url.searchParams.append("prefixes", collections.join(","));
       const result = debouncedTerm ? await fetchJson({ url, signal }) : null;
       return result && Object.entries(result.collections).forEach(([prefix, info]) => {
         queryClient2.setQueryData(["iconSetInfo", prefix], info);
-      }), (_a = result == null ? void 0 : result.icons) != null ? _a : [];
+      }), result?.icons ?? [];
     },
     enabled: debouncedTerm.length > 0,
     placeholderData: keepPreviousData,
@@ -61,49 +61,46 @@ function useIconSetInfo({ prefix }) {
   return useQuery({
     queryKey: ["iconSetInfo", prefix],
     queryFn: async ({ signal }) => {
-      var _a;
-      if (!prefix)
-        return null;
+      if (!prefix) return null;
       const url = new URL("/collection", BASE_API_URL);
-      url.searchParams.append("prefix", prefix), url.searchParams.append("info", "true");
-      const result = await fetchJson({ url, signal });
-      return (_a = result == null ? void 0 : result.info) != null ? _a : null;
+      return url.searchParams.append("prefix", prefix), url.searchParams.append("info", "true"), (await fetchJson({ url, signal }))?.info ?? null;
     },
     staleTime: 1 / 0
   });
 }
-const ComboboxWrapper = styled(Grid)`
+styled(Grid)`
   grid-template-columns: 1fr min-content;
   position: relative;
-`, OptionsWrapper = styled(Box)`
+`;
+const OptionsWrapper = styled(Box)`
   box-sizing: border-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;
-    list-style: none;
     margin: 0;
     padding: 0;
-
-    @media (min-width: 650px) {
-      grid-template-columns: repeat(10, minmax(min(100%, 2.5rem), 1fr));
-    }
+    list-style: none;
   }
 
   & [role='option'] {
     display: grid;
     place-items: center;
+    width: clamp(3rem, 10vw, 4rem);
 
     & button {
-      aspect-ratio: 1;
       cursor: pointer;
       width: 100%;
 
       & > [data-ui='Box'] {
         display: flex;
       }
+
+      & svg {
+        aspect-ratio: 1;
+      }
     }
   }
 `;
@@ -111,80 +108,103 @@ function MessageWrapper({ children }) {
   return /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, children }) });
 }
 const SearchInput = forwardRef((props, ref) => {
-  const { term, selectedIcon, onChange } = props;
+  const { selectedIcon, suffix, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Combobox.Input,
+    TextInput,
     {
-      as: TextInput,
+      ...rest,
       ref,
       inputMode: "search",
-      value: term,
-      onChange,
       icon: selectedIcon ? /* @__PURE__ */ jsx(Icon, { icon: selectedIcon }) : null,
-      placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."
+      placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
+      suffix
     }
   );
 });
 SearchInput.displayName = "SearchInput";
-function SearchResults(props) {
-  const { state, data } = props;
-  return state === "initial" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "Search for icons" }) : state === "loading" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "Searching..." }) : state === "error" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "Something went wrong..." }) : state === "empty" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "No icons found" }) : /* @__PURE__ */ jsx(Combobox.Options, { style: { opacity: state === "stale" ? 0.5 : 1 }, children: data.map((icon) => /* @__PURE__ */ jsx(Combobox.Option, { value: icon, children: ({ active }) => /* @__PURE__ */ jsx(Button, { padding: 3, mode: "bleed", selected: active, children: /* @__PURE__ */ jsx(Icon, { icon, width: "100%", height: "100%" }) }) }, icon)) });
-}
+const SearchResults = forwardRef((props, ref) => {
+  const { state, data, getItemProps, highlightedIndex, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (() => {
+      switch (state) {
+        case "initial":
+          return /* @__PURE__ */ jsx(MessageWrapper, { children: "Search for icons" });
+        case "loading":
+          return /* @__PURE__ */ jsx(MessageWrapper, { children: "Searching..." });
+        case "error":
+          return /* @__PURE__ */ jsx(MessageWrapper, { children: "Something went wrong..." });
+        case "empty":
+          return /* @__PURE__ */ jsx(MessageWrapper, { children: "No icons found" });
+      }
+    })(),
+    /* @__PURE__ */ jsx("ul", { ...rest, ref, style: { opacity: state === "stale" ? 0.5 : 1 }, children: (state === "data" || state === "stale") && data?.map((icon, index) => /* @__PURE__ */ jsx("li", { ...getItemProps({ item: icon, index }), children: /* @__PURE__ */ jsx(Button, { padding: 3, mode: "bleed", selected: index === highlightedIndex, children: /* @__PURE__ */ jsx(Icon, { icon, width: "100%", height: "100%" }) }) }, icon)) })
+  ] });
+});
 function UnsetButton(props) {
   const { onUnset } = props;
-  return /* @__PURE__ */ jsx(Card, { border: !0, borderLeft: !1, padding: 1, display: "flex", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(TrashIcon, {}), onClick: onUnset, mode: "bleed", fontSize: 1, padding: 2 }) });
+  return /* @__PURE__ */ jsx(Card, { border: !0, borderLeft: !1, padding: 1, display: "flex", radius: 2, children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(TrashIcon, {}), onClick: onUnset, mode: "bleed", fontSize: 1, padding: 2 }) });
 }
 function IconifyCombobox(props) {
   const { selectedIcon, onSelect: pushSelection, collections } = props, id = useId(), toast = useToast(), inputRef = useRef(null), { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({
     collections
-  }), handleTermChange = useCallback(
-    (event) => setTerm(event.target.value),
-    [setTerm]
-  ), handleSelect = useCallback(
-    (icon) => {
-      pushSelection(icon), setTerm("", !0);
+  }), {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectItem,
+    setInputValue
+  } = useCombobox({
+    items: data ?? [],
+    inputValue: term,
+    onInputValueChange({ inputValue, selectedItem }) {
+      inputValue !== selectedItem && setTerm(inputValue);
     },
-    [pushSelection, setTerm]
-  ), handleUnset = useCallback(() => handleSelect(""), [handleSelect]);
+    onSelectedItemChange({ selectedItem }) {
+      pushSelection(selectedItem), setTerm("", !0), setInputValue("");
+    }
+  }), handleUnset = useCallback(() => {
+    pushSelection(""), setTerm("", !0), selectItem("");
+  }, []);
   return useEffect(() => {
     isError && (console.error("Iconify input error:", error), toast.push({
       id,
       status: "error",
       title: "Iconify input error",
-      description: error == null ? void 0 : error.message
+      description: error?.message
     }));
-  }, [error, id, isError, toast]), /* @__PURE__ */ jsxs(ComboboxWrapper, { children: [
-    /* @__PURE__ */ jsx(Combobox, { onChange: handleSelect, children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          ref: inputRef,
-          term,
-          selectedIcon,
-          onChange: handleTermChange
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Popover,
-        {
-          open,
-          placement: "bottom",
-          arrow: !1,
-          matchReferenceWidth: !0,
-          portal: !0,
-          constrainSize: !0,
-          referenceElement: inputRef.current,
-          content: /* @__PURE__ */ jsx(OptionsWrapper, { children: /* @__PURE__ */ jsx(
-            SearchResults,
-            {
-              state: match(!0).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
-              data
-            }
-          ) })
-        }
-      )
-    ] }) }),
-    selectedIcon ? /* @__PURE__ */ jsx(UnsetButton, { onUnset: handleUnset }) : null
+  }, [error, id, isError, toast]), /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        ...getInputProps({ ref: inputRef }),
+        selectedIcon,
+        suffix: selectedIcon ? /* @__PURE__ */ jsx(UnsetButton, { onUnset: handleUnset }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: !0,
+        style: { display: isOpen ? "block" : "none" },
+        placement: "bottom",
+        arrow: !1,
+        matchReferenceWidth: !0,
+        constrainSize: !0,
+        referenceElement: inputRef.current,
+        content: /* @__PURE__ */ jsx(OptionsWrapper, { children: /* @__PURE__ */ jsx(
+          SearchResults,
+          {
+            ...getMenuProps(),
+            state: match(!0).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
+            data,
+            getItemProps,
+            highlightedIndex
+          }
+        ) })
+      }
+    )
   ] });
 }
 const queryClient = new QueryClient();
@@ -192,37 +212,26 @@ function QueryClientProvider(props) {
   return /* @__PURE__ */ jsx(QueryClientProvider$1, { client: queryClient, children: props.children });
 }
 function usePrettyIconName(props) {
-  var _a, _b;
   const { name } = props, iconMeta = useMemo(
-    () => {
-      var _a2;
-      return (_a2 = props.iconMeta) != null ? _a2 : name ? stringToIcon(name) : null;
-    },
+    () => props.iconMeta ?? (name ? stringToIcon(name) : null),
     [name, props.iconMeta]
-  ), iconSetInfo = useIconSetInfo({ prefix: (_a = iconMeta == null ? void 0 : iconMeta.prefix) != null ? _a : null });
+  ), iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
   return useMemo(
-    () => {
-      var _a2, _b2;
-      return iconMeta ? {
-        name: sentenceCase(iconMeta.name),
-        collection: (_b2 = (_a2 = iconSetInfo.data) == null ? void 0 : _a2.name) != null ? _b2 : iconMeta.prefix
-      } : null;
-    },
-    [iconMeta, (_b = iconSetInfo.data) == null ? void 0 : _b.name]
+    () => iconMeta ? {
+      name: sentenceCase(iconMeta.name),
+      collection: iconSetInfo.data?.name ?? iconMeta.prefix
+    } : null,
+    [iconMeta, iconSetInfo.data?.name]
   );
 }
 function IconifyInput(props) {
-  var _a, _b, _c, _d, _e;
-  const { config, value, onChange: pushChange, schemaType } = props, selectedIcon = (_a = value == null ? void 0 : value.name) != null ? _a : null, options = schemaType.options, collections = !!((_b = options == null ? void 0 : options.collections) != null && _b.length) && options.collections || !!((_c = config == null ? void 0 : config.collections) != null && _c.length) && config.collections || null, showName = (_e = (_d = options == null ? void 0 : options.showName) != null ? _d : config == null ? void 0 : config.showName) != null ? _e : !1, parentTheme = useTheme(), theme = useMemo(
-    () => parentTheme ? { ...parentTheme.sanity, color: studioTheme.color } : studioTheme,
-    [parentTheme]
-  ), handleSelect = useCallback(
+  const { config, value, onChange: pushChange, schemaType } = props, selectedIcon = value?.name ?? null, options = schemaType.options, collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null, showName = options?.showName ?? config?.showName ?? !1, handleSelect = useCallback(
     (icon) => {
       pushChange(icon === "" ? unset() : set(icon, ["name"]));
     },
     [pushChange]
   );
-  return /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+  return /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(ThemeProvider, { theme: buildTheme(), children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
     /* @__PURE__ */ jsx(
       IconifyCombobox,
       {
@@ -235,14 +244,13 @@ function IconifyInput(props) {
   ] }) }) });
 }
 function IconifyNameDisplay(props) {
-  var _a;
   const { name } = props, prettyName = usePrettyIconName({ name });
   return /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
     /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Selected:" }),
-    /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : name }),
-    (prettyName == null ? void 0 : prettyName.collection) && /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, style: { fontStyle: "italic" }, children: [
+    /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: prettyName?.name ?? name }),
+    prettyName?.collection && /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, style: { fontStyle: "italic" }, children: [
       "by ",
-      prettyName == null ? void 0 : prettyName.collection
+      prettyName?.collection
     ] })
   ] });
 }
@@ -251,13 +259,12 @@ function IconifyPreview(props) {
   return typeof title == "string" && iconName ? /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(IconifyPreviewInner, { ...props, iconName: title, iconMeta: iconName }) }) : props.renderDefault(props);
 }
 function IconifyPreviewInner(props) {
-  var _a;
   const { iconMeta, iconName, ...previewProps } = props, prettyName = usePrettyIconName({ iconMeta });
   return props.renderDefault({
     ...previewProps,
     media: /* @__PURE__ */ jsx(Icon, { icon: iconName }),
-    title: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : iconName,
-    subtitle: prettyName == null ? void 0 : prettyName.collection
+    title: prettyName?.name ?? iconName,
+    subtitle: prettyName?.collection
   });
 }
 const iconify = definePlugin((config = {}) => ({