sanity-plugin-iconify 4.0.0 → 4.0.1

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.
Files changed (3) hide show
  1. package/dist/index.cjs +131 -66
  2. package/dist/index.mjs +131 -66
  3. package/package.json +6 -2
package/dist/index.cjs CHANGED
@@ -31,6 +31,7 @@ let _tanstack_react_query = require("@tanstack/react-query");
31
31
  let use_debounce = require("use-debounce");
32
32
  let styled_components = require("styled-components");
33
33
  styled_components = __toESM(styled_components, 1);
34
+ let react_jsx_runtime = require("react/jsx-runtime");
34
35
  let _iconify_react = require("@iconify/react");
35
36
  let _sanity_icons = require("@sanity/icons");
36
37
  let _iconify_utils = require("@iconify/utils");
@@ -145,52 +146,83 @@ const OptionsWrapper = (0, styled_components.default)(_sanity_ui.Box)`
145
146
  }
146
147
  `;
147
148
  function MessageWrapper({ children }) {
148
- return <_sanity_ui.Card padding={4}>
149
- <_sanity_ui.Text align="center" muted>
150
- {children}
151
- </_sanity_ui.Text>
152
- </_sanity_ui.Card>;
149
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Card, {
150
+ padding: 4,
151
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Text, {
152
+ align: "center",
153
+ muted: true,
154
+ children
155
+ })
156
+ });
153
157
  }
154
158
  //#endregion
155
159
  //#region src/combobox/search-input.tsx
156
160
  const SearchInput = (0, react.memo)((0, react.forwardRef)((props, ref) => {
157
161
  const { selectedIcon, suffix, onChange, ...rest } = props;
158
- return <_sanity_ui.TextInput {...rest} onChange={onChange} ref={ref} inputMode="search" icon={selectedIcon ? <_iconify_react.Icon icon={selectedIcon} /> : null} placeholder={selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."} suffix={suffix} />;
162
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.TextInput, {
163
+ ...rest,
164
+ onChange,
165
+ ref,
166
+ inputMode: "search",
167
+ icon: selectedIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, { icon: selectedIcon }) : null,
168
+ placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
169
+ suffix
170
+ });
159
171
  }));
160
172
  SearchInput.displayName = "SearchInput";
161
173
  //#endregion
162
174
  //#region src/combobox/search-result.tsx
163
175
  const SearchResults = (0, react.memo)((0, react.forwardRef)((props, ref) => {
164
176
  const { state, data, getItemProps, highlightedIndex, ...rest } = props;
165
- return <>
166
- {(() => {
177
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(() => {
167
178
  switch (state) {
168
- case "initial": return <MessageWrapper>Search for icons</MessageWrapper>;
169
- case "loading": return <MessageWrapper>Searching...</MessageWrapper>;
170
- case "error": return <MessageWrapper>Something went wrong...</MessageWrapper>;
171
- case "empty": return <MessageWrapper>No icons found</MessageWrapper>;
179
+ case "initial": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageWrapper, { children: "Search for icons" });
180
+ case "loading": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageWrapper, { children: "Searching..." });
181
+ case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageWrapper, { children: "Something went wrong..." });
182
+ case "empty": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageWrapper, { children: "No icons found" });
172
183
  }
173
- })()}
174
-
175
- <ul {...rest} ref={ref} data-testid="iconify-results" style={{ opacity: state === "stale" ? .5 : 1 }}>
176
- {(state === "data" || state === "stale") && data?.map((icon, index) => <li key={icon} {...getItemProps({
177
- item: icon,
178
- index
179
- })}>
180
- <_sanity_ui.Button padding={3} mode="bleed" selected={index === highlightedIndex}>
181
- <_iconify_react.Icon icon={icon} width="100%" height="100%" />
182
- </_sanity_ui.Button>
183
- </li>)}
184
- </ul>
185
- </>;
184
+ })(), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
185
+ ...rest,
186
+ ref,
187
+ "data-testid": "iconify-results",
188
+ style: { opacity: state === "stale" ? .5 : 1 },
189
+ children: (state === "data" || state === "stale") && data?.map((icon, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
190
+ ...getItemProps({
191
+ item: icon,
192
+ index
193
+ }),
194
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Button, {
195
+ padding: 3,
196
+ mode: "bleed",
197
+ selected: index === highlightedIndex,
198
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, {
199
+ icon,
200
+ width: "100%",
201
+ height: "100%"
202
+ })
203
+ })
204
+ }, icon))
205
+ })] });
186
206
  }));
