sanity-plugin-iconify 3.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 (13) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +401 -296
  3. package/dist/index.d.cts +89 -363
  4. package/dist/index.d.mts +89 -0
  5. package/dist/index.mjs +434 -0
  6. package/package.json +75 -49
  7. package/src/combobox/search-input.tsx +12 -2
  8. package/src/lib/api.ts +1 -0
  9. package/src/lib/icon-types.gen.ts +1 -1
  10. package/dist/index.cjs.map +0 -1
  11. package/dist/index.d.ts +0 -363
  12. package/dist/index.js +0 -362
  13. package/dist/index.js.map +0 -1
package/dist/index.cjs CHANGED
@@ -1,71 +1,119 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: !0 });
3
- var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), ui = require("@sanity/ui"), theme$1 = require("@sanity/ui/theme"), react = require("react"), downshift = require("downshift"), tsPattern = require("ts-pattern"), reactQuery = require("@tanstack/react-query"), useDebounce = require("use-debounce"), styled = require("styled-components"), react$1 = require("@iconify/react"), icons = require("@sanity/icons"), utils = require("@iconify/utils"), changeCase = require("change-case");
4
- function _interopDefaultCompat(e) {
5
- return e && typeof e == "object" && "default" in e ? e : { default: e };
6
- }
7
- var styled__default = /* @__PURE__ */ _interopDefaultCompat(styled);
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ //#region \0rolldown/runtime.js
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
11
+ key = keys[i];
12
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
13
+ get: ((k) => from[k]).bind(null, key),
14
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
+ });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
20
+ value: mod,
21
+ enumerable: true
22
+ }) : target, mod));
23
+ //#endregion
24
+ let sanity = require("sanity");
25
+ let _sanity_ui = require("@sanity/ui");
26
+ let _sanity_ui_theme = require("@sanity/ui/theme");
27
+ let react = require("react");
28
+ let downshift = require("downshift");
29
+ let ts_pattern = require("ts-pattern");
30
+ let _tanstack_react_query = require("@tanstack/react-query");
31
+ let use_debounce = require("use-debounce");
32
+ let styled_components = require("styled-components");
33
+ styled_components = __toESM(styled_components, 1);
34
+ let react_jsx_runtime = require("react/jsx-runtime");
35
+ let _iconify_react = require("@iconify/react");
36
+ let _sanity_icons = require("@sanity/icons");
37
+ let _iconify_utils = require("@iconify/utils");
38
+ let change_case = require("change-case");
39
+ //#region src/lib/api.ts
8
40
  const BASE_API_URL = "https://api.iconify.design";
9
41
  function fetchJson({ url, signal }) {
10
- return fetch(url, { signal }).then((response) => {
11
- if (!response.ok)
12
- throw new Error(`Network error: status ${response.status}`);
13
- return response.json();
14
- }).then(
15
- (result) => result,
16
- (error) => {
17
- throw error instanceof Error ? error : (console.error(`Unknown error: ${error}`), new Error("Something went wrong"));
18
- }
19
- );
42
+ return fetch(url, { signal }).then((response) => {
43
+ if (!response.ok) throw new Error(`Network error: status ${response.status}`);
44
+ return response.json();
45
+ }).then((result) => result, (error) => {
46
+ if (error instanceof Error) throw error;
47
+ else {
48
+ console.error(`Unknown error: ${error}`);
49
+ throw new Error("Something went wrong");
50
+ }
51
+ });
20
52
  }
