@clerk/react 6.9.0 → 6.9.1-canary.v20260610190754

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 (75) hide show
  1. package/dist/ClerkProvider-9lxHp9j5.cjs +1623 -0
  2. package/dist/ClerkProvider-9lxHp9j5.cjs.map +1 -0
  3. package/dist/ClerkProvider-LQpPtmNL.mjs +1533 -0
  4. package/dist/ClerkProvider-LQpPtmNL.mjs.map +1 -0
  5. package/dist/errors.cjs +69 -0
  6. package/dist/errors.d.cts +2 -0
  7. package/dist/errors.d.mts +2 -1
  8. package/dist/errors.mjs +2 -29
  9. package/dist/experimental.cjs +270 -0
  10. package/dist/experimental.cjs.map +1 -0
  11. package/dist/{experimental.d.ts → experimental.d.cts} +18 -18
  12. package/dist/experimental.d.mts +18 -18
  13. package/dist/experimental.mjs +201 -165
  14. package/dist/experimental.mjs.map +1 -1
  15. package/dist/hooks-BiY5Zgpp.mjs +1369 -0
  16. package/dist/hooks-BiY5Zgpp.mjs.map +1 -0
  17. package/dist/hooks-CBghYU21.cjs +1606 -0
  18. package/dist/hooks-CBghYU21.cjs.map +1 -0
  19. package/dist/index.cjs +447 -0
  20. package/dist/index.cjs.map +1 -0
  21. package/dist/index.d.cts +345 -0
  22. package/dist/index.d.mts +183 -157
  23. package/dist/index.mjs +285 -380
  24. package/dist/index.mjs.map +1 -1
  25. package/dist/internal.cjs +107 -0
  26. package/dist/internal.cjs.map +1 -0
  27. package/dist/internal.d.cts +51 -0
  28. package/dist/internal.d.mts +24 -26
  29. package/dist/internal.mjs +39 -73
  30. package/dist/internal.mjs.map +1 -1
  31. package/dist/legacy.cjs +134 -0
  32. package/dist/legacy.cjs.map +1 -0
  33. package/dist/{legacy.d.ts → legacy.d.cts} +6 -3
  34. package/dist/legacy.d.mts +6 -3
  35. package/dist/legacy.mjs +126 -42
  36. package/dist/legacy.mjs.map +1 -1
  37. package/dist/types-Bwenmt7y.d.cts +10951 -0
  38. package/dist/types-CiIhevkA.d.mts +10951 -0
  39. package/dist/types.cjs +0 -0
  40. package/dist/types.d.cts +3 -0
  41. package/dist/types.d.mts +3 -109
  42. package/dist/types.mjs +1 -2
  43. package/dist/useAssertWrappedByClerkProvider-Cm0djUcB.cjs +52 -0
  44. package/dist/useAssertWrappedByClerkProvider-Cm0djUcB.cjs.map +1 -0
  45. package/dist/useAssertWrappedByClerkProvider-GaNwZpWo.mjs +29 -0
  46. package/dist/useAssertWrappedByClerkProvider-GaNwZpWo.mjs.map +1 -0
  47. package/dist/{useAuth-Dlg_G1_7.d.mts → useAuth-BK5Y4htK.d.mts} +58 -39
  48. package/dist/{useAuth-Cv6iRjL9.d.ts → useAuth-BMxaWktj.d.cts} +58 -39
  49. package/package.json +18 -18
  50. package/dist/chunk-E5QRIS4Z.mjs +0 -20
  51. package/dist/chunk-E5QRIS4Z.mjs.map +0 -1
  52. package/dist/chunk-FQVXBXXF.mjs +0 -1487
  53. package/dist/chunk-FQVXBXXF.mjs.map +0 -1
  54. package/dist/chunk-GVGS7DUS.mjs +0 -2097
  55. package/dist/chunk-GVGS7DUS.mjs.map +0 -1
  56. package/dist/chunk-RQWALB2R.mjs +0 -26
  57. package/dist/chunk-RQWALB2R.mjs.map +0 -1
  58. package/dist/errors.d.ts +0 -1
  59. package/dist/errors.js +0 -51
  60. package/dist/errors.js.map +0 -1
  61. package/dist/errors.mjs.map +0 -1
  62. package/dist/experimental.js +0 -1505
  63. package/dist/experimental.js.map +0 -1
  64. package/dist/index.d.ts +0 -319
  65. package/dist/index.js +0 -3919
  66. package/dist/index.js.map +0 -1
  67. package/dist/internal.d.ts +0 -53
  68. package/dist/internal.js +0 -3339
  69. package/dist/internal.js.map +0 -1
  70. package/dist/legacy.js +0 -90
  71. package/dist/legacy.js.map +0 -1
  72. package/dist/types.d.ts +0 -109
  73. package/dist/types.js +0 -19
  74. package/dist/types.js.map +0 -1
  75. package/dist/types.mjs.map +0 -1