187
207
  //#endregion
188
208
  //#region src/combobox/unset-button.tsx
189
209
  function UnsetButton(props) {
190
210
  const { onUnset } = props;
191
- return <_sanity_ui.Card border borderLeft={false} padding={1} display="flex" radius={2}>
192
- <_sanity_ui.Button data-testid="iconify-unset" icon={<_sanity_icons.TrashIcon />} onClick={onUnset} mode="bleed" fontSize={1} padding={2} />
193
- </_sanity_ui.Card>;
211
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Card, {
212
+ border: true,
213
+ borderLeft: false,
214
+ padding: 1,
215
+ display: "flex",
216
+ radius: 2,
217
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Button, {
218
+ "data-testid": "iconify-unset",
219
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_icons.TrashIcon, {}),
220
+ onClick: onUnset,
221
+ mode: "bleed",
222
+ fontSize: 1,
223
+ padding: 2
224
+ })
225
+ });
194
226
  }
195
227
  //#endregion
196
228
  //#region src/combobox/iconify-combobox.tsx
@@ -267,19 +299,36 @@ const IconifyCombobox = (0, react.memo)(function IconifyCombobox(props) {
267
299
  "aria-describedby": studioElementProps?.["aria-describedby"],
268
300
  onFocus: handleFocus
269
301
  });
270
- return <div>
271
- <SearchInput {...inputProps} onBlur={handleBlur} selectedIcon={selectedIcon} suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null} />
272
-
273
- <_sanity_ui.Popover open={true} style={{ display: isOpen ? "block" : "none" }} placement="bottom" arrow={false} matchReferenceWidth constrainSize referenceElement={inputRef.current} content={<OptionsWrapper>
274
- <SearchResults {...getMenuProps()} state={(0, ts_pattern.match)(true).returnType().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} />
275
- </OptionsWrapper>} />
276
- </div>;
302
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
303
+ ...inputProps,
304
+ onBlur: handleBlur,
305
+ selectedIcon,
306
+ suffix: selectedIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnsetButton, { onUnset: handleUnset }) : null
307
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Popover, {
308
+ open: true,
309
+ style: { display: isOpen ? "block" : "none" },
310
+ placement: "bottom",
311
+ arrow: false,
312
+ matchReferenceWidth: true,
313
+ constrainSize: true,
314
+ referenceElement: inputRef.current,
315
+ content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionsWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchResults, {
316
+ ...getMenuProps(),
317
+ state: (0, ts_pattern.match)(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
318
+ data,
319
+ getItemProps,
320
+ highlightedIndex
321
+ }) })
322
+ })] });
277
323
  });
278
324
  //#endregion
279
325
  //#region src/lib/query-client.tsx
280
326
  const queryClient = new _tanstack_react_query.QueryClient();
281
327
  function QueryClientProvider(props) {
282
- return <_tanstack_react_query.QueryClientProvider client={queryClient}>{props.children}</_tanstack_react_query.QueryClientProvider>;
328
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_query.QueryClientProvider, {
329
+ client: queryClient,
330
+ children: props.children
331
+ });
283
332
  }
284
333
  //#endregion
285
334
  //#region src/lib/use-pretty-icon-name.ts
@@ -301,44 +350,57 @@ const IconifyInput = (0, react.memo)(function IconifyInput(props) {
301
350
  const options = schemaType.options;
302
351
  const collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null;
303
352
  const showName = options?.showName ?? config?.showName ?? false;
304
- const handleSelect = (0, react.useCallback)((icon) => {
305
- pushChange(icon === "" ? (0, sanity.unset)() : (0, sanity.set)(icon, ["name"]));
306
- }, [pushChange]);
307
- return <QueryClientProvider>
308
- <_sanity_ui.ThemeProvider theme={theme}>
309
- <_sanity_ui.Stack space={2}>
310
- <IconifyCombobox selectedIcon={selectedIcon} onSelect={handleSelect} collections={collections} studioElementProps={elementProps} fieldFocused={focused} />
311
-
312
- {showName && selectedIcon ? <IconifyNameDisplay name={selectedIcon} /> : null}
313
- </_sanity_ui.Stack>
314
- </_sanity_ui.ThemeProvider>
315
- </QueryClientProvider>;
353
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryClientProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.ThemeProvider, {
354
+ theme,
355
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_sanity_ui.Stack, {
356
+ space: 2,
357
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconifyCombobox, {
358
+ selectedIcon,
359
+ onSelect: (0, react.useCallback)((icon) => {
360
+ pushChange(icon === "" ? (0, sanity.unset)() : (0, sanity.set)(icon, ["name"]));
361
+ }, [pushChange]),
362
+ collections,
363
+ studioElementProps: elementProps,
364
+ fieldFocused: focused
365
+ }), showName && selectedIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconifyNameDisplay, { name: selectedIcon }) : null]
366
+ })
367
+ }) });
316
368
  });