21
53
  function useSearch({ collections }) {
22
- const queryClient2 = reactQuery.useQueryClient(), [term, setTerm] = react.useState(""), [debouncedTerm, setDebouncedTerm] = useDebounce.useDebounce(term, 500), updateTerm = react.useCallback(
23
- (newTerm, updateImmediately = !1) => {
24
- setTerm(newTerm), updateImmediately && setDebouncedTerm(newTerm);
25
- },
26
- [setDebouncedTerm]
27
- ), { isLoading, isError, error, data, isPlaceholderData } = reactQuery.useQuery({
28
- queryKey: ["search", collections, debouncedTerm],
29
- queryFn: async ({ signal }) => {
30
- const url = new URL("/search", BASE_API_URL);
31
- url.searchParams.append("query", debouncedTerm), url.searchParams.append("limit", "60"), collections && url.searchParams.append("prefixes", collections.join(","));
32
- const result = debouncedTerm ? await fetchJson({ url, signal }) : null;
33
- return result && Object.entries(result.collections).forEach(([prefix, info]) => {
34
- queryClient2.setQueryData(["iconSetInfo", prefix], info);
35
- }), result?.icons ?? [];
36
- },
37
- enabled: debouncedTerm.length > 0,
38
- placeholderData: reactQuery.keepPreviousData,
39
- staleTime: 300 * 1e3
40
- // 5 minutes
41
- });
42
- return {
43
- term,
44
- setTerm: updateTerm,
45
- debouncedTerm,
46
- isLoading,
47
- isError,
48
- error,
49
- data,
50
- isPreviousData: isPlaceholderData
51
- };
54
+ const queryClient = (0, _tanstack_react_query.useQueryClient)();
55
+ const [term, setTerm] = (0, react.useState)("");
56
+ const [debouncedTerm, setDebouncedTerm] = (0, use_debounce.useDebounce)(term, 500);
57
+ const updateTerm = (0, react.useCallback)((newTerm, updateImmediately = false) => {
58
+ setTerm(newTerm);
59
+ if (updateImmediately) setDebouncedTerm(newTerm);
60
+ }, [setDebouncedTerm]);
61
+ const { isLoading, isError, error, data, isPlaceholderData } = (0, _tanstack_react_query.useQuery)({
62
+ queryKey: [
63
+ "search",
64
+ collections,
65
+ debouncedTerm
66
+ ],
67
+ queryFn: async ({ signal }) => {
68
+ const url = new URL(`/search`, BASE_API_URL);
69
+ url.searchParams.append("query", debouncedTerm);
70
+ url.searchParams.append("limit", "60");
71
+ if (collections) url.searchParams.append("prefixes", collections.join(","));
72
+ const result = debouncedTerm ? await fetchJson({
73
+ url,
74
+ signal
75
+ }) : null;
76
+ if (result) Object.entries(result.collections).forEach(([prefix, info]) => {
77
+ queryClient.setQueryData(["iconSetInfo", prefix], info);
78
+ });
79
+ return result?.icons ?? [];
80
+ },
81
+ enabled: debouncedTerm.length > 0,
82
+ placeholderData: _tanstack_react_query.keepPreviousData,
83
+ staleTime: 300 * 1e3
84
+ });
85
+ return {
86
+ term,
87
+ setTerm: updateTerm,
88
+ debouncedTerm,
89
+ isLoading,
90
+ isError,
91
+ error,
92
+ data,
93
+ isPreviousData: isPlaceholderData
94
+ };
52
95
  }
53
96
  function useIconSetInfo({ prefix }) {
54
- return reactQuery.useQuery({
55
- queryKey: ["iconSetInfo", prefix],
56
- queryFn: async ({ signal }) => {
57
- if (!prefix) return null;
58
- const url = new URL("/collection", BASE_API_URL);
59
- return url.searchParams.append("prefix", prefix), url.searchParams.append("info", "true"), (await fetchJson({ url, signal }))?.info ?? null;
60
- },
61
- staleTime: 1 / 0
62
- });
97
+ return (0, _tanstack_react_query.useQuery)({
98
+ queryKey: ["iconSetInfo", prefix],
99
+ queryFn: async ({ signal }) => {
100
+ if (!prefix) return null;
101
+ const url = new URL("/collection", BASE_API_URL);
102
+ url.searchParams.append("prefix", prefix);
103
+ url.searchParams.append("info", "true");
104
+ return (await fetchJson({
105
+ url,
106
+ signal
107
+ }))?.info ?? null;
108
+ },
109
+ staleTime: Infinity
110
+ });
63
111
  }
64
- styled__default.default(ui.Grid)`
112
+ (0, styled_components.default)(_sanity_ui.Grid)`
65
113
  grid-template-columns: 1fr min-content;
66
114
  position: relative;
67
115
  `;
68
- const OptionsWrapper = styled__default.default(ui.Box)`
116
+ const OptionsWrapper = (0, styled_components.default)(_sanity_ui.Box)`
69
117
  box-sizing: border-box;
70
118
  padding: 0.5rem;
71
119
 
@@ -98,256 +146,313 @@ const OptionsWrapper = styled__default.default(ui.Box)`
98
146
  }