@@ -1,1487 +0,0 @@
1
- import {
2
- errorThrower,
3
- useAssertWrappedByClerkProvider,
4
- useIsomorphicClerkContext
5
- } from "./chunk-RQWALB2R.mjs";
6
-
7
- // src/components/uiComponents.tsx
8
- import { logErrorInDevMode as logErrorInDevMode3 } from "@clerk/shared/utils";
9
- import React8, { createContext, createElement, useContext } from "react";
10
-
11
- // src/errors/messages.ts
12
- var multipleClerkProvidersError = "You've added multiple <ClerkProvider> components in your React component tree. Wrap your components in a single <ClerkProvider>.";
13
- var multipleChildrenInButtonComponent = (name) => `You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
14
- var invalidStateError = "Invalid state. Feel free to submit a bug or reach out to support here: https://clerk.com/contact/support";
15
- var unsupportedNonBrowserDomainOrProxyUrlFunction = "Unsupported usage of isSatellite, domain or proxyUrl. The usage of isSatellite, domain or proxyUrl as function is not supported in non-browser environments.";
16
- var userProfilePageRenderedError = "<UserProfile.Page /> component needs to be a direct child of `<UserProfile />` or `<UserButton />`.";
17
- var userProfileLinkRenderedError = "<UserProfile.Link /> component needs to be a direct child of `<UserProfile />` or `<UserButton />`.";
18
- var organizationProfilePageRenderedError = "<OrganizationProfile.Page /> component needs to be a direct child of `<OrganizationProfile />` or `<OrganizationSwitcher />`.";
19
- var organizationProfileLinkRenderedError = "<OrganizationProfile.Link /> component needs to be a direct child of `<OrganizationProfile />` or `<OrganizationSwitcher />`.";
20
- var customPagesIgnoredComponent = (componentName) => `<${componentName} /> can only accept <${componentName}.Page /> and <${componentName}.Link /> as its children. Any other provided component will be ignored. Additionally, please ensure that the component is rendered in a client component.`;
21
- var customPageWrongProps = (componentName) => `Missing props. <${componentName}.Page /> component requires the following props: url, label, labelIcon, alongside with children to be rendered inside the page.`;
22
- var customLinkWrongProps = (componentName) => `Missing props. <${componentName}.Link /> component requires the following props: url, label and labelIcon.`;
23
- var noPathProvidedError = (componentName) => `The <${componentName}/> component uses path-based routing by default unless a different routing strategy is provided using the \`routing\` prop. When path-based routing is used, you need to provide the path where the component is mounted on by using the \`path\` prop. Example: <${componentName} path={'/my-path'} />`;
24
- var incompatibleRoutingWithPathProvidedError = (componentName) => `The \`path\` prop will only be respected when the Clerk component uses path-based routing. To resolve this error, pass \`routing='path'\` to the <${componentName}/> component, or drop the \`path\` prop to switch to hash-based routing. For more details please refer to our docs: https://clerk.com/docs`;
25
- var userButtonIgnoredComponent = `<UserButton /> can only accept <UserButton.UserProfilePage />, <UserButton.UserProfileLink /> and <UserButton.MenuItems /> as its children. Any other provided component will be ignored. Additionally, please ensure that the component is rendered in a client component.`;
26
- var customMenuItemsIgnoredComponent = "<UserButton.MenuItems /> component can only accept <UserButton.Action /> and <UserButton.Link /> as its children. Any other provided component will be ignored. Additionally, please ensure that the component is rendered in a client component.";
27
- var userButtonMenuItemsRenderedError = "<UserButton.MenuItems /> component needs to be a direct child of `<UserButton />`.";
28
- var userButtonMenuActionRenderedError = "<UserButton.Action /> component needs to be a direct child of `<UserButton.MenuItems />`.";
29
- var userButtonMenuLinkRenderedError = "<UserButton.Link /> component needs to be a direct child of `<UserButton.MenuItems />`.";
30
- var userButtonMenuItemLinkWrongProps = "Missing props. <UserButton.Link /> component requires the following props: href, label and labelIcon.";
31
- var userButtonMenuItemsActionWrongsProps = "Missing props. <UserButton.Action /> component requires the following props: label.";
32
-
33
- // src/utils/childrenUtils.tsx
34
- import React from "react";
35
- var assertSingleChild = (children) => (name) => {
36
- try {
37
- return React.Children.only(children);
38
- } catch {
39
- const childArray = React.Children.toArray(children);
40
- if (childArray.length === 1 && React.isValidElement(childArray[0])) {
41
- return childArray[0];
42
- }
43
- return errorThrower.throw(multipleChildrenInButtonComponent(name));
44
- }
45
- };
46
- var normalizeWithDefaultValue = (children, defaultText) => {
47
- if (!children) {
48
- children = defaultText;
49
- }
50
- if (typeof children === "string") {
51
- children = /* @__PURE__ */ React.createElement("button", null, children);
52
- }
53
- return children;
54
- };
55
- var safeExecute = (cb) => (...args) => {
56
- if (cb && typeof cb === "function") {
57
- return cb(...args);
58
- }
59
- };
60
-
61
- // src/utils/envVariables.ts
62
- import { getEnvVariable } from "@clerk/shared/getEnvVariable";
63
- var getEnvVar = (name) => {
64
- return getEnvVariable(`VITE_${name}`) || getEnvVariable(name);
65
- };
66
- var withEnvFallback = (value, envVarName) => {
67
- if (value !== void 0) {
68
- return value;
69
- }
70
- const envValue = getEnvVar(envVarName);
71
- return envValue || void 0;
72
- };
73
- var mergeWithEnv = (options) => {
74
- const publishableKey = withEnvFallback(options.publishableKey, "CLERK_PUBLISHABLE_KEY");
75
- return {
76
- ...options,
77
- ...publishableKey !== void 0 && { publishableKey }
78
- };
79
- };
80
-
81
- // src/utils/isConstructor.ts
82
- function isConstructor(f) {
83
- return typeof f === "function";
84
- }
85
-
86
- // src/utils/useMaxAllowedInstancesGuard.tsx
87
- import React2 from "react";
88
- var counts = /* @__PURE__ */ new Map();
89
- function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
90
- React2.useEffect(() => {
91
- const count = counts.get(name) || 0;
92
- if (count == maxCount) {
93
- return errorThrower.throw(error);
94
- }
95
- counts.set(name, count + 1);
96
- return () => {
97
- counts.set(name, (counts.get(name) || 1) - 1);
98
- };
99
- }, []);
100
- }
101
- function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
102
- const displayName = WrappedComponent.displayName || WrappedComponent.name || name || "Component";
103
- const Hoc = (props) => {
104
- useMaxAllowedInstancesGuard(name, error);
105
- return /* @__PURE__ */ React2.createElement(WrappedComponent, { ...props });
106
- };
107
- Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
108
- return Hoc;
109
- }
110
-
111
- // src/utils/useCustomElementPortal.tsx
112
- import { useRef, useState } from "react";
113
- import { createPortal } from "react-dom";
114
- var useCustomElementPortal = (elements) => {
115
- const [nodeMap, setNodeMap] = useState(/* @__PURE__ */ new Map());
116
- const nodeMapRef = useRef(nodeMap);
117
- const elementsRef = useRef(/* @__PURE__ */ new Map());
118
- const portalsRef = useRef(/* @__PURE__ */ new Map());
119
- nodeMapRef.current = nodeMap;
120
- elementsRef.current = new Map(elements.map((el) => [el.id, el.component]));
121
- const elementIds = new Set(elements.map((el) => el.id));
122
- portalsRef.current.forEach((_, id) => {
123
- if (!elementIds.has(id)) {
124
- portalsRef.current.delete(id);
125
- }
126
- });
127
- return elements.map((el) => {
128
- const id = el.id;
129
- const existingPortal = portalsRef.current.get(id);
130
- if (existingPortal) {
131
- return existingPortal;
132
- }
133
- const portal = () => {
134
- const node = nodeMapRef.current.get(id);
135
- const component = elementsRef.current.get(id);
136
- return node ? createPortal(component, node) : null;
137
- };
138
- const customElementPortal = {
139
- id: el.id,
140
- mount: (node) => setNodeMap((prev) => new Map(prev).set(id, node)),
141
- unmount: () => setNodeMap((prev) => {
142
- const newMap = new Map(prev);
143
- newMap.set(id, null);
144
- return newMap;
145
- }),
146
- portal
147
- };
148
- portalsRef.current.set(id, customElementPortal);
149
- return customElementPortal;
150
- });
151
- };
152
-
153
- // src/utils/useCustomPages.tsx
154
- import { logErrorInDevMode } from "@clerk/shared/utils";
155
- import React4 from "react";
156
-
157
- // src/utils/componentValidation.ts
158
- import React3 from "react";
159
- var isThatComponent = (v, component) => {
160
- return !!v && React3.isValidElement(v) && (v == null ? void 0 : v.type) === component;
161
- };
162
-
163
- // src/utils/useCustomPages.tsx
164
- var useUserProfileCustomPages = (children, options) => {
165
- const reorderItemsLabels = ["account", "security", "billing", "apiKeys"];
166
- return useCustomPages(
167
- {
168
- children,
169
- reorderItemsLabels,
170
- LinkComponent: UserProfileLink,
171
- PageComponent: UserProfilePage,
172
- MenuItemsComponent: MenuItems,
173
- componentName: "UserProfile"
174
- },
175
- options
176
- );
177
- };
178
- var useOrganizationProfileCustomPages = (children, options) => {
179
- const reorderItemsLabels = ["general", "members", "billing", "apiKeys"];
180
- return useCustomPages(
181
- {
182
- children,
183
- reorderItemsLabels,
184
- LinkComponent: OrganizationProfileLink,
185
- PageComponent: OrganizationProfilePage,
186
- componentName: "OrganizationProfile"
187
- },
188
- options
189
- );
190
- };
191
- var useSanitizedChildren = (children) => {
192
- const sanitizedChildren = [];
193
- const excludedComponents = [
194
- OrganizationProfileLink,
195
- OrganizationProfilePage,
196
- MenuItems,
197
- UserProfilePage,
198
- UserProfileLink
199
- ];
200
- React4.Children.forEach(children, (child) => {
201
- if (!excludedComponents.some((component) => isThatComponent(child, component))) {
202
- sanitizedChildren.push(child);
203
- }
204
- });
205
- return sanitizedChildren;
206
- };
207
- var useCustomPages = (params, options) => {
208
- const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;
209
- const { allowForAnyChildren = false } = options || {};
210
- const validChildren = [];
211
- const portalIdCounts = /* @__PURE__ */ new Map();
212
- React4.Children.forEach(children, (child) => {
213
- if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) {
214
- if (child && !allowForAnyChildren) {
215
- logErrorInDevMode(customPagesIgnoredComponent(componentName));
216
- }
217
- return;
218
- }
219
- const { props } = child;
220
- const { children: children2, label, url, labelIcon } = props;
221
- const childKey = child.key;
222
- if (isThatComponent(child, PageComponent)) {
223
- if (isReorderItem(props, reorderItemsLabels)) {
224
- validChildren.push({ label });
225
- } else if (isCustomPage(props)) {
226
- validChildren.push({
227
- label,
228
- labelIcon,
229
- children: children2,
230
- url,
231
- portalId: getCustomPagePortalId("page", props, childKey, portalIdCounts)
232
- });
233
- } else {
234
- logErrorInDevMode(customPageWrongProps(componentName));
235
- return;
236
- }
237
- }
238
- if (isThatComponent(child, LinkComponent)) {
239
- if (isExternalLink(props)) {
240
- validChildren.push({
241
- label,
242
- labelIcon,
243
- url,
244
- portalId: getCustomPagePortalId("link", props, childKey, portalIdCounts)
245
- });
246
- } else {
247
- logErrorInDevMode(customLinkWrongProps(componentName));
248
- return;
249
- }
250
- }
251
- });
252
- const customPageContents = [];
253
- const customPageLabelIcons = [];
254
- const customLinkLabelIcons = [];
255
- validChildren.forEach((cp, index) => {
256
- if (isCustomPage(cp)) {
257
- customPageContents.push({ component: cp.children, id: cp.portalId || index });
258
- customPageLabelIcons.push({ component: cp.labelIcon, id: cp.portalId || index });
259
- return;
260
- }
261
- if (isExternalLink(cp)) {
262
- customLinkLabelIcons.push({ component: cp.labelIcon, id: cp.portalId || index });
263
- }
264
- });
265
- const customPageContentsPortals = useCustomElementPortal(customPageContents);
266
- const customPageLabelIconsPortals = useCustomElementPortal(customPageLabelIcons);
267
- const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons);
268
- const customPages = [];
269
- const customPagesPortals = [];
270
- validChildren.forEach((cp, index) => {
271
- if (isReorderItem(cp, reorderItemsLabels)) {
272
- customPages.push({ label: cp.label });
273
- return;
274
- }
275
- if (isCustomPage(cp)) {
276
- const {
277
- portal: contentPortal,
278
- mount,
279
- unmount
280
- } = customPageContentsPortals.find((p) => p.id === (cp.portalId || index));
281
- const {
282
- portal: labelPortal,
283
- mount: mountIcon,
284
- unmount: unmountIcon
285
- } = customPageLabelIconsPortals.find((p) => p.id === (cp.portalId || index));
286
- customPages.push({ label: cp.label, url: cp.url, mount, unmount, mountIcon, unmountIcon });
287
- customPagesPortals.push({ key: `content:${cp.portalId || index}`, portal: contentPortal });
288
- customPagesPortals.push({ key: `label:${cp.portalId || index}`, portal: labelPortal });
289
- return;
290
- }
291
- if (isExternalLink(cp)) {
292
- const {
293
- portal: labelPortal,
294
- mount: mountIcon,
295
- unmount: unmountIcon
296
- } = customLinkLabelIconsPortals.find((p) => p.id === (cp.portalId || index));
297
- customPages.push({ label: cp.label, url: cp.url, mountIcon, unmountIcon });
298
- customPagesPortals.push({ key: `label:${cp.portalId || index}`, portal: labelPortal });
299
- return;
300
- }
301
- });
302
- return { customPages, customPagesPortals };
303
- };
304
- var getCustomPagePortalId = (type, props, key, portalIdCounts) => {
305
- var _a;
306
- if (key != null) {
307
- return `${type}:key:${key}`;
308
- }
309
- const baseId = `${type}:${props.label}:${props.url}`;
310
- const occurrence = (_a = portalIdCounts.get(baseId)) != null ? _a : 0;
311
- portalIdCounts.set(baseId, occurrence + 1);
312
- return `${baseId}:${occurrence}`;
313
- };
314
- var isReorderItem = (childProps, validItems) => {
315
- const { children, label, url, labelIcon } = childProps;
316
- return !children && !url && !labelIcon && validItems.some((v) => v === label);
317
- };
318
- var isCustomPage = (childProps) => {
319
- const { children, label, url, labelIcon } = childProps;
320
- return !!children && !!url && !!labelIcon && !!label;
321
- };
322
- var isExternalLink = (childProps) => {
323
- const { children, label, url, labelIcon } = childProps;
324
- return !children && !!url && !!labelIcon && !!label;
325
- };
326
-
327
- // src/utils/useCustomMenuItems.tsx
328
- import { logErrorInDevMode as logErrorInDevMode2 } from "@clerk/shared/utils";
329
- import React5 from "react";
330
- var useUserButtonCustomMenuItems = (children, options) => {
331
- var _a;
332
- const reorderItemsLabels = ["manageAccount", "signOut"];
333
- return useCustomMenuItems({
334
- children,
335
- reorderItemsLabels,
336
- MenuItemsComponent: MenuItems,
337
- MenuActionComponent: MenuAction,
338
- MenuLinkComponent: MenuLink,
339
- UserProfileLinkComponent: UserProfileLink,
340
- UserProfilePageComponent: UserProfilePage,
341
- allowForAnyChildren: (_a = options == null ? void 0 : options.allowForAnyChildren) != null ? _a : false
342
- });
343
- };
344
- var useCustomMenuItems = ({
345
- children,
346
- MenuItemsComponent,
347
- MenuActionComponent,
348
- MenuLinkComponent,
349
- UserProfileLinkComponent,
350
- UserProfilePageComponent,
351
- reorderItemsLabels,
352
- allowForAnyChildren = false
353
- }) => {
354
- const validChildren = [];
355
- const customMenuItems = [];
356
- const customMenuItemsPortals = [];
357
- const portalIdCounts = /* @__PURE__ */ new Map();
358
- React5.Children.forEach(children, (child) => {
359
- if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) {
360
- if (child && !allowForAnyChildren) {
361
- logErrorInDevMode2(userButtonIgnoredComponent);
362
- }
363
- return;
364
- }
365
- if (isThatComponent(child, UserProfileLinkComponent) || isThatComponent(child, UserProfilePageComponent)) {
366
- return;
367
- }
368
- const { props } = child;
369
- React5.Children.forEach(props.children, (child2) => {
370
- if (!isThatComponent(child2, MenuActionComponent) && !isThatComponent(child2, MenuLinkComponent)) {
371
- if (child2) {
372
- logErrorInDevMode2(customMenuItemsIgnoredComponent);
373
- }
374
- return;
375
- }
376
- const { props: props2 } = child2;
377
- const childKey = child2.key;
378
- const { label, labelIcon, href, onClick, open } = props2;
379
- if (isThatComponent(child2, MenuActionComponent)) {
380
- if (isReorderItem2(props2, reorderItemsLabels)) {
381
- validChildren.push({ label });
382
- } else if (isCustomMenuItem(props2)) {
383
- const baseItem = {
384
- label,
385
- labelIcon
386
- };
387
- if (onClick !== void 0) {
388
- validChildren.push({
389
- ...baseItem,
390
- onClick,
391
- portalId: getCustomMenuItemPortalId("action", props2, childKey, portalIdCounts)
392
- });
393
- } else if (open !== void 0) {
394
- validChildren.push({
395
- ...baseItem,
396
- open: open.startsWith("/") ? open : `/${open}`,
397
- portalId: getCustomMenuItemPortalId("action", props2, childKey, portalIdCounts)
398
- });
399
- } else {
400
- logErrorInDevMode2("Custom menu item must have either onClick or open property");
401
- return;
402
- }
403
- } else {
404
- logErrorInDevMode2(userButtonMenuItemsActionWrongsProps);
405
- return;
406
- }
407
- }
408
- if (isThatComponent(child2, MenuLinkComponent)) {
409
- if (isExternalLink2(props2)) {
410
- validChildren.push({
411
- label,
412
- labelIcon,
413
- href,
414
- portalId: getCustomMenuItemPortalId("link", props2, childKey, portalIdCounts)
415
- });
416
- } else {
417
- logErrorInDevMode2(userButtonMenuItemLinkWrongProps);
418
- return;
419
- }
420
- }
421
- });
422
- });
423
- const customMenuItemLabelIcons = [];
424
- const customLinkLabelIcons = [];
425
- validChildren.forEach((mi, index) => {
426
- if (isCustomMenuItem(mi)) {
427
- customMenuItemLabelIcons.push({ component: mi.labelIcon, id: mi.portalId || index });
428
- }
429
- if (isExternalLink2(mi)) {
430
- customLinkLabelIcons.push({ component: mi.labelIcon, id: mi.portalId || index });
431
- }
432
- });
433
- const customMenuItemLabelIconsPortals = useCustomElementPortal(customMenuItemLabelIcons);
434
- const customLinkLabelIconsPortals = useCustomElementPortal(customLinkLabelIcons);
435
- validChildren.forEach((mi, index) => {
436
- if (isReorderItem2(mi, reorderItemsLabels)) {
437
- customMenuItems.push({
438
- label: mi.label
439
- });
440
- }
441
- if (isCustomMenuItem(mi)) {
442
- const {
443
- portal: iconPortal,
444
- mount: mountIcon,
445
- unmount: unmountIcon
446
- } = customMenuItemLabelIconsPortals.find((p) => p.id === (mi.portalId || index));
447
- const menuItem = {
448
- label: mi.label,
449
- mountIcon,
450
- unmountIcon
451
- };
452
- if ("onClick" in mi) {
453
- menuItem.onClick = mi.onClick;
454
- } else if ("open" in mi) {
455
- menuItem.open = mi.open;
456
- }
457
- customMenuItems.push(menuItem);
458
- customMenuItemsPortals.push({ key: `icon:${mi.portalId || index}`, portal: iconPortal });
459
- }
460
- if (isExternalLink2(mi)) {
461
- const {
462
- portal: iconPortal,
463
- mount: mountIcon,
464
- unmount: unmountIcon
465
- } = customLinkLabelIconsPortals.find((p) => p.id === (mi.portalId || index));
466
- customMenuItems.push({
467
- label: mi.label,
468
- href: mi.href,
469
- mountIcon,
470
- unmountIcon
471
- });
472
- customMenuItemsPortals.push({ key: `icon:${mi.portalId || index}`, portal: iconPortal });
473
- }
474
- });
475
- return { customMenuItems, customMenuItemsPortals };
476
- };
477
- var getCustomMenuItemPortalId = (type, props, key, portalIdCounts) => {
478
- var _a;
479
- if (key != null) {
480
- return `${type}:key:${key}`;
481
- }
482
- const target = props.href || props.open || "";
483
- const baseId = `${type}:${props.label}:${target}`;
484
- const occurrence = (_a = portalIdCounts.get(baseId)) != null ? _a : 0;
485
- portalIdCounts.set(baseId, occurrence + 1);
486
- return `${baseId}:${occurrence}`;
487
- };
488
- var isReorderItem2 = (childProps, validItems) => {
489
- const { children, label, onClick, labelIcon } = childProps;
490
- return !children && !onClick && !labelIcon && validItems.some((v) => v === label);
491
- };
492
- var isCustomMenuItem = (childProps) => {
493
- const { label, labelIcon, onClick, open } = childProps;
494
- return !!labelIcon && !!label && (typeof onClick === "function" || typeof open === "string");
495
- };
496
- var isExternalLink2 = (childProps) => {
497
- const { label, href, labelIcon } = childProps;
498
- return !!href && !!labelIcon && !!label;
499
- };
500
-
501
- // src/utils/useWaitForComponentMount.ts
502
- import { useEffect, useRef as useRef2, useState as useState2 } from "react";
503
- var createAwaitableMutationObserver = (globalOptions) => {
504
- const isReady = globalOptions == null ? void 0 : globalOptions.isReady;
505
- return (options) => new Promise((resolve, reject) => {
506
- const { root = document == null ? void 0 : document.body, selector, timeout = 0 } = options;
507
- if (!root) {
508
- reject(new Error("No root element provided"));
509
- return;
510
- }
511
- let elementToWatch = root;
512
- if (selector) {
513
- elementToWatch = root == null ? void 0 : root.querySelector(selector);
514
- }
515
- if (isReady(elementToWatch, selector)) {
516
- resolve();
517
- return;
518
- }
519
- const observer = new MutationObserver((mutationsList) => {
520
- for (const mutation of mutationsList) {
521
- if (!elementToWatch && selector) {
522
- elementToWatch = root == null ? void 0 : root.querySelector(selector);
523
- }
524
- if (globalOptions.childList && mutation.type === "childList" || globalOptions.attributes && mutation.type === "attributes") {
525
- if (isReady(elementToWatch, selector)) {
526
- observer.disconnect();
527
- resolve();
528
- return;
529
- }
530
- }
531
- }
532
- });
533
- observer.observe(root, globalOptions);
534
- if (timeout > 0) {
535
- setTimeout(() => {
536
- observer.disconnect();
537
- reject(new Error(`Timeout waiting for ${selector}`));
538
- }, timeout);
539
- }
540
- });
541
- };
542
- var waitForElementChildren = createAwaitableMutationObserver({
543
- childList: true,
544
- subtree: true,
545
- isReady: (el, selector) => {
546
- var _a;
547
- return !!(el == null ? void 0 : el.childElementCount) && ((_a = el == null ? void 0 : el.matches) == null ? void 0 : _a.call(el, selector)) && el.childElementCount > 0;
548
- }
549
- });
550
- function useWaitForComponentMount(component, options) {
551
- const watcherRef = useRef2();
552
- const [status, setStatus] = useState2("rendering");
553
- useEffect(() => {
554
- if (!component) {
555
- throw new Error("Clerk: no component name provided, unable to detect mount.");
556
- }
557
- if (typeof window !== "undefined" && !watcherRef.current) {
558
- const defaultSelector = `[data-clerk-component="${component}"]`;
559
- const selector = options == null ? void 0 : options.selector;
560
- watcherRef.current = waitForElementChildren({
561
- selector: selector ? (
562
- // Allows for `[data-clerk-component="xxxx"][data-some-attribute="123"] .my-class`
563
- defaultSelector + selector
564
- ) : defaultSelector
565
- }).then(() => {
566
- setStatus("rendered");
567
- }).catch(() => {
568
- setStatus("error");
569
- });
570
- }
571
- }, [component, options == null ? void 0 : options.selector]);
572
- return status;
573
- }
574
-
575
- // src/components/ClerkHostRenderer.tsx
576
- import { without } from "@clerk/shared/object";
577
- import { isDeeplyEqual } from "@clerk/shared/react";
578
- import React6 from "react";
579
- var isMountProps = (props) => {
580
- return "mount" in props;
581
- };
582
- var isOpenProps = (props) => {
583
- return "open" in props;
584
- };
585
- var stripMenuItemIconHandlers = (menuItems) => {
586
- return menuItems == null ? void 0 : menuItems.map(({ mountIcon, unmountIcon, ...rest }) => rest);
587
- };
588
- var ClerkHostRenderer = class extends React6.PureComponent {
589
- constructor() {
590
- super(...arguments);
591
- this.rootRef = React6.createRef();
592
- }
593
- componentDidUpdate(_prevProps) {
594
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
595
- if (!isMountProps(_prevProps) || !isMountProps(this.props)) {
596
- return;
597
- }
598
- const prevProps = without(_prevProps.props || {}, "customPages", "customMenuItems", "children");
599
- const newProps = without(this.props.props || {}, "customPages", "customMenuItems", "children");
600
- const customPagesChanged = ((_b = (_a = _prevProps.props) == null ? void 0 : _a.customPages) == null ? void 0 : _b.length) !== ((_d = (_c = this.props.props) == null ? void 0 : _c.customPages) == null ? void 0 : _d.length);
601
- const customMenuItemsChanged = ((_f = (_e = _prevProps.props) == null ? void 0 : _e.customMenuItems) == null ? void 0 : _f.length) !== ((_h = (_g = this.props.props) == null ? void 0 : _g.customMenuItems) == null ? void 0 : _h.length);
602
- const prevMenuItemsWithoutHandlers = stripMenuItemIconHandlers((_i = _prevProps.props) == null ? void 0 : _i.customMenuItems);
603
- const newMenuItemsWithoutHandlers = stripMenuItemIconHandlers((_j = this.props.props) == null ? void 0 : _j.customMenuItems);
604
- if (!isDeeplyEqual(prevProps, newProps) || !isDeeplyEqual(prevMenuItemsWithoutHandlers, newMenuItemsWithoutHandlers) || customPagesChanged || customMenuItemsChanged) {
605
- if (this.rootRef.current) {
606
- this.props.updateProps({ node: this.rootRef.current, props: this.props.props });
607
- }
608
- }
609
- }
610
- componentDidMount() {
611
- if (this.rootRef.current) {
612
- if (isMountProps(this.props)) {
613
- this.props.mount(this.rootRef.current, this.props.props);
614
- }
615
- if (isOpenProps(this.props)) {
616
- this.props.open(this.props.props);
617
- }
618
- }
619
- }
620
- componentWillUnmount() {
621
- if (this.rootRef.current) {
622
- if (isMountProps(this.props)) {
623
- this.props.unmount(this.rootRef.current);
624
- }
625
- if (isOpenProps(this.props)) {
626
- this.props.close();
627
- }
628
- }
629
- }
630
- render() {
631
- const { hideRootHtmlElement = false } = this.props;
632
- const rootAttributes = {
633
- ref: this.rootRef,
634
- ...this.props.rootProps,
635
- ...this.props.component && { "data-clerk-component": this.props.component }
636
- };
637
- return /* @__PURE__ */ React6.createElement(React6.Fragment, null, !hideRootHtmlElement && /* @__PURE__ */ React6.createElement("div", { ...rootAttributes }), this.props.children);
638
- }
639
- };
640
-
641
- // src/components/withClerk.tsx
642
- import { usePortalRoot } from "@clerk/shared/react";
643
- import React7 from "react";
644
- var withClerk = (Component, displayNameOrOptions) => {
645
- const passedDisplayedName = typeof displayNameOrOptions === "string" ? displayNameOrOptions : displayNameOrOptions == null ? void 0 : displayNameOrOptions.component;
646
- const displayName = passedDisplayedName || Component.displayName || Component.name || "Component";
647
- Component.displayName = displayName;
648
- const options = typeof displayNameOrOptions === "string" ? void 0 : displayNameOrOptions;
649
- const HOC = (props) => {
650
- useAssertWrappedByClerkProvider(displayName || "withClerk");
651
- const clerk = useIsomorphicClerkContext();
652
- const getContainer = usePortalRoot();
653
- if (!clerk.loaded && !(options == null ? void 0 : options.renderWhileLoading)) {
654
- return null;
655
- }
656
- return /* @__PURE__ */ React7.createElement(
657
- Component,
658
- {
659
- getContainer,
660
- ...props,
661
- component: displayName,
662
- clerk
663
- }
664
- );
665
- };
666
- HOC.displayName = `withClerk(${displayName})`;
667
- return HOC;
668
- };
669
-
670
- // src/components/uiComponents.tsx
671
- var CustomPortalsRenderer = (props) => {
672
- var _a, _b;
673
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, (_a = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a.map(({ key, portal }) => createElement(portal, { key })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map(({ key, portal }) => createElement(portal, { key })));
674
- };
675
- var SignIn = withClerk(
676
- ({ clerk, component, fallback, ...props }) => {
677
- const mountingStatus = useWaitForComponentMount(component);
678
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
679
- const rendererRootProps = {
680
- ...shouldShowFallback && fallback && { style: { display: "none" } }
681
- };
682
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
683
- ClerkHostRenderer,
684
- {
685
- component,
686
- mount: clerk.mountSignIn,
687
- unmount: clerk.unmountSignIn,
688
- updateProps: clerk.__internal_updateProps,
689
- props,
690
- rootProps: rendererRootProps
691
- }
692
- ));
693
- },
694
- { component: "SignIn", renderWhileLoading: true }
695
- );
696
- var SignUp = withClerk(
697
- ({ clerk, component, fallback, ...props }) => {
698
- const mountingStatus = useWaitForComponentMount(component);
699
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
700
- const rendererRootProps = {
701
- ...shouldShowFallback && fallback && { style: { display: "none" } }
702
- };
703
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
704
- ClerkHostRenderer,
705
- {
706
- component,
707
- mount: clerk.mountSignUp,
708
- unmount: clerk.unmountSignUp,
709
- updateProps: clerk.__internal_updateProps,
710
- props,
711
- rootProps: rendererRootProps
712
- }
713
- ));
714
- },
715
- { component: "SignUp", renderWhileLoading: true }
716
- );
717
- function UserProfilePage({ children }) {
718
- logErrorInDevMode3(userProfilePageRenderedError);
719
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
720
- }
721
- function UserProfileLink({ children }) {
722
- logErrorInDevMode3(userProfileLinkRenderedError);
723
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
724
- }
725
- var _UserProfile = withClerk(
726
- ({
727
- clerk,
728
- component,
729
- fallback,
730
- ...props
731
- }) => {
732
- const mountingStatus = useWaitForComponentMount(component);
733
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
734
- const rendererRootProps = {
735
- ...shouldShowFallback && fallback && { style: { display: "none" } }
736
- };
737
- const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children);
738
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ React8.createElement(
739
- ClerkHostRenderer,
740
- {
741
- component,
742
- mount: clerk.mountUserProfile,
743
- unmount: clerk.unmountUserProfile,
744
- updateProps: clerk.__internal_updateProps,
745
- props: { ...props, customPages },
746
- rootProps: rendererRootProps
747
- },
748
- /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { customPagesPortals })
749
- ));
750
- },
751
- { component: "UserProfile", renderWhileLoading: true }
752
- );
753
- var UserProfile = Object.assign(_UserProfile, {
754
- Page: UserProfilePage,
755
- Link: UserProfileLink
756
- });
757
- var UserButtonContext = createContext({
758
- mount: () => {
759
- },
760
- unmount: () => {
761
- },
762
- updateProps: () => {
763
- }
764
- });
765
- var _UserButton = withClerk(
766
- ({
767
- clerk,
768
- component,
769
- fallback,
770
- ...props
771
- }) => {
772
- const mountingStatus = useWaitForComponentMount(component);
773
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
774
- const rendererRootProps = {
775
- ...shouldShowFallback && fallback && { style: { display: "none" } }
776
- };
777
- const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children, {
778
- allowForAnyChildren: !!props.__experimental_asProvider
779
- });
780
- const userProfileProps = { ...props.userProfileProps, customPages };
781
- const { customMenuItems, customMenuItemsPortals } = useUserButtonCustomMenuItems(props.children, {
782
- allowForAnyChildren: !!props.__experimental_asProvider
783
- });
784
- const sanitizedChildren = useSanitizedChildren(props.children);
785
- const passableProps = {
786
- mount: clerk.mountUserButton,
787
- unmount: clerk.unmountUserButton,
788
- updateProps: clerk.__internal_updateProps,
789
- props: { ...props, userProfileProps, customMenuItems }
790
- };
791
- const portalProps = {
792
- customPagesPortals,
793
- customMenuItemsPortals
794
- };
795
- return /* @__PURE__ */ React8.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
796
- ClerkHostRenderer,
797
- {
798
- component,
799
- ...passableProps,
800
- hideRootHtmlElement: !!props.__experimental_asProvider,
801
- rootProps: rendererRootProps
802
- },
803
- props.__experimental_asProvider ? sanitizedChildren : null,
804
- /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { ...portalProps })
805
- ));
806
- },
807
- { component: "UserButton", renderWhileLoading: true }
808
- );
809
- function MenuItems({ children }) {
810
- logErrorInDevMode3(userButtonMenuItemsRenderedError);
811
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
812
- }
813
- function MenuAction({ children }) {
814
- logErrorInDevMode3(userButtonMenuActionRenderedError);
815
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
816
- }
817
- function MenuLink({ children }) {
818
- logErrorInDevMode3(userButtonMenuLinkRenderedError);
819
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
820
- }
821
- function UserButtonOutlet(outletProps) {
822
- const providerProps = useContext(UserButtonContext);
823
- const portalProps = {
824
- ...providerProps,
825
- props: {
826
- ...providerProps.props,
827
- ...outletProps
828
- }
829
- };
830
- return /* @__PURE__ */ React8.createElement(ClerkHostRenderer, { ...portalProps });
831
- }
832
- var UserButton = Object.assign(_UserButton, {
833
- UserProfilePage,
834
- UserProfileLink,
835
- MenuItems,
836
- Action: MenuAction,
837
- Link: MenuLink,
838
- __experimental_Outlet: UserButtonOutlet
839
- });
840
- function OrganizationProfilePage({ children }) {
841
- logErrorInDevMode3(organizationProfilePageRenderedError);
842
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
843
- }
844
- function OrganizationProfileLink({ children }) {
845
- logErrorInDevMode3(organizationProfileLinkRenderedError);
846
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
847
- }
848
- var _OrganizationProfile = withClerk(
849
- ({
850
- clerk,
851
- component,
852
- fallback,
853
- ...props
854
- }) => {
855
- const mountingStatus = useWaitForComponentMount(component);
856
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
857
- const rendererRootProps = {
858
- ...shouldShowFallback && fallback && { style: { display: "none" } }
859
- };
860
- const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children);
861
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
862
- ClerkHostRenderer,
863
- {
864
- component,
865
- mount: clerk.mountOrganizationProfile,
866
- unmount: clerk.unmountOrganizationProfile,
867
- updateProps: clerk.__internal_updateProps,
868
- props: { ...props, customPages },
869
- rootProps: rendererRootProps
870
- },
871
- /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { customPagesPortals })
872
- ));
873
- },
874
- { component: "OrganizationProfile", renderWhileLoading: true }
875
- );
876
- var OrganizationProfile = Object.assign(_OrganizationProfile, {
877
- Page: OrganizationProfilePage,
878
- Link: OrganizationProfileLink
879
- });
880
- var CreateOrganization = withClerk(
881
- ({ clerk, component, fallback, ...props }) => {
882
- const mountingStatus = useWaitForComponentMount(component);
883
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
884
- const rendererRootProps = {
885
- ...shouldShowFallback && fallback && { style: { display: "none" } }
886
- };
887
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
888
- ClerkHostRenderer,
889
- {
890
- component,
891
- mount: clerk.mountCreateOrganization,
892
- unmount: clerk.unmountCreateOrganization,
893
- updateProps: clerk.__internal_updateProps,
894
- props,
895
- rootProps: rendererRootProps
896
- }
897
- ));
898
- },
899
- { component: "CreateOrganization", renderWhileLoading: true }
900
- );
901
- var OrganizationSwitcherContext = createContext({
902
- mount: () => {
903
- },
904
- unmount: () => {
905
- },
906
- updateProps: () => {
907
- }
908
- });
909
- var _OrganizationSwitcher = withClerk(
910
- ({
911
- clerk,
912
- component,
913
- fallback,
914
- ...props
915
- }) => {
916
- const mountingStatus = useWaitForComponentMount(component);
917
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
918
- const rendererRootProps = {
919
- ...shouldShowFallback && fallback && { style: { display: "none" } }
920
- };
921
- const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children, {
922
- allowForAnyChildren: !!props.__experimental_asProvider
923
- });
924
- const organizationProfileProps = { ...props.organizationProfileProps, customPages };
925
- const sanitizedChildren = useSanitizedChildren(props.children);
926
- const passableProps = {
927
- mount: clerk.mountOrganizationSwitcher,
928
- unmount: clerk.unmountOrganizationSwitcher,
929
- updateProps: clerk.__internal_updateProps,
930
- props: { ...props, organizationProfileProps },
931
- rootProps: rendererRootProps,
932
- component
933
- };
934
- clerk.__experimental_prefetchOrganizationSwitcher();
935
- return /* @__PURE__ */ React8.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
936
- ClerkHostRenderer,
937
- {
938
- ...passableProps,
939
- hideRootHtmlElement: !!props.__experimental_asProvider
940
- },
941
- props.__experimental_asProvider ? sanitizedChildren : null,
942
- /* @__PURE__ */ React8.createElement(CustomPortalsRenderer, { customPagesPortals })
943
- )));
944
- },
945
- { component: "OrganizationSwitcher", renderWhileLoading: true }
946
- );
947
- function OrganizationSwitcherOutlet(outletProps) {
948
- const providerProps = useContext(OrganizationSwitcherContext);
949
- const portalProps = {
950
- ...providerProps,
951
- props: {
952
- ...providerProps.props,
953
- ...outletProps
954
- }
955
- };
956
- return /* @__PURE__ */ React8.createElement(ClerkHostRenderer, { ...portalProps });
957
- }
958
- var OrganizationSwitcher = Object.assign(_OrganizationSwitcher, {
959
- OrganizationProfilePage,
960
- OrganizationProfileLink,
961
- __experimental_Outlet: OrganizationSwitcherOutlet
962
- });
963
- var OrganizationList = withClerk(
964
- ({ clerk, component, fallback, ...props }) => {
965
- const mountingStatus = useWaitForComponentMount(component);
966
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
967
- const rendererRootProps = {
968
- ...shouldShowFallback && fallback && { style: { display: "none" } }
969
- };
970
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
971
- ClerkHostRenderer,
972
- {
973
- component,
974
- mount: clerk.mountOrganizationList,
975
- unmount: clerk.unmountOrganizationList,
976
- updateProps: clerk.__internal_updateProps,
977
- props,
978
- rootProps: rendererRootProps
979
- }
980
- ));
981
- },
982
- { component: "OrganizationList", renderWhileLoading: true }
983
- );
984
- var GoogleOneTap = withClerk(
985
- ({ clerk, component, fallback, ...props }) => {
986
- const mountingStatus = useWaitForComponentMount(component);
987
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
988
- const rendererRootProps = {
989
- ...shouldShowFallback && fallback && { style: { display: "none" } }
990
- };
991
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
992
- ClerkHostRenderer,
993
- {
994
- component,
995
- open: clerk.openGoogleOneTap,
996
- close: clerk.closeGoogleOneTap,
997
- updateProps: clerk.__internal_updateProps,
998
- props,
999
- rootProps: rendererRootProps
1000
- }
1001
- ));
1002
- },
1003
- { component: "GoogleOneTap", renderWhileLoading: true }
1004
- );
1005
- var Waitlist = withClerk(
1006
- ({ clerk, component, fallback, ...props }) => {
1007
- const mountingStatus = useWaitForComponentMount(component);
1008
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1009
- const rendererRootProps = {
1010
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1011
- };
1012
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1013
- ClerkHostRenderer,
1014
- {
1015
- component,
1016
- mount: clerk.mountWaitlist,
1017
- unmount: clerk.unmountWaitlist,
1018
- updateProps: clerk.__internal_updateProps,
1019
- props,
1020
- rootProps: rendererRootProps
1021
- }
1022
- ));
1023
- },
1024
- { component: "Waitlist", renderWhileLoading: true }
1025
- );
1026
- var PricingTable = withClerk(
1027
- ({ clerk, component, fallback, ...props }) => {
1028
- const mountingStatus = useWaitForComponentMount(component, {
1029
- // This attribute is added to the PricingTable root element after we've successfully fetched the plans asynchronously.
1030
- selector: '[data-component-status="ready"]'
1031
- });
1032
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1033
- const rendererRootProps = {
1034
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1035
- };
1036
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1037
- ClerkHostRenderer,
1038
- {
1039
- component,
1040
- mount: clerk.mountPricingTable,
1041
- unmount: clerk.unmountPricingTable,
1042
- updateProps: clerk.__internal_updateProps,
1043
- props,
1044
- rootProps: rendererRootProps
1045
- }
1046
- ));
1047
- },
1048
- { component: "PricingTable", renderWhileLoading: true }
1049
- );
1050
- var APIKeys = withClerk(
1051
- ({ clerk, component, fallback, ...props }) => {
1052
- const mountingStatus = useWaitForComponentMount(component);
1053
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1054
- const rendererRootProps = {
1055
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1056
- };
1057
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1058
- ClerkHostRenderer,
1059
- {
1060
- component,
1061
- mount: clerk.mountAPIKeys,
1062
- unmount: clerk.unmountAPIKeys,
1063
- updateProps: clerk.__internal_updateProps,
1064
- props,
1065
- rootProps: rendererRootProps
1066
- }
1067
- ));
1068
- },
1069
- { component: "ApiKeys", renderWhileLoading: true }
1070
- );
1071
- var OAuthConsent = withClerk(
1072
- ({ clerk, component, fallback, ...props }) => {
1073
- const mountingStatus = useWaitForComponentMount(component);
1074
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1075
- const rendererRootProps = {
1076
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1077
- };
1078
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1079
- ClerkHostRenderer,
1080
- {
1081
- component,
1082
- mount: clerk.__internal_mountOAuthConsent,
1083
- unmount: clerk.__internal_unmountOAuthConsent,
1084
- updateProps: clerk.__internal_updateProps,
1085
- props,
1086
- rootProps: rendererRootProps
1087
- }
1088
- ));
1089
- },
1090
- { component: "OAuthConsent", renderWhileLoading: true }
1091
- );
1092
- var UserAvatar = withClerk(
1093
- ({ clerk, component, fallback, ...props }) => {
1094
- const mountingStatus = useWaitForComponentMount(component);
1095
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1096
- const rendererRootProps = {
1097
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1098
- };
1099
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1100
- ClerkHostRenderer,
1101
- {
1102
- component,
1103
- mount: clerk.mountUserAvatar,
1104
- unmount: clerk.unmountUserAvatar,
1105
- updateProps: clerk.__internal_updateProps,
1106
- props,
1107
- rootProps: rendererRootProps
1108
- }
1109
- ));
1110
- },
1111
- { component: "UserAvatar", renderWhileLoading: true }
1112
- );
1113
- var TaskChooseOrganization = withClerk(
1114
- ({ clerk, component, fallback, ...props }) => {
1115
- const mountingStatus = useWaitForComponentMount(component);
1116
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1117
- const rendererRootProps = {
1118
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1119
- };
1120
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1121
- ClerkHostRenderer,
1122
- {
1123
- component,
1124
- mount: clerk.mountTaskChooseOrganization,
1125
- unmount: clerk.unmountTaskChooseOrganization,
1126
- updateProps: clerk.__internal_updateProps,
1127
- props,
1128
- rootProps: rendererRootProps
1129
- }
1130
- ));
1131
- },
1132
- { component: "TaskChooseOrganization", renderWhileLoading: true }
1133
- );
1134
- var TaskResetPassword = withClerk(
1135
- ({ clerk, component, fallback, ...props }) => {
1136
- const mountingStatus = useWaitForComponentMount(component);
1137
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1138
- const rendererRootProps = {
1139
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1140
- };
1141
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1142
- ClerkHostRenderer,
1143
- {
1144
- component,
1145
- mount: clerk.mountTaskResetPassword,
1146
- unmount: clerk.unmountTaskResetPassword,
1147
- updateProps: clerk.__internal_updateProps,
1148
- props,
1149
- rootProps: rendererRootProps
1150
- }
1151
- ));
1152
- },
1153
- { component: "TaskResetPassword", renderWhileLoading: true }
1154
- );
1155
- var TaskSetupMFA = withClerk(
1156
- ({ clerk, component, fallback, ...props }) => {
1157
- const mountingStatus = useWaitForComponentMount(component);
1158
- const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
1159
- const rendererRootProps = {
1160
- ...shouldShowFallback && fallback && { style: { display: "none" } }
1161
- };
1162
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
1163
- ClerkHostRenderer,
1164
- {
1165
- component,
1166
- mount: clerk.mountTaskSetupMFA,
1167
- unmount: clerk.unmountTaskSetupMFA,
1168
- updateProps: clerk.__internal_updateProps,
1169
- props,
1170
- rootProps: rendererRootProps
1171
- }
1172
- ));
1173
- },
1174
- { component: "TaskSetupMFA", renderWhileLoading: true }
1175
- );
1176
-
1177
- // src/hooks/useAuth.ts
1178
- import { createCheckAuthorization, resolveAuthState } from "@clerk/shared/authorization";
1179
- import { eventMethodCalled } from "@clerk/shared/telemetry";
1180
- import { useCallback as useCallback2 } from "react";
1181
-
1182
- // src/hooks/useAuthBase.tsx
1183
- import { deriveState } from "@clerk/shared/deriveState";
1184
- import { useClerkInstanceContext, useInitialStateContext } from "@clerk/shared/react";
1185
- import { useCallback, useMemo, useSyncExternalStore } from "react";
1186
- var defaultDerivedInitialState = {
1187
- actor: void 0,
1188
- factorVerificationAge: null,
1189
- orgId: void 0,
1190
- orgPermissions: void 0,
1191
- orgRole: void 0,
1192
- orgSlug: void 0,
1193
- sessionClaims: void 0,
1194
- sessionId: void 0,
1195
- sessionStatus: void 0,
1196
- userId: void 0
1197
- };
1198
- function useAuthBase() {
1199
- const clerk = useClerkInstanceContext();
1200
- const initialState = useInitialStateContext();
1201
- const getInitialState = useCallback(() => initialState, [initialState]);
1202
- const state = useSyncExternalStore(
1203
- useCallback((callback) => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]),
1204
- useCallback(() => {
1205
- if (!clerk.loaded || !clerk.__internal_lastEmittedResources) {
1206
- return getInitialState();
1207
- }
1208
- return clerk.__internal_lastEmittedResources;
1209
- }, [clerk, getInitialState]),
1210
- getInitialState
1211
- );
1212
- const authState = useMemo(() => {
1213
- if (!state) {
1214
- return defaultDerivedInitialState;
1215
- }
1216
- const fullState = isInitialState(state) ? deriveState(false, {}, state) : deriveState(true, state, void 0);
1217
- return authStateFromFull(fullState);
1218
- }, [state]);
1219
- return authState;
1220
- }
1221
- function authStateFromFull(derivedState) {
1222
- return {
1223
- sessionId: derivedState.sessionId,
1224
- sessionStatus: derivedState.sessionStatus,
1225
- sessionClaims: derivedState.sessionClaims,
1226
- userId: derivedState.userId,
1227
- actor: derivedState.actor,
1228
- orgId: derivedState.orgId,
1229
- orgRole: derivedState.orgRole,
1230
- orgSlug: derivedState.orgSlug,
1231
- orgPermissions: derivedState.orgPermissions,
1232
- factorVerificationAge: derivedState.factorVerificationAge
1233
- };
1234
- }
1235
- function isInitialState(state) {
1236
- return !("client" in state);
1237
- }
1238
-
1239
- // src/hooks/utils.ts
1240
- import { inBrowser } from "@clerk/shared/browser";
1241
- import { ClerkRuntimeError } from "@clerk/shared/error";
1242
- var clerkLoaded = (isomorphicClerk) => {
1243
- return new Promise((resolve) => {
1244
- const handler = (status) => {
1245
- if (["ready", "degraded"].includes(status)) {
1246
- resolve();
1247
- isomorphicClerk.off("status", handler);
1248
- }
1249
- };
1250
- isomorphicClerk.on("status", handler, { notify: true });
1251
- });
1252
- };
1253
- var createGetToken = (isomorphicClerk) => {
1254
- return async (options) => {
1255
- if (!inBrowser()) {
1256
- throw new ClerkRuntimeError(
1257
- "useAuth().getToken() can only be used in browser environments. To access auth data server-side, see the Auth object reference doc: https://clerk.com/docs/reference/backend/types/auth-object",
1258
- {
1259
- code: "clerk_runtime_not_browser"
1260
- }
1261
- );
1262
- }
1263
- await clerkLoaded(isomorphicClerk);
1264
- if (!isomorphicClerk.session) {
1265
- return null;
1266
- }
1267
- return isomorphicClerk.session.getToken(options);
1268
- };
1269
- };
1270
- var createSignOut = (isomorphicClerk) => {
1271
- return async (...args) => {
1272
- await clerkLoaded(isomorphicClerk);
1273
- return isomorphicClerk.signOut(...args);
1274
- };
1275
- };
1276
-
1277
- // src/hooks/useAuth.ts
1278
- var useAuth = (options = {}) => {
1279
- var _a;
1280
- useAssertWrappedByClerkProvider("useAuth");
1281
- const { treatPendingAsSignedOut } = options != null ? options : {};
1282
- const authState = useAuthBase();
1283
- const isomorphicClerk = useIsomorphicClerkContext();
1284
- const getToken = useCallback2(createGetToken(isomorphicClerk), [isomorphicClerk]);
1285
- const signOut = useCallback2(createSignOut(isomorphicClerk), [isomorphicClerk]);
1286
- (_a = isomorphicClerk.telemetry) == null ? void 0 : _a.record(eventMethodCalled("useAuth", { treatPendingAsSignedOut }));
1287
- return useDerivedAuth(
1288
- {
1289
- ...authState,
1290
- getToken,
1291
- signOut
1292
- },
1293
- {
1294
- treatPendingAsSignedOut
1295
- }
1296
- );
1297
- };
1298
- function useDerivedAuth(authObject, { treatPendingAsSignedOut = true } = {}) {
1299
- const { userId, orgId, orgRole, has, signOut, getToken, orgPermissions, factorVerificationAge, sessionClaims } = authObject != null ? authObject : {};
1300
- const derivedHas = useCallback2(
1301
- (params) => {
1302
- if (has) {
1303
- return has(params);
1304
- }
1305
- return createCheckAuthorization({
1306
- userId,
1307
- orgId,
1308
- orgRole,
1309
- orgPermissions,
1310
- factorVerificationAge,
1311
- features: (sessionClaims == null ? void 0 : sessionClaims.fea) || "",
1312
- plans: (sessionClaims == null ? void 0 : sessionClaims.pla) || ""
1313
- })(params);
1314
- },
1315
- [has, userId, orgId, orgRole, orgPermissions, factorVerificationAge, sessionClaims]
1316
- );
1317
- const payload = resolveAuthState({
1318
- authObject: {
1319
- ...authObject,
1320
- getToken,
1321
- signOut,
1322
- has: derivedHas
1323
- },
1324
- options: {
1325
- treatPendingAsSignedOut
1326
- }
1327
- });
1328
- if (!payload) {
1329
- return errorThrower.throw(invalidStateError);
1330
- }
1331
- return payload;
1332
- }
1333
-
1334
- // src/hooks/useEmailLink.ts
1335
- import React9 from "react";
1336
- function useEmailLink(resource) {
1337
- const { startEmailLinkFlow, cancelEmailLinkFlow } = React9.useMemo(() => resource.createEmailLinkFlow(), [resource]);
1338
- React9.useEffect(() => {
1339
- return cancelEmailLinkFlow;
1340
- }, []);
1341
- return {
1342
- startEmailLinkFlow,
1343
- cancelEmailLinkFlow
1344
- };
1345
- }
1346
-
1347
- // src/hooks/useClerkSignal.ts
1348
- import { eventMethodCalled as eventMethodCalled2 } from "@clerk/shared/telemetry";
1349
- import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
1350
- function useClerkSignal(signal) {
1351
- var _a, _b, _c;
1352
- useAssertWrappedByClerkProvider("useClerkSignal");
1353
- const clerk = useIsomorphicClerkContext();
1354
- switch (signal) {
1355
- case "signIn":
1356
- (_a = clerk.telemetry) == null ? void 0 : _a.record(eventMethodCalled2("useSignIn", { apiVersion: "2025-11" }));
1357
- break;
1358
- case "signUp":
1359
- (_b = clerk.telemetry) == null ? void 0 : _b.record(eventMethodCalled2("useSignUp", { apiVersion: "2025-11" }));
1360
- break;
1361
- case "waitlist":
1362
- (_c = clerk.telemetry) == null ? void 0 : _c.record(eventMethodCalled2("useWaitlist", { apiVersion: "2025-11" }));
1363
- break;
1364
- default:
1365
- break;
1366
- }
1367
- const subscribe = useCallback3(
1368
- (callback) => {
1369
- if (!clerk.loaded) {
1370
- return () => {
1371
- };
1372
- }
1373
- return clerk.__internal_state.__internal_effect(() => {
1374
- switch (signal) {
1375
- case "signIn":
1376
- clerk.__internal_state.signInSignal();
1377
- break;
1378
- case "signUp":
1379
- clerk.__internal_state.signUpSignal();
1380
- break;
1381
- case "waitlist":
1382
- clerk.__internal_state.waitlistSignal();
1383
- break;
1384
- default:
1385
- throw new Error(`Unknown signal: ${signal}`);
1386
- }
1387
- callback();
1388
- });
1389
- },
1390
- [clerk, clerk.loaded, clerk.__internal_state]
1391
- );
1392
- const getSnapshot = useCallback3(() => {
1393
- switch (signal) {
1394
- case "signIn":
1395
- return clerk.__internal_state.signInSignal();
1396
- case "signUp":
1397
- return clerk.__internal_state.signUpSignal();
1398
- case "waitlist":
1399
- return clerk.__internal_state.waitlistSignal();
1400
- default:
1401
- throw new Error(`Unknown signal: ${signal}`);
1402
- }
1403
- }, [clerk.__internal_state]);
1404
- const value = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
1405
- return value;
1406
- }
1407
- var useSignIn = () => {
1408
- return useClerkSignal("signIn");
1409
- };
1410
- var useSignUp = () => {
1411
- return useClerkSignal("signUp");
1412
- };
1413
- function useWaitlist() {
1414
- return useClerkSignal("waitlist");
1415
- }
1416
-
1417
- // src/hooks/index.ts
1418
- import {
1419
- useClerk,
1420
- useOrganization,
1421
- useOrganizationCreationDefaults,
1422
- useOrganizationList,
1423
- useSessionList,
1424
- useUser,
1425
- useSession,
1426
- useReverification,
1427
- useAPIKeys,
1428
- useOAuthConsent,
1429
- __experimental_useCheckout,
1430
- __experimental_CheckoutProvider,
1431
- __experimental_usePaymentElement,
1432
- __experimental_PaymentElementProvider,
1433
- __experimental_PaymentElement
1434
- } from "@clerk/shared/react";
1435
-
1436
- export {
1437
- multipleClerkProvidersError,
1438
- unsupportedNonBrowserDomainOrProxyUrlFunction,
1439
- noPathProvidedError,
1440
- incompatibleRoutingWithPathProvidedError,
1441
- assertSingleChild,
1442
- normalizeWithDefaultValue,
1443
- safeExecute,
1444
- mergeWithEnv,
1445
- isConstructor,
1446
- withMaxAllowedInstancesGuard,
1447
- withClerk,
1448
- SignIn,
1449
- SignUp,
1450
- UserProfile,
1451
- UserButton,
1452
- OrganizationProfile,
1453
- CreateOrganization,
1454
- OrganizationSwitcher,
1455
- OrganizationList,
1456
- GoogleOneTap,
1457
- Waitlist,
1458
- PricingTable,
1459
- APIKeys,
1460
- OAuthConsent,
1461
- UserAvatar,
1462
- TaskChooseOrganization,
1463
- TaskResetPassword,
1464
- TaskSetupMFA,
1465
- useAuth,
1466
- useDerivedAuth,
1467
- useEmailLink,
1468
- useSignIn,
1469
- useSignUp,
1470
- useWaitlist,
1471
- useClerk,
1472
- useOrganization,
1473
- useOrganizationCreationDefaults,
1474
- useOrganizationList,
1475
- useSessionList,
1476
- useUser,
1477
- useSession,
1478
- useReverification,
1479
- useAPIKeys,
1480
- useOAuthConsent,
1481
- __experimental_useCheckout,
1482
- __experimental_CheckoutProvider,
1483
- __experimental_usePaymentElement,
1484
- __experimental_PaymentElementProvider,
1485
- __experimental_PaymentElement
1486
- };
1487
- //# sourceMappingURL=chunk-FQVXBXXF.mjs.map