317
369
  function IconifyNameDisplay(props) {
318
370
  const { name } = props;
319
371
  const prettyName = usePrettyIconName({ name });
320
- return <_sanity_ui.Flex gap={1}>
321
- <_sanity_ui.Text size={1} muted>
322
- Selected:
323
- </_sanity_ui.Text>
324
-
325
- <_sanity_ui.Text size={1} weight="semibold">
326
- {prettyName?.name ?? name}
327
- </_sanity_ui.Text>
328
-
329
- {prettyName?.collection && <_sanity_ui.Text size={1} muted style={{ fontStyle: "italic" }}>
330
- by {prettyName?.collection}
331
- </_sanity_ui.Text>}
332
- </_sanity_ui.Flex>;
372
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_sanity_ui.Flex, {
373
+ gap: 1,
374
+ children: [
375
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Text, {
376
+ size: 1,
377
+ muted: true,
378
+ children: "Selected:"
379
+ }),
380
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_ui.Text, {
381
+ size: 1,
382
+ weight: "semibold",
383
+ children: prettyName?.name ?? name
384
+ }),
385
+ prettyName?.collection && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_sanity_ui.Text, {
386
+ size: 1,
387
+ muted: true,
388
+ style: { fontStyle: "italic" },
389
+ children: ["by ", prettyName?.collection]
390
+ })
391
+ ]
392
+ });
333
393
  }
334
394
  //#endregion
335
395
  //#region src/iconify-preview.tsx
336
396
  const IconifyPreview = (0, react.memo)(function IconifyPreview(props) {
337
397
  const { title } = props;
338
398
  const iconName = typeof props.title === "string" ? (0, _iconify_utils.stringToIcon)(props.title) : null;
339
- if (typeof title === "string" && iconName) return <QueryClientProvider>
340
- <IconifyPreviewInner {...props} iconName={title} iconMeta={iconName} />
341
- </QueryClientProvider>;
399
+ if (typeof title === "string" && iconName) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryClientProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconifyPreviewInner, {
400
+ ...props,
401
+ iconName: title,
402
+ iconMeta: iconName
403
+ }) });
342
404
  return props.renderDefault(props);
343
405
  });
