diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index b5303a816dd..58650f3d595 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -25,7 +25,7 @@ import type { UserProfilePageProps, WithClerkProp, } from '../types'; -import { errorInDevMode, useOrganizationProfileCustomPages, useUserProfileCustomPages } from '../utils'; +import { logErrorInDevMode, useOrganizationProfileCustomPages, useUserProfileCustomPages } from '../utils'; import { withClerk } from './withClerk'; type UserProfileExportType = typeof _UserProfile & { @@ -141,13 +141,13 @@ export const SignUp = withClerk(({ clerk, ...props }: WithClerkProp }, 'SignUp'); export function UserProfilePage({ children }: PropsWithChildren) { - errorInDevMode(userProfilePageRenderedError); - return
{children}
; + logErrorInDevMode(userProfilePageRenderedError); + return <>{children}; } export function UserProfileLink({ children }: PropsWithChildren) { - errorInDevMode(userProfileLinkRenderedError); - return
{children}
; + logErrorInDevMode(userProfileLinkRenderedError); + return <>{children}; } const _UserProfile = withClerk( @@ -189,18 +189,18 @@ const _UserButton = withClerk( ); export const UserButton: UserButtonExportType = Object.assign(_UserButton, { - UserProfilePage: UserProfilePage, - UserProfileLink: UserProfileLink, + UserProfilePage, + UserProfileLink, }); export function OrganizationProfilePage({ children }: PropsWithChildren) { - errorInDevMode(organizationProfilePageRenderedError); - return
{children}
; + logErrorInDevMode(organizationProfilePageRenderedError); + return <>{children}; } export function OrganizationProfileLink({ children }: PropsWithChildren) { - errorInDevMode(organizationProfileLinkRenderedError); - return
{children}
; + logErrorInDevMode(organizationProfileLinkRenderedError); + return <>{children}; } const _OrganizationProfile = withClerk( @@ -253,8 +253,8 @@ const _OrganizationSwitcher = withClerk( ); export const OrganizationSwitcher: OrganizationSwitcherExportType = Object.assign(_OrganizationSwitcher, { - OrganizationProfilePage: OrganizationProfilePage, - OrganizationProfileLink: OrganizationProfileLink, + OrganizationProfilePage, + OrganizationProfileLink, }); export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp) => { diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts index 590e8b08017..816d275a5c1 100644 --- a/packages/react/src/utils/index.ts +++ b/packages/react/src/utils/index.ts @@ -5,4 +5,4 @@ export { loadClerkJsScript } from './loadClerkJsScript'; export * from './useMaxAllowedInstancesGuard'; export * from './useCustomElementPortal'; export * from './useCustomPages'; -export * from './errorInDevMode'; +export * from './logErrorInDevMode'; diff --git a/packages/react/src/utils/errorInDevMode.ts b/packages/react/src/utils/logErrorInDevMode.ts similarity index 69% rename from packages/react/src/utils/errorInDevMode.ts rename to packages/react/src/utils/logErrorInDevMode.ts index dfa5fd09ba0..8992e997d38 100644 --- a/packages/react/src/utils/errorInDevMode.ts +++ b/packages/react/src/utils/logErrorInDevMode.ts @@ -1,6 +1,6 @@ import { isDevelopmentEnvironment } from '@clerk/shared'; -export const errorInDevMode = (message: string) => { +export const logErrorInDevMode = (message: string) => { if (isDevelopmentEnvironment()) { console.error(message); } diff --git a/packages/react/src/utils/useCustomElementPortal.tsx b/packages/react/src/utils/useCustomElementPortal.tsx index 911977bdc25..72161b1035e 100644 --- a/packages/react/src/utils/useCustomElementPortal.tsx +++ b/packages/react/src/utils/useCustomElementPortal.tsx @@ -19,19 +19,10 @@ export const useCustomElementPortal = (elements: UseCustomElementPortalParams[]) const initialState = Array(elements.length).fill(null); const [nodes, setNodes] = useState<(Element | null)[]>(initialState); - const portals: UseCustomElementPortalReturn[] = []; - - elements.forEach((el, index) => { - const mount = (node: Element) => { - setNodes(prevState => prevState.map((n, i) => (i === index ? node : n))); - }; - const unmount = () => { - setNodes(prevState => prevState.map((n, i) => (i === index ? null : n))); - }; - - const portal = () => <>{nodes[index] ? createPortal(el.component, nodes[index] as Element) : null}; - portals.push({ portal, mount, unmount, id: el.id }); - }); - - return portals; + return elements.map((el, index) => ({ + id: el.id, + mount: (node: Element) => setNodes(prevState => prevState.map((n, i) => (i === index ? node : n))), + unmount: () => setNodes(prevState => prevState.map((n, i) => (i === index ? null : n))), + portal: () => <>{nodes[index] ? createPortal(el.component, nodes[index] as Element) : null}, + })); }; diff --git a/packages/react/src/utils/useCustomPages.tsx b/packages/react/src/utils/useCustomPages.tsx index c92812ff269..97352e03ac6 100644 --- a/packages/react/src/utils/useCustomPages.tsx +++ b/packages/react/src/utils/useCustomPages.tsx @@ -10,7 +10,7 @@ import { } from '../components/uiComponents'; import { customLinkWrongProps, customPagesIgnoredComponent, customPageWrongProps } from '../errors'; import type { UserProfilePageProps } from '../types'; -import { errorInDevMode } from './errorInDevMode'; +import { logErrorInDevMode } from './logErrorInDevMode'; import type { UseCustomElementPortalParams, UseCustomElementPortalReturn } from './useCustomElementPortal'; import { useCustomElementPortal } from './useCustomElementPortal'; @@ -62,7 +62,7 @@ const useCustomPages = ({ React.Children.forEach(children, child => { if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent)) { if (child) { - errorInDevMode(customPagesIgnoredComponent(componentName)); + logErrorInDevMode(customPagesIgnoredComponent(componentName)); } return; } @@ -79,7 +79,7 @@ const useCustomPages = ({ // this is a custom page validChildren.push({ label, labelIcon, children, url }); } else { - errorInDevMode(customPageWrongProps(componentName)); + logErrorInDevMode(customPageWrongProps(componentName)); return; } } @@ -89,7 +89,7 @@ const useCustomPages = ({ // This is an external link validChildren.push({ label, labelIcon, url }); } else { - errorInDevMode(customLinkWrongProps(componentName)); + logErrorInDevMode(customLinkWrongProps(componentName)); return; } } diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 45a5425c772..86945caf583 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -694,13 +694,7 @@ export type UserProfileProps = { */ additionalOAuthScopes?: Partial>; /* - * Provide addition custom route items and pages to be rendered inside the UserProfile. - * e.g. - * - * C}> - *
Hello from custom page!
- *
- *
+ * Provide custom pages and links to be rendered inside the UserProfile. */ customPages?: CustomPage[]; }; @@ -726,13 +720,7 @@ export type OrganizationProfileProps = { */ appearance?: OrganizationProfileTheme; /* - * Provide addition custom route items and pages to be rendered inside the OrganizationProfile. - * e.g. - * - * C}> - *
Hello from custom page!
- *
- *
+ * Provide custom pages and links to be rendered inside the OrganizationProfile. */ customPages?: CustomPage[]; };