99
147
  `;
100
148
  function MessageWrapper({ children }) {
101
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", muted: !0, children }) });
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
+ });
102
157
  }
103
- const SearchInput = react.memo(
104
- react.forwardRef((props, ref) => {
105
- const { selectedIcon, suffix, ...rest } = props;
106
- return /* @__PURE__ */ jsxRuntime.jsx(
107
- ui.TextInput,
108
- {
109
- ...rest,
110
- ref,
111
- inputMode: "search",
112
- icon: selectedIcon ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: selectedIcon }) : null,
113
- placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
114
- suffix
115
- }
116
- );
117
- })
118
- );
158
+ //#endregion
159
+ //#region src/combobox/search-input.tsx
160
+ const SearchInput = (0, react.memo)((0, react.forwardRef)((props, ref) => {
161
+ const { selectedIcon, suffix, onChange, ...rest } = props;
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
+ });
171
+ }));
119
172
  SearchInput.displayName = "SearchInput";
120
- const SearchResults = react.memo(
121
- react.forwardRef((props, ref) => {
122
- const { state, data, getItemProps, highlightedIndex, ...rest } = props;
123
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
124
- (() => {
125
- switch (state) {
126
- case "initial":
127
- return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "Search for icons" });
128
- case "loading":
129
- return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "Searching..." });
130
- case "error":
131
- return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "Something went wrong..." });
132
- case "empty":
133
- return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "No icons found" });
134
- }
135
- })(),
136
- /* @__PURE__ */ jsxRuntime.jsx(
137
- "ul",
138
- {
139
- ...rest,
140
- ref,
141
- "data-testid": "iconify-results",
142
- style: { opacity: state === "stale" ? 0.5 : 1 },
143
- children: (state === "data" || state === "stale") && data?.map((icon, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...getItemProps({ item: icon, index }), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { padding: 3, mode: "bleed", selected: index === highlightedIndex, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon, width: "100%", height: "100%" }) }) }, icon))
144
- }
145
- )
146
- ] });
147
- })
148
- );
173
+ //#endregion
174
+ //#region src/combobox/search-result.tsx
175
+ const SearchResults = (0, react.memo)((0, react.forwardRef)((props, ref) => {
176
+ const { state, data, getItemProps, highlightedIndex, ...rest } = props;
177
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(() => {
178
+ switch (state) {
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" });
183
+ }
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
+ })] });
206
+ }));
207
+ //#endregion
208
+ //#region src/combobox/unset-button.tsx
149
209
  function UnsetButton(props) {
150
- const { onUnset } = props;
151
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { border: !0, borderLeft: !1, padding: 1, display: "flex", radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
152
- ui.Button,
153
- {
154
- "data-testid": "iconify-unset",
155
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.TrashIcon, {}),
156
- onClick: onUnset,
157
- mode: "bleed",
158
- fontSize: 1,
159
- padding: 2
160
- }
161
- ) });
210
+ const { onUnset } = props;
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
+ });
162
226
  }
163
- const IconifyCombobox = react.memo(function(props) {
164
- const {
165
- selectedIcon,
166
- onSelect: pushSelection,
167
- collections,
168
- studioElementProps,
169
- fieldFocused
170
- } = props, id = react.useId(), toast = ui.useToast(), inputRef = react.useRef(null), composedInputRef = react.useCallback(
171
- (node) => {
172
- inputRef.current = node, studioElementProps?.ref && (studioElementProps.ref.current = node);
173
- },
174
- [studioElementProps?.ref]
175
- ), suppressNextBlur = react.useRef(!1), handleFocus = react.useCallback(
176
- (event) => {
177
- suppressNextBlur.current = !0, setTimeout(() => {
178
- suppressNextBlur.current = !1;
179
- }, 0), studioElementProps?.onFocus?.(event);
180
- },
181
- [studioElementProps]
182
- ), handleBlur = react.useCallback(
183
- (event) => {
184
- if (suppressNextBlur.current) {
185
- suppressNextBlur.current = !1;
186
- return;
187
- }
188
- studioElementProps?.onBlur?.(event);
189
- },
190
- [studioElementProps]
191
- ), { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({
192
- collections
193
- }), {
194
- isOpen,
195
- getMenuProps,
196
- getInputProps,
197
- highlightedIndex,
198
- getItemProps,
199
- selectItem,
200
- setInputValue,
201
- closeMenu
202
- } = downshift.useCombobox({
203
- items: data ?? [],
204
- inputValue: term,
205
- onInputValueChange({ inputValue, selectedItem }) {
206
- inputValue !== selectedItem && setTerm(inputValue);
207
- },
208
- onSelectedItemChange({ selectedItem }) {
209
- selectedItem && (pushSelection(selectedItem), setTerm("", !0), setInputValue(""));
210
- }
211
- });
212
- react.useEffect(() => {
213
- fieldFocused || closeMenu();
214
- }, [fieldFocused, closeMenu]);
215
- const handleUnset = react.useCallback(() => {
216
- pushSelection(""), setTerm("", !0), selectItem("");
217
- }, [pushSelection, setTerm, selectItem]);
218
- react.useEffect(() => {
219
- isError && (console.error("Iconify input error:", error), toast.push({
220
- id,
221
- status: "error",
222
- title: "Iconify input error",
223
- description: error?.message
224
- }));
225
- }, [error, id, isError, toast]);
226
- const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
227
- ref: composedInputRef,
228
- id: studioElementProps?.id,
229
- "aria-describedby": studioElementProps?.["aria-describedby"],
230
- onFocus: handleFocus
231
- });
232
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
233
- /* @__PURE__ */ jsxRuntime.jsx(
234
- SearchInput,
235
- {
236
- ...inputProps,
237
- onBlur: handleBlur,
238
- selectedIcon,
239
- suffix: selectedIcon ? /* @__PURE__ */ jsxRuntime.jsx(UnsetButton, { onUnset: handleUnset }) : null
240
- }
241
- ),
242
- /* @__PURE__ */ jsxRuntime.jsx(
243
- ui.Popover,
244
- {
245
- open: !0,
246
- style: { display: isOpen ? "block" : "none" },
247
- placement: "bottom",
248
- arrow: !1,
249
- matchReferenceWidth: !0,
250
- constrainSize: !0,
251
- referenceElement: inputRef.current,
252
- content: /* @__PURE__ */ jsxRuntime.jsx(OptionsWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
253
- SearchResults,
254
- {
255
- ...getMenuProps(),
256
- state: tsPattern.match(!0).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
257
- data,
258
- getItemProps,
259
- highlightedIndex
260
- }
261
- ) })
262
- }
263
- )
264
- ] });
265
- }), queryClient = new reactQuery.QueryClient();
227
+ //#endregion
228
+ //#region src/combobox/iconify-combobox.tsx
229
+ const IconifyCombobox = (0, react.memo)(function IconifyCombobox(props) {
230
+ const { selectedIcon, onSelect: pushSelection, collections, studioElementProps, fieldFocused } = props;
231
+ const id = (0, react.useId)();
232
+ const toast = (0, _sanity_ui.useToast)();
233
+ const inputRef = (0, react.useRef)(null);
234
+ const composedInputRef = (0, react.useCallback)((node) => {
235
+ inputRef.current = node;
236
+ if (studioElementProps?.ref) studioElementProps.ref.current = node;
237
+ }, [studioElementProps?.ref]);
238
+ const suppressNextBlur = (0, react.useRef)(false);
239
+ const handleFocus = (0, react.useCallback)((event) => {
240
+ suppressNextBlur.current = true;
241
+ setTimeout(() => {
242
+ suppressNextBlur.current = false;
243
+ }, 0);
244
+ studioElementProps?.onFocus?.(event);
245
+ }, [studioElementProps]);
246
+ const handleBlur = (0, react.useCallback)((event) => {
247
+ if (suppressNextBlur.current) {
248
+ suppressNextBlur.current = false;
249
+ return;
250
+ }
251
+ studioElementProps?.onBlur?.(event);
252
+ }, [studioElementProps]);
253
+ const { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({ collections });
254
+ const { isOpen, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectItem, setInputValue, closeMenu } = (0, downshift.useCombobox)({
255
+ items: data ?? [],
256
+ inputValue: term,
257
+ onInputValueChange({ inputValue, selectedItem }) {
258
+ if (inputValue !== selectedItem) setTerm(inputValue);
259
+ },
260
+ onSelectedItemChange({ selectedItem }) {
261
+ if (selectedItem) {
262
+ pushSelection(selectedItem);
263
+ setTerm("", true);
264
+ setInputValue("");
265
+ }
266
+ }
267
+ });
268
+ (0, react.useEffect)(() => {
269
+ if (!fieldFocused) closeMenu();
270
+ }, [fieldFocused, closeMenu]);
271
+ const handleUnset = (0, react.useCallback)(() => {
272
+ pushSelection("");
273
+ setTerm("", true);
274
+ selectItem("");
275
+ }, [
276
+ pushSelection,
277
+ setTerm,
278
+ selectItem
279
+ ]);
280
+ (0, react.useEffect)(() => {
281
+ if (isError) {
282
+ console.error("Iconify input error:", error);
283
+ toast.push({
284
+ id,
285
+ status: "error",
286
+ title: "Iconify input error",
287
+ description: error?.message
288
+ });
289
+ }
290
+ }, [
291
+ error,
292
+ id,
293
+ isError,
294
+ toast
295
+ ]);
296
+ const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
297
+ ref: composedInputRef,
298
+ id: studioElementProps?.id,
299
+ "aria-describedby": studioElementProps?.["aria-describedby"],
300
+ onFocus: handleFocus
301
+ });
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
+ })] });
323
+ });
324
+ //#endregion
325
+ //#region src/lib/query-client.tsx
326
+ const queryClient = new _tanstack_react_query.QueryClient();
266
327
  function QueryClientProvider(props) {
267
- return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: props.children });
328
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_query.QueryClientProvider, {
329
+ client: queryClient,
330
+ children: props.children
331
+ });
268
332
  }
333
+ //#endregion
334
+ //#region src/lib/use-pretty-icon-name.ts
269
335
  function usePrettyIconName(props) {
270
- const { name } = props, iconMeta = react.useMemo(
271
- () => props.iconMeta ?? (name ? utils.stringToIcon(name) : null),
272
- [name, props.iconMeta]
273
- ), iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
274
- return react.useMemo(
275
- () => iconMeta ? {
276
- name: changeCase.sentenceCase(iconMeta.name),
277
- collection: iconSetInfo.data?.name ?? iconMeta.prefix
278
- } : null,
279
- [iconMeta, iconSetInfo.data?.name]
280
- );
336
+ const { name } = props;
337
+ const iconMeta = (0, react.useMemo)(() => props.iconMeta ?? (name ? (0, _iconify_utils.stringToIcon)(name) : null), [name, props.iconMeta]);
338
+ const iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
339
+ return (0, react.useMemo)(() => iconMeta ? {
340
+ name: (0, change_case.sentenceCase)(iconMeta.name),
341
+ collection: iconSetInfo.data?.name ?? iconMeta.prefix
342
+ } : null, [iconMeta, iconSetInfo.data?.name]);
281
343
  }
282
- const theme = theme$1.buildTheme(), IconifyInput = react.memo(function(props) {
283
- const { config, value, onChange: pushChange, schemaType, elementProps, focused } = 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 = react.useCallback(
284
- (icon) => {
285
- pushChange(icon === "" ? sanity.unset() : sanity.set(icon, ["name"]));
286
- },
287
- [pushChange]
288
- );
289
- return /* @__PURE__ */ jsxRuntime.jsx(QueryClientProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
290
- /* @__PURE__ */ jsxRuntime.jsx(
291
- IconifyCombobox,
292
- {
293
- selectedIcon,
294
- onSelect: handleSelect,
295
- collections,
296
- studioElementProps: elementProps,
297
- fieldFocused: focused
298
- }
299
- ),
300
- showName && selectedIcon ? /* @__PURE__ */ jsxRuntime.jsx(IconifyNameDisplay, { name: selectedIcon }) : null
301
- ] }) }) });
344
+ //#endregion
345
+ //#region src/iconify-input.tsx
346
+ const theme = (0, _sanity_ui_theme.buildTheme)();
347
+ const IconifyInput = (0, react.memo)(function IconifyInput(props) {
348
+ const { config, value, onChange: pushChange, schemaType, elementProps, focused } = props;
349
+ const selectedIcon = value?.name ?? null;
350
+ const options = schemaType.options;
351
+ const collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null;
352
+ const showName = options?.showName ?? config?.showName ?? false;
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
+ }) });
302
368
  });
303
369
  function IconifyNameDisplay(props) {
304
- const { name } = props, prettyName = usePrettyIconName({ name });
305
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
306
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "Selected:" }),
307
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: prettyName?.name ?? name }),
308
- prettyName?.collection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, style: { fontStyle: "italic" }, children: [
309
- "by ",
310
- prettyName?.collection
311
- ] })
312
- ] });
370
+ const { name } = props;
371
+ const prettyName = usePrettyIconName({ name });
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
+ });
313
393
  }
314
- const IconifyPreview = react.memo(function(props) {
315
- const { title } = props, iconName = typeof props.title == "string" ? utils.stringToIcon(props.title) : null;
316
- return typeof title == "string" && iconName ? /* @__PURE__ */ jsxRuntime.jsx(QueryClientProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(IconifyPreviewInner, { ...props, iconName: title, iconMeta: iconName }) }) : props.renderDefault(props);
394
+ //#endregion
395
+ //#region src/iconify-preview.tsx
396
+ const IconifyPreview = (0, react.memo)(function IconifyPreview(props) {
397
+ const { title } = props;
398
+ const iconName = typeof props.title === "string" ? (0, _iconify_utils.stringToIcon)(props.title) : null;
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
+ }) });
404
+ return props.renderDefault(props);
317
405
  });
318
406
  function IconifyPreviewInner(props) {
319
- const { iconMeta, iconName, ...previewProps } = props, prettyName = usePrettyIconName({ iconMeta });
320
- return props.renderDefault({
321
- ...previewProps,
322
- media: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: iconName }),
323
- title: prettyName?.name ?? iconName,
324
- subtitle: prettyName?.collection
325
- });
407
+ const { iconMeta, iconName, ...previewProps } = props;
408
+ const prettyName = usePrettyIconName({ iconMeta });
409
+ return props.renderDefault({
410
+ ...previewProps,
411
+ media: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, { icon: iconName }),
412
+ title: prettyName?.name ?? iconName,
413
+ subtitle: prettyName?.collection
414
+ });
326
415
  }
327
- const iconify = sanity.definePlugin((config = {}) => ({
328
- name: "sanity-plugin-iconify",
329
- schema: {
330
- types: [
331
- {
332
- name: "icon",
333
- title: "Icon",
334
- type: "object",
335
- fields: [
336
- {
337
- name: "name",
338
- title: "Name",
339
- type: "string"
340
- }
341
- ],
342
- components: {
343
- input: (props) => /* @__PURE__ */ jsxRuntime.jsx(IconifyInput, { ...props, config }),
344
- preview: IconifyPreview,
345
- // This makes sure the input component is not indented
346
- field: (props) => props.renderDefault({ ...props, level: 0 })
347
- }
348
- }
349
- ]
350
- }
351
- }));
416
+ //#endregion
417
+ //#region src/iconify-plugin.tsx
418
+ /**
419
+ * Usage in `sanity.config.ts` (or .js)
420
+ *
421
+ * ```ts
422
+ * import { defineConfig } from 'sanity'
423
+ * import { iconify } from 'sanity-plugin-iconify'
424
+ *
425
+ * export default defineConfig({
426
+ * // ...
427
+ * plugins: [iconify()],
428
+ * })
429
+ * ```
430
+ */
431
+ const iconify = (0, sanity.definePlugin)((config = {}) => {
432
+ return {
433
+ name: "sanity-plugin-iconify",
434
+ schema: { types: [{
435
+ name: "icon",
436
+ title: "Icon",
437
+ type: "object",
438
+ fields: [{
439
+ name: "name",
440
+ title: "Name",
441
+ type: "string"
442
+ }],
443
+ components: {
444
+ input: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconifyInput, {
445
+ ...props,
446
+ config
447
+ }),
448
+ preview: IconifyPreview,
449
+ field: (props) => props.renderDefault({
450
+ ...props,
451
+ level: 0
452
+ })
453
+ }
454
+ }] }
455
+ };
456
+ });
457
+ //#endregion
352
458
  exports.iconify = iconify;
353
- //# sourceMappingURL=index.cjs.map