344
406
  function IconifyPreviewInner(props) {
@@ -346,7 +408,7 @@ function IconifyPreviewInner(props) {
346
408
  const prettyName = usePrettyIconName({ iconMeta });
347
409
  return props.renderDefault({
348
410
  ...previewProps,
349
- media: <_iconify_react.Icon icon={iconName} />,
411
+ media: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, { icon: iconName }),
350
412
  title: prettyName?.name ?? iconName,
351
413
  subtitle: prettyName?.collection
352
414
  });
@@ -379,7 +441,10 @@ const iconify = (0, sanity.definePlugin)((config = {}) => {
379
441
  type: "string"
380
442
  }],
381
443
  components: {
382
- input: (props) => <IconifyInput {...props} config={config} />,
444
+ input: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconifyInput, {
445
+ ...props,
446
+ config
447
+ }),
383
448
  preview: IconifyPreview,
384
449
  field: (props) => props.renderDefault({
385
450
  ...props,
package/dist/index.mjs CHANGED
@@ -7,6 +7,7 @@ import { match } from "ts-pattern";
7
7
  import { QueryClient, QueryClientProvider, keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
8
8
  import { useDebounce } from "use-debounce";
9
9
  import styled from "styled-components";
10
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
10
11
  import { Icon } from "@iconify/react";
11
12
  import { TrashIcon } from "@sanity/icons";
12
13
  import { stringToIcon } from "@iconify/utils";
@@ -121,52 +122,83 @@ const OptionsWrapper = styled(Box)`
121
122
  }
122
123
  `;
123
124
  function MessageWrapper({ children }) {
124
- return <Card padding={4}>
125
- <Text align="center" muted>
126
- {children}
127
- </Text>
128
- </Card>;
125
+ return /* @__PURE__ */ jsx(Card, {
126
+ padding: 4,
127
+ children: /* @__PURE__ */ jsx(Text, {
128
+ align: "center",
129
+ muted: true,
130
+ children
131
+ })
132
+ });
129
133
  }
130
134
  //#endregion
131
135
  //#region src/combobox/search-input.tsx
132
136
  const SearchInput = memo(forwardRef((props, ref) => {
133
137
  const { selectedIcon, suffix, onChange, ...rest } = props;
134
- return <TextInput {...rest} onChange={onChange} ref={ref} inputMode="search" icon={selectedIcon ? <Icon icon={selectedIcon} /> : null} placeholder={selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."} suffix={suffix} />;
138
+ return /* @__PURE__ */ jsx(TextInput, {
139
+ ...rest,
140
+ onChange,
141
+ ref,
142
+ inputMode: "search",
143
+ icon: selectedIcon ? /* @__PURE__ */ jsx(Icon, { icon: selectedIcon }) : null,
144
+ placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
145
+ suffix
146
+ });
135
147
  }));
136
148
  SearchInput.displayName = "SearchInput";
137
149
  //#endregion
138
150
  //#region src/combobox/search-result.tsx
139
151
  const SearchResults = memo(forwardRef((props, ref) => {
140
152
  const { state, data, getItemProps, highlightedIndex, ...rest } = props;
141
- return <>
142
- {(() => {
153
+ return /* @__PURE__ */ jsxs(Fragment, { children: [(() => {
143
154
  switch (state) {
144
- case "initial": return <MessageWrapper>Search for icons</MessageWrapper>;
145
- case "loading": return <MessageWrapper>Searching...</MessageWrapper>;
146
- case "error": return <MessageWrapper>Something went wrong...</MessageWrapper>;
147
- case "empty": return <MessageWrapper>No icons found</MessageWrapper>;
155
+ case "initial": return /* @__PURE__ */ jsx(MessageWrapper, { children: "Search for icons" });
156
+ case "loading": return /* @__PURE__ */ jsx(MessageWrapper, { children: "Searching..." });
157
+ case "error": return /* @__PURE__ */ jsx(MessageWrapper, { children: "Something went wrong..." });
158
+ case "empty": return /* @__PURE__ */ jsx(MessageWrapper, { children: "No icons found" });
148
159
  }
149
- })()}
150
-
151
- <ul {...rest} ref={ref} data-testid="iconify-results" style={{ opacity: state === "stale" ? .5 : 1 }}>
152
- {(state === "data" || state === "stale") && data?.map((icon, index) => <li key={icon} {...getItemProps({
153
- item: icon,
154
- index
155
- })}>
156
- <Button padding={3} mode="bleed" selected={index === highlightedIndex}>
157
- <Icon icon={icon} width="100%" height="100%" />
158
- </Button>
159
- </li>)}
160
- </ul>
161
- </>;
160
+ })(), /* @__PURE__ */ jsx("ul", {
161
+ ...rest,
162
+ ref,
163
+ "data-testid": "iconify-results",
164
+ style: { opacity: state === "stale" ? .5 : 1 },
165
+ children: (state === "data" || state === "stale") && data?.map((icon, index) => /* @__PURE__ */ jsx("li", {
166
+ ...getItemProps({
167
+ item: icon,
168
+ index
169
+ }),
170
+ children: /* @__PURE__ */ jsx(Button, {
171
+ padding: 3,
172
+ mode: "bleed",
173
+ selected: index === highlightedIndex,
174
+ children: /* @__PURE__ */ jsx(Icon, {
175
+ icon,
176
+ width: "100%",
177
+ height: "100%"
178
+ })
179
+ })
180
+ }, icon))
181
+ })] });
162
182
  }));
163
183
  //#endregion
164
184
  //#region src/combobox/unset-button.tsx
165
185
  function UnsetButton(props) {
166
186
  const { onUnset } = props;
167
- return <Card border borderLeft={false} padding={1} display="flex" radius={2}>
168
- <Button data-testid="iconify-unset" icon={<TrashIcon />} onClick={onUnset} mode="bleed" fontSize={1} padding={2} />
169
- </Card>;
187
+ return /* @__PURE__ */ jsx(Card, {
188
+ border: true,
189
+ borderLeft: false,
190
+ padding: 1,
191
+ display: "flex",
192
+ radius: 2,
193
+ children: /* @__PURE__ */ jsx(Button, {
194
+ "data-testid": "iconify-unset",
195
+ icon: /* @__PURE__ */ jsx(TrashIcon, {}),
196
+ onClick: onUnset,
197
+ mode: "bleed",
198
+ fontSize: 1,
199
+ padding: 2
200
+ })
201
+ });
170
202
  }
171
203
  //#endregion
172
204
  //#region src/combobox/iconify-combobox.tsx
@@ -243,19 +275,36 @@ const IconifyCombobox = memo(function IconifyCombobox(props) {
243
275
  "aria-describedby": studioElementProps?.["aria-describedby"],
244
276
  onFocus: handleFocus
245
277
  });
246
- return <div>
247
- <SearchInput {...inputProps} onBlur={handleBlur} selectedIcon={selectedIcon} suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null} />
248
-
249
- <Popover open={true} style={{ display: isOpen ? "block" : "none" }} placement="bottom" arrow={false} matchReferenceWidth constrainSize referenceElement={inputRef.current} content={<OptionsWrapper>
250
- <SearchResults {...getMenuProps()} state={match(true).returnType().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} />
251
- </OptionsWrapper>} />
252
- </div>;
278
+ return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SearchInput, {
279
+ ...inputProps,
280
+ onBlur: handleBlur,
281
+ selectedIcon,
282
+ suffix: selectedIcon ? /* @__PURE__ */ jsx(UnsetButton, { onUnset: handleUnset }) : null
283
+ }), /* @__PURE__ */ jsx(Popover, {
284
+ open: true,
285
+ style: { display: isOpen ? "block" : "none" },
286
+ placement: "bottom",
287
+ arrow: false,
288
+ matchReferenceWidth: true,
289
+ constrainSize: true,
290
+ referenceElement: inputRef.current,
291
+ content: /* @__PURE__ */ jsx(OptionsWrapper, { children: /* @__PURE__ */ jsx(SearchResults, {
292
+ ...getMenuProps(),
293
+ state: match(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
294
+ data,
295
+ getItemProps,
296
+ highlightedIndex
297
+ }) })
298
+ })] });
253
299
  });
