@madebywild/sanity-icon-field 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderSelected(value: React.ReactNode) {\n if (typeof value === \"string\") return <Text size={2}>{value}</Text>;\n return value;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {\n const Icon = typeof value === \"string\" ? <span>🧿</span> : value;\n const Label = typeof label === \"string\" ? <Text size={2}>{label}</Text> : (label ?? value);\n\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {Icon}\n <Box flex={1} padding={2}>\n {Label}\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction IconInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const iconList = pluginConfig.iconList;\n const renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select icon\"\n noOptionsPlaceholder=\"No icons found\"\n listItems={iconList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderSelected(value);\n }}\n renderOption={({ label, value }) => {\n return renderOption({ label, value });\n }}\n />\n );\n}\n\nexport { IconInput, defaultRenderSelected, defaultRenderOption };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.icon\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of icons to show in the icon picker.\n * @example\n * ```ts\n * iconList: [\n * { label: \"X\", value: \"x\" },\n * { label: \"Check\", value: \"check\" },\n * ]\n * ```\n */\n iconList: ListItems;\n /**\n * A function to render the selected icon value.\n * Note: Import `defaultRenderSelected` to use the default rendering.\n * @example\n * ```ts\n * renderSelected: (value) => <svg><use href={`#icon-${value}`} /></svg>\n * ```\n */\n renderSelected?: (value: string) => React.JSX.Element;\n /** A function to render each icon option in the dropdown.\n * Note: Import `defaultRenderOption` to use the default rendering.\n * @example\n * ```ts\n * renderOption: (item) => <div>{item.label}</div>\n * ```\n */\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist icons by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist icons by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { defaultRenderOption, defaultRenderSelected, IconInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityIconFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-icon-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Icon\",\n description: \"Select an icon.\",\n icon: () => <>🧿</>,\n components: {\n input: (props) => <IconInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityIconFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderSelected","value","jsx","Text","defaultRenderOption","label","Card","Flex","Icon","Box","Label","IconInput","t0","$","_c","pluginConfig","props","options","schemaType","iconList","renderOption","renderSelected","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","value_1","t3","t4","value_2","AsyncAutocomplete","_temp","opt","typeName","wildSanityIconFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","Fragment","components","input"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderSelected(value: React.JSX.Element | string) {\n if (typeof value === \"string\") return <Text size={2}>{value}</Text>;\n return value;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value }: { label?: React.JSX.Element | string; value: React.JSX.Element | string }) {\n const Icon = typeof value === \"string\" ? <span>🧿</span> : value;\n const Label = typeof label === \"string\" ? <Text size={2}>{label}</Text> : (label ?? value);\n\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {Icon}\n <Box flex={1} padding={2}>\n {Label}\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction IconInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const iconList = pluginConfig.iconList;\n const renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select icon\"\n noOptionsPlaceholder=\"No icons found\"\n listItems={iconList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderSelected(value);\n }}\n renderOption={({ label, value }) => {\n return renderOption({ label, value });\n }}\n />\n );\n}\n\nexport { IconInput, defaultRenderSelected, defaultRenderOption };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.icon\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of icons to show in the icon picker.\n * @example\n * ```ts\n * iconList: [\n * { label: \"X\", value: \"x\" },\n * { label: \"Check\", value: \"check\" },\n * ]\n * ```\n */\n iconList: ListItems;\n /**\n * A function to render the selected icon value.\n * Note: Import `defaultRenderSelected` to use the default rendering.\n * @example\n * ```ts\n * renderSelected: (value) => <svg><use href={`#icon-${value}`} /></svg>\n * ```\n */\n renderSelected?: (value: string) => React.JSX.Element;\n /** A function to render each icon option in the dropdown.\n * Note: Import `defaultRenderOption` to use the default rendering.\n * @example\n * ```ts\n * renderOption: (item) => <div>{item.label}</div>\n * ```\n */\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist icons by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist icons by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { defaultRenderOption, defaultRenderSelected, IconInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityIconFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-icon-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Icon\",\n description: \"Select an icon.\",\n icon: () => <>🧿</>,\n components: {\n input: (props) => <IconInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityIconFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderSelected","value","jsx","Text","defaultRenderOption","label","Card","Flex","Icon","Box","Label","IconInput","t0","$","_c","pluginConfig","props","options","schemaType","iconList","renderOption","renderSelected","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","value_1","t3","t4","value_2","AsyncAutocomplete","_temp","opt","typeName","wildSanityIconFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","Fragment","components","input"],"mappings":"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"}
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as sanity0 from "sanity";
2
2
  import { ObjectOptions, StringDefinition } from "sanity";
3
- import * as react7 from "react";
3
+ import * as react2 from "react";
4
4
  /** @public */
5
5
  type ListItem = {
6
6
  value: string;
@@ -65,15 +65,15 @@ declare module "sanity" {
65
65
  }
66
66
  }
67
67
  /** @public */
68
- declare function defaultRenderSelected(value: React.ReactNode): number | bigint | boolean | react7.JSX.Element | Iterable<react7.ReactNode> | Promise<string | number | bigint | boolean | react7.ReactPortal | react7.ReactElement<unknown, string | react7.JSXElementConstructor<any>> | Iterable<react7.ReactNode> | null | undefined> | null | undefined;
68
+ declare function defaultRenderSelected(value: React.JSX.Element | string): react2.JSX.Element;
69
69
  /** @public */
70
70
  declare function defaultRenderOption({
71
71
  label,
72
72
  value
73
73
  }: {
74
- label?: React.ReactNode;
75
- value: React.ReactNode;
76
- }): react7.JSX.Element;
74
+ label?: React.JSX.Element | string;
75
+ value: React.JSX.Element | string;
76
+ }): react2.JSX.Element;
77
77
  /** @public */