254
300
  //#endregion
255
301
  //#region src/lib/query-client.tsx
256
302
  const queryClient = new QueryClient();
257
303
  function QueryClientProvider$1(props) {
258
- return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>;
304
+ return /* @__PURE__ */ jsx(QueryClientProvider, {
305
+ client: queryClient,
306
+ children: props.children
307
+ });
259
308
  }
260
309
  //#endregion
261
310
  //#region src/lib/use-pretty-icon-name.ts
@@ -277,44 +326,57 @@ const IconifyInput = memo(function IconifyInput(props) {
277
326
  const options = schemaType.options;
278
327
  const collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null;
279
328
  const showName = options?.showName ?? config?.showName ?? false;
280
- const handleSelect = useCallback((icon) => {
281
- pushChange(icon === "" ? unset() : set(icon, ["name"]));
282
- }, [pushChange]);
283
- return <QueryClientProvider$1>
284
- <ThemeProvider theme={theme}>
285
- <Stack space={2}>
286
- <IconifyCombobox selectedIcon={selectedIcon} onSelect={handleSelect} collections={collections} studioElementProps={elementProps} fieldFocused={focused} />
287
-
288
- {showName && selectedIcon ? <IconifyNameDisplay name={selectedIcon} /> : null}
289
- </Stack>
290
- </ThemeProvider>
291
- </QueryClientProvider$1>;
329
+ return /* @__PURE__ */ jsx(QueryClientProvider$1, { children: /* @__PURE__ */ jsx(ThemeProvider, {
330
+ theme,
331
+ children: /* @__PURE__ */ jsxs(Stack, {
332
+ space: 2,
333
+ children: [/* @__PURE__ */ jsx(IconifyCombobox, {
334
+ selectedIcon,
335
+ onSelect: useCallback((icon) => {
336
+ pushChange(icon === "" ? unset() : set(icon, ["name"]));
337
+ }, [pushChange]),
338
+ collections,
339
+ studioElementProps: elementProps,
340
+ fieldFocused: focused
341
+ }), showName && selectedIcon ? /* @__PURE__ */ jsx(IconifyNameDisplay, { name: selectedIcon }) : null]
342
+ })
343
+ }) });
292
344
  });
293
345
  function IconifyNameDisplay(props) {
294
346
  const { name } = props;
295
347
  const prettyName = usePrettyIconName({ name });
296
- return <Flex gap={1}>
297
- <Text size={1} muted>
298
- Selected:
299
- </Text>
300
-
301
- <Text size={1} weight="semibold">
302
- {prettyName?.name ?? name}
303
- </Text>
304
-
305
- {prettyName?.collection && <Text size={1} muted style={{ fontStyle: "italic" }}>
306
- by {prettyName?.collection}
307
- </Text>}
308
- </Flex>;
348
+ return /* @__PURE__ */ jsxs(Flex, {
349
+ gap: 1,
350
+ children: [
351
+ /* @__PURE__ */ jsx(Text, {
352
+ size: 1,
353
+ muted: true,
354
+ children: "Selected:"
355
+ }),
356
+ /* @__PURE__ */ jsx(Text, {
357
+ size: 1,
358
+ weight: "semibold",
359
+ children: prettyName?.name ?? name
360
+ }),
361
+ prettyName?.collection && /* @__PURE__ */ jsxs(Text, {
362
+ size: 1,
363
+ muted: true,
364
+ style: { fontStyle: "italic" },
365
+ children: ["by ", prettyName?.collection]
366
+ })
367
+ ]
368
+ });
309
369
  }
310
370
  //#endregion
311
371
  //#region src/iconify-preview.tsx
312
372
  const IconifyPreview = memo(function IconifyPreview(props) {
313
373
  const { title } = props;
314
374
  const iconName = typeof props.title === "string" ? stringToIcon(props.title) : null;
315
- if (typeof title === "string" && iconName) return <QueryClientProvider$1>
316
- <IconifyPreviewInner {...props} iconName={title} iconMeta={iconName} />
317
- </QueryClientProvider$1>;
375
+ if (typeof title === "string" && iconName) return /* @__PURE__ */ jsx(QueryClientProvider$1, { children: /* @__PURE__ */ jsx(IconifyPreviewInner, {
376
+ ...props,
377
+ iconName: title,
378
+ iconMeta: iconName
379
+ }) });
318
380
  return props.renderDefault(props);
319
381
  });
320
382
  function IconifyPreviewInner(props) {
@@ -322,7 +384,7 @@ function IconifyPreviewInner(props) {
322
384
  const prettyName = usePrettyIconName({ iconMeta });
323
385
  return props.renderDefault({
324
386
  ...previewProps,
325
- media: <Icon icon={iconName} />,
387
+ media: /* @__PURE__ */ jsx(Icon, { icon: iconName }),
326
388
  title: prettyName?.name ?? iconName,
327
389
  subtitle: prettyName?.collection
328
390
  });
@@ -355,7 +417,10 @@ const iconify = definePlugin((config = {}) => {
355
417
  type: "string"
356
418
  }],
357
419
  components: {
358
- input: (props) => <IconifyInput {...props} config={config} />,
420
+ input: (props) => /* @__PURE__ */ jsx(IconifyInput, {
421
+ ...props,
422
+ config
423
+ }),
359
424
  preview: IconifyPreview,
360
425
  field: (props) => props.renderDefault({
361
426
  ...props,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sanity-plugin-iconify",
3
- "version": "4.0.0",
3
+ "version": "4.0.1",
4
4
  "description": "Icon picker based on Iconify",
5
5
  "keywords": [
6
6
  "sanity",
@@ -42,16 +42,20 @@
42
42
  "v2-incompatible.js"
43
43
  ],
44
44
  "scripts": {
45
- "build": "run-s build:verify build:bundle",
45
+ "build": "run-s build:verify build:bundle build:check",
46
46
  "build:bundle": "tsdown",
47
+ "build:check": "node scripts/check-dist.mjs",
47
48
  "build:verify": "plugin-kit verify-package --silent",
48
49
  "dev": "vite dev --config dev/vite.config.ts",
50
+ "dev:dist": "vite build --config dev/vite.config.ts && vite preview --config dev/vite.config.ts",
49
51
  "format": "prettier --write --cache --ignore-unknown .",
50
52
  "generate-types": "node src/lib/generate-types",
51
53
  "lint": "eslint .",
54
+ "prepublishOnly": "node scripts/check-dist.mjs",
52
55
  "release": "release-it",
53
56
  "test": "vitest run",
54
57
  "test:e2e": "playwright test",
58
+ "test:e2e:dist": "PLUGIN_TARGET=dist playwright test",
55
59
  "test:e2e:setup": "tsx playwright/auth-setup.ts",
56
60
  "test:e2e:ui": "playwright test --ui",
57
61
  "test:ui": "vitest --ui",