78
78
  declare const wildSanityIconFieldPlugin: sanity0.Plugin<PluginConfig>;
79
79
  export { type FieldOptions, type PluginConfig, defaultRenderOption, defaultRenderSelected, typeName, wildSanityIconFieldPlugin };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as sanity0 from "sanity";
2
2
  import { ObjectOptions, StringDefinition } from "sanity";
3
- import * as react7 from "react";
3
+ import * as react2 from "react";
4
4
  /** @public */
5
5
  type ListItem = {
6
6
  value: string;
@@ -65,15 +65,15 @@ declare module "sanity" {
65
65
  }
66
66
  }
67
67
  /** @public */
68
- declare function defaultRenderSelected(value: React.ReactNode): number | bigint | boolean | react7.JSX.Element | Iterable<react7.ReactNode> | Promise<string | number | bigint | boolean | react7.ReactPortal | react7.ReactElement<unknown, string | react7.JSXElementConstructor<any>> | Iterable<react7.ReactNode> | null | undefined> | null | undefined;
68
+ declare function defaultRenderSelected(value: React.JSX.Element | string): react2.JSX.Element;
69
69
  /** @public */
70
70
  declare function defaultRenderOption({
71
71
  label,
72
72
  value
73
73
  }: {
74
- label?: React.ReactNode;
75
- value: React.ReactNode;
76
- }): react7.JSX.Element;
74
+ label?: React.JSX.Element | string;
75
+ value: React.JSX.Element | string;
76
+ }): react2.JSX.Element;
77
77
  /** @public */
78
78
  declare const wildSanityIconFieldPlugin: sanity0.Plugin<PluginConfig>;
79
79
  export { type FieldOptions, type PluginConfig, defaultRenderOption, defaultRenderSelected, typeName, wildSanityIconFieldPlugin };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderSelected(value: React.ReactNode) {\n if (typeof value === \"string\") return <Text size={2}>{value}</Text>;\n return value;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {\n const Icon = typeof value === \"string\" ? <span>🧿</span> : value;\n const Label = typeof label === \"string\" ? <Text size={2}>{label}</Text> : (label ?? value);\n\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {Icon}\n <Box flex={1} padding={2}>\n {Label}\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction IconInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const iconList = pluginConfig.iconList;\n const renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select icon\"\n noOptionsPlaceholder=\"No icons found\"\n listItems={iconList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderSelected(value);\n }}\n renderOption={({ label, value }) => {\n return renderOption({ label, value });\n }}\n />\n );\n}\n\nexport { IconInput, defaultRenderSelected, defaultRenderOption };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.icon\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of icons to show in the icon picker.\n * @example\n * ```ts\n * iconList: [\n * { label: \"X\", value: \"x\" },\n * { label: \"Check\", value: \"check\" },\n * ]\n * ```\n */\n iconList: ListItems;\n /**\n * A function to render the selected icon value.\n * Note: Import `defaultRenderSelected` to use the default rendering.\n * @example\n * ```ts\n * renderSelected: (value) => <svg><use href={`#icon-${value}`} /></svg>\n * ```\n */\n renderSelected?: (value: string) => React.JSX.Element;\n /** A function to render each icon option in the dropdown.\n * Note: Import `defaultRenderOption` to use the default rendering.\n * @example\n * ```ts\n * renderOption: (item) => <div>{item.label}</div>\n * ```\n */\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist icons by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist icons by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { defaultRenderOption, defaultRenderSelected, IconInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityIconFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-icon-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Icon\",\n description: \"Select an icon.\",\n icon: () => <>🧿</>,\n components: {\n input: (props) => <IconInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityIconFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderSelected","value","defaultRenderOption","label","Icon","Label","IconInput","t0","$","_c","pluginConfig","props","options","schemaType","iconList","renderOption","renderSelected","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","value_1","t3","t4","value_2","_temp","opt","typeName","wildSanityIconFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","components","input"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderSelected(value: React.JSX.Element | string) {\n if (typeof value === \"string\") return <Text size={2}>{value}</Text>;\n return value;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value }: { label?: React.JSX.Element | string; value: React.JSX.Element | string }) {\n const Icon = typeof value === \"string\" ? <span>🧿</span> : value;\n const Label = typeof label === \"string\" ? <Text size={2}>{label}</Text> : (label ?? value);\n\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {Icon}\n <Box flex={1} padding={2}>\n {Label}\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction IconInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const iconList = pluginConfig.iconList;\n const renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select icon\"\n noOptionsPlaceholder=\"No icons found\"\n listItems={iconList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderSelected(value);\n }}\n renderOption={({ label, value }) => {\n return renderOption({ label, value });\n }}\n />\n );\n}\n\nexport { IconInput, defaultRenderSelected, defaultRenderOption };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.icon\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of icons to show in the icon picker.\n * @example\n * ```ts\n * iconList: [\n * { label: \"X\", value: \"x\" },\n * { label: \"Check\", value: \"check\" },\n * ]\n * ```\n */\n iconList: ListItems;\n /**\n * A function to render the selected icon value.\n * Note: Import `defaultRenderSelected` to use the default rendering.\n * @example\n * ```ts\n * renderSelected: (value) => <svg><use href={`#icon-${value}`} /></svg>\n * ```\n */\n renderSelected?: (value: string) => React.JSX.Element;\n /** A function to render each icon option in the dropdown.\n * Note: Import `defaultRenderOption` to use the default rendering.\n * @example\n * ```ts\n * renderOption: (item) => <div>{item.label}</div>\n * ```\n */\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist icons by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist icons by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { defaultRenderOption, defaultRenderSelected, IconInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityIconFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-icon-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Icon\",\n description: \"Select an icon.\",\n icon: () => <>🧿</>,\n components: {\n input: (props) => <IconInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityIconFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderSelected","value","defaultRenderOption","label","Icon","Label","IconInput","t0","$","_c","pluginConfig","props","options","schemaType","iconList","renderOption","renderSelected","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","value_1","t3","t4","value_2","_temp","opt","typeName","wildSanityIconFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","components","input"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@madebywild/sanity-icon-field",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "license": "UNLICENSED",
package/src/input.tsx CHANGED
@@ -4,13 +4,13 @@ import { type StringInputProps, set, unset } from "sanity";
4
4
  import type { FieldOptions, PluginConfig } from "./types";
5
5
 
6
6
  /** @public */
7
- function defaultRenderSelected(value: React.ReactNode) {
7
+ function defaultRenderSelected(value: React.JSX.Element | string) {
8
8
  if (typeof value === "string") return <Text size={2}>{value}</Text>;
9
9
  return value;
10
10
  }
11
11
 
12
12
  /** @public */
13
- function defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {
13
+ function defaultRenderOption({ label, value }: { label?: React.JSX.Element | string; value: React.JSX.Element | string }) {
14
14
  const Icon = typeof value === "string" ? <span>🧿</span> : value;
15
15
  const Label = typeof label === "string" ? <Text size={2}>{label}</Text> : (label ?? value);
16
16