From ef8ca5286ca8944063d78933d48d7185f853f49f Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Mon, 8 Jul 2024 18:04:18 +0300 Subject: [PATCH 01/14] feat(clerk-js): Support open to specific page through userButton --- packages/clerk-js/src/ui/Components.tsx | 4 ++-- .../components/UserButton/SessionActions.tsx | 20 ++++++++++++++++++- .../UserButton/UserButtonPopover.tsx | 2 ++ .../UserButton/useMultisessionActions.tsx | 18 ++++++++++++++++- .../src/ui/hooks/useClerkModalStateParams.tsx | 4 +++- 5 files changed, 43 insertions(+), 5 deletions(-) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index 26eb42ccac8..c70469a49dd 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -285,8 +285,8 @@ const Components = (props: ComponentsProps) => { flowName={'userProfile'} onClose={() => componentsControls.closeModal('userProfile')} onExternalNavigate={() => componentsControls.closeModal('userProfile')} - startPath={buildVirtualRouterUrl({ base: '/user', path: urlStateParam?.path })} - componentName={'SignUpModal'} + startPath={buildVirtualRouterUrl({ base: '/user', path: userProfileModal?.path || urlStateParam?.path })} + componentName={'UserProfileModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} > diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx index 51dc26ec069..a5503783575 100644 --- a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx @@ -9,12 +9,13 @@ import type { ThemableCssProp } from '../../styledSystem'; type SingleSessionActionsProps = { handleManageAccountClicked: () => Promise | void; + handleUserProfileActionClicked: (path: string) => Promise | void; handleSignOutSessionClicked: (session: ActiveSessionResource) => () => Promise | void; session: ActiveSessionResource; }; export const SingleSessionActions = (props: SingleSessionActionsProps) => { - const { handleManageAccountClicked, handleSignOutSessionClicked, session } = props; + const { handleManageAccountClicked, handleUserProfileActionClicked, handleSignOutSessionClicked, session } = props; return ( { padding: `${t.space.$4} ${t.space.$5}`, })} /> + handleUserProfileActionClicked('/custom')} + sx={t => ({ + borderTopWidth: t.borderWidths.$normal, + borderTopStyle: t.borderStyles.$solid, + borderTopColor: t.colors.$neutralAlpha100, + padding: `${t.space.$4} ${t.space.$5}`, + })} + /> handleUserProfileActionClicked(path)} session={session} /> ) : ( diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx index b9508cdc15d..7f592460c48 100644 --- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx @@ -6,6 +6,7 @@ import { useCardState } from '../../elements'; import { useMultipleSessions } from '../../hooks/useMultipleSessions'; import { useRouter } from '../../router'; import { sleep } from '../../utils'; +import { useClerkModalStateParams } from '../../hooks'; type UseMultisessionActionsParams = { user: UserResource | null | undefined; @@ -22,6 +23,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { const card = useCardState(); const { activeSessions, otherSessions } = useMultipleSessions({ user: opts.user }); const { navigate } = useRouter(); + const { setUrlStateParam, urlStateParam } = useClerkModalStateParams(); const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => { if (otherSessions.length === 0) { @@ -41,11 +43,24 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { })(); }); } - openUserProfile(opts.userProfileProps); return opts.actionCompleteCallback?.(); }; + const handleUserProfileActionClicked = (path: string) => { + if (opts.userProfileMode === 'navigation') { + return navigate(opts.userProfileUrl || '').finally(() => { + void (async () => { + await sleep(300); + opts.actionCompleteCallback?.(); + })(); + }); + } + openUserProfile({ ...opts.userProfileProps, path: path }); + + return opts.actionCompleteCallback?.(); + }; + const handleSignOutAllClicked = () => { return signOut(opts.navigateAfterSignOut); }; @@ -66,6 +81,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { return { handleSignOutSessionClicked, handleManageAccountClicked, + handleUserProfileActionClicked, handleSignOutAllClicked, handleSessionClicked, handleAddAccountClicked, diff --git a/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx b/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx index 282559ea50f..72ad42e9bb7 100644 --- a/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx +++ b/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx @@ -17,7 +17,9 @@ export const useClerkModalStateParams = () => { setState({ startPath: '', path: '', componentName: '', socialProvider: '' }); }; - const removeQueryParam = () => removeClerkQueryParam(CLERK_MODAL_STATE); + const removeQueryParam = () => { + removeClerkQueryParam(CLERK_MODAL_STATE); + }; return { urlStateParam: { ...state, clearUrlStateParam }, From 635eb040f1c9c7c00f92a19dfc6d6a8bf579d1af Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Tue, 9 Jul 2024 18:09:00 +0300 Subject: [PATCH 02/14] feat(clerk-js): Update internal navigation function on navbar --- .../components/UserButton/SessionActions.tsx | 20 +------------------ .../UserButton/UserButtonPopover.tsx | 2 -- .../UserButton/useMultisessionActions.tsx | 9 +++++---- packages/clerk-js/src/ui/elements/Navbar.tsx | 5 ++--- 4 files changed, 8 insertions(+), 28 deletions(-) diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx index a5503783575..51dc26ec069 100644 --- a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx @@ -9,13 +9,12 @@ import type { ThemableCssProp } from '../../styledSystem'; type SingleSessionActionsProps = { handleManageAccountClicked: () => Promise | void; - handleUserProfileActionClicked: (path: string) => Promise | void; handleSignOutSessionClicked: (session: ActiveSessionResource) => () => Promise | void; session: ActiveSessionResource; }; export const SingleSessionActions = (props: SingleSessionActionsProps) => { - const { handleManageAccountClicked, handleUserProfileActionClicked, handleSignOutSessionClicked, session } = props; + const { handleManageAccountClicked, handleSignOutSessionClicked, session } = props; return ( { padding: `${t.space.$4} ${t.space.$5}`, })} /> - handleUserProfileActionClicked('/custom')} - sx={t => ({ - borderTopWidth: t.borderWidths.$normal, - borderTopStyle: t.borderStyles.$solid, - borderTopColor: t.colors.$neutralAlpha100, - padding: `${t.space.$4} ${t.space.$5}`, - })} - /> handleUserProfileActionClicked(path)} session={session} /> ) : ( diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx index 7f592460c48..56343fe4955 100644 --- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx @@ -6,7 +6,6 @@ import { useCardState } from '../../elements'; import { useMultipleSessions } from '../../hooks/useMultipleSessions'; import { useRouter } from '../../router'; import { sleep } from '../../utils'; -import { useClerkModalStateParams } from '../../hooks'; type UseMultisessionActionsParams = { user: UserResource | null | undefined; @@ -23,7 +22,6 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { const card = useCardState(); const { activeSessions, otherSessions } = useMultipleSessions({ user: opts.user }); const { navigate } = useRouter(); - const { setUrlStateParam, urlStateParam } = useClerkModalStateParams(); const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => { if (otherSessions.length === 0) { @@ -47,7 +45,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { return opts.actionCompleteCallback?.(); }; - const handleUserProfileActionClicked = (path: string) => { + const handleUserProfileActionClicked = (path?: string) => { if (opts.userProfileMode === 'navigation') { return navigate(opts.userProfileUrl || '').finally(() => { void (async () => { @@ -56,7 +54,10 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { })(); }); } - openUserProfile({ ...opts.userProfileProps, path: path }); + openUserProfile({ + ...opts.userProfileProps, + ...(path && { path }), + }); return opts.actionCompleteCallback?.(); }; diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index 6e694305bb4..fa1fb822a97 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -45,7 +45,6 @@ export const NavBar = (props: NavBarProps) => { const { contentRef, title, description, routes, header } = props; const { close } = useNavbarContext(); const { navigate } = useRouter(); - const { navigateToFlowStart } = useNavigateToFlowStart(); const { t } = useLocalizations(); const router = useRouter(); @@ -63,9 +62,9 @@ export const NavBar = (props: NavBarProps) => { if (route.path === '/') { // TODO: this is needed to correctly handle navigations // when the component is opened as a modal - await navigateToFlowStart(); + await navigate(router.indexPath); } else { - await navigate(route.path); + await navigate(route?.path); } } }; From b6b1395a0b0b3f76fe7c98ec97da07e5ed5caa77 Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Tue, 16 Jul 2024 17:15:34 +0300 Subject: [PATCH 03/14] feat(clerk-js): Update navigateToFlowStart function to handle user profile modal case --- packages/clerk-js/src/ui/elements/Navbar.tsx | 3 ++- packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx | 4 +--- packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts | 6 ++++++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index fa1fb822a97..b55bdb47ff2 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -46,6 +46,7 @@ export const NavBar = (props: NavBarProps) => { const { close } = useNavbarContext(); const { navigate } = useRouter(); const { t } = useLocalizations(); + const { navigateToFlowStart } = useNavigateToFlowStart(); const router = useRouter(); const handleNavigate = (route: NavbarRoute) => { @@ -62,7 +63,7 @@ export const NavBar = (props: NavBarProps) => { if (route.path === '/') { // TODO: this is needed to correctly handle navigations // when the component is opened as a modal - await navigate(router.indexPath); + await navigateToFlowStart(); } else { await navigate(route?.path); } diff --git a/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx b/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx index 72ad42e9bb7..282559ea50f 100644 --- a/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx +++ b/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx @@ -17,9 +17,7 @@ export const useClerkModalStateParams = () => { setState({ startPath: '', path: '', componentName: '', socialProvider: '' }); }; - const removeQueryParam = () => { - removeClerkQueryParam(CLERK_MODAL_STATE); - }; + const removeQueryParam = () => removeClerkQueryParam(CLERK_MODAL_STATE); return { urlStateParam: { ...state, clearUrlStateParam }, diff --git a/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts b/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts index 79a1b5275b2..d243c628b0b 100644 --- a/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts +++ b/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts @@ -2,8 +2,14 @@ import { useRouter } from '../router'; export const useNavigateToFlowStart = () => { const router = useRouter(); + const userProfileModalFullPath = '/CLERK-ROUTER/VIRTUAL/user'; const navigateToFlowStart = async () => { const to = '/' + router.basePath + router.flowStartPath; + + if (router.fullPath === userProfileModalFullPath) { + return router.navigate(router.indexPath); + } + if (to !== router.currentPath) { return router.navigate(to); } From 5953bb226fff0da86872e174a782813a756a6bff Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Wed, 17 Jul 2024 13:09:49 +0300 Subject: [PATCH 04/14] feat(clerk-js): Update handleManageOrganizationClicked to open org modal on specific page --- packages/clerk-js/src/ui/Components.tsx | 5 ++++- .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx | 8 +++++--- packages/clerk-js/src/ui/elements/Navbar.tsx | 2 +- packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts | 7 +------ 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index c70469a49dd..6c5fd011165 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -302,7 +302,10 @@ const Components = (props: ComponentsProps) => { flowName={'organizationProfile'} onClose={() => componentsControls.closeModal('organizationProfile')} onExternalNavigate={() => componentsControls.closeModal('organizationProfile')} - startPath={buildVirtualRouterUrl({ base: '/organizationProfile', path: urlStateParam?.path })} + startPath={buildVirtualRouterUrl({ + base: '/organizationProfile', + path: organizationProfileModal?.path || urlStateParam?.path, + })} componentName={'OrganizationProfileModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index f433fd31da5..3b88abc15c9 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -88,13 +88,15 @@ export const OrganizationSwitcherPopover = React.forwardRef { + const handleManageOrganizationClicked = (path?: string) => { close(); if (organizationProfileMode === 'navigation') { return navigateOrganizationProfile(); } + return openOrganizationProfile({ ...organizationProfileProps, + ...(path && { path }), afterLeaveOrganizationUrl, //@ts-expect-error __unstable_manageBillingUrl, @@ -112,7 +114,7 @@ export const OrganizationSwitcherPopover = React.forwardRef handleManageOrganizationClicked()} trailing={} /> ); @@ -127,7 +129,7 @@ export const OrganizationSwitcherPopover = React.forwardRef handleManageOrganizationClicked()} trailing={} /> ); diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index b55bdb47ff2..d964130c33d 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -45,8 +45,8 @@ export const NavBar = (props: NavBarProps) => { const { contentRef, title, description, routes, header } = props; const { close } = useNavbarContext(); const { navigate } = useRouter(); - const { t } = useLocalizations(); const { navigateToFlowStart } = useNavigateToFlowStart(); + const { t } = useLocalizations(); const router = useRouter(); const handleNavigate = (route: NavbarRoute) => { diff --git a/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts b/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts index d243c628b0b..fedad013c81 100644 --- a/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts +++ b/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts @@ -2,13 +2,8 @@ import { useRouter } from '../router'; export const useNavigateToFlowStart = () => { const router = useRouter(); - const userProfileModalFullPath = '/CLERK-ROUTER/VIRTUAL/user'; const navigateToFlowStart = async () => { - const to = '/' + router.basePath + router.flowStartPath; - - if (router.fullPath === userProfileModalFullPath) { - return router.navigate(router.indexPath); - } + const to = router.indexPath; if (to !== router.currentPath) { return router.navigate(to); From c0908fe5061c1fd77aa69e1da51536aad60b4593 Mon Sep 17 00:00:00 2001 From: Emmanouela Pothitou <68468183+EmmanouelaPothitou@users.noreply.github.com> Date: Wed, 17 Jul 2024 15:27:53 +0300 Subject: [PATCH 05/14] Create cuddly-spoons-decide.md --- .changeset/cuddly-spoons-decide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cuddly-spoons-decide.md diff --git a/.changeset/cuddly-spoons-decide.md b/.changeset/cuddly-spoons-decide.md new file mode 100644 index 00000000000..40398931582 --- /dev/null +++ b/.changeset/cuddly-spoons-decide.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-js": patch +--- + +Support opening the userProfileModal and organizationProfileModal to specific navigation items through the userButton and organizationSwitcher. From 076d16e73bcf5a98ec6117e291525efa00680233 Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Tue, 23 Jul 2024 11:12:59 +0300 Subject: [PATCH 06/14] feat(clerk-js): Rename handleManageOrganizationClicked to handleItemClick --- .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx | 6 +++--- packages/clerk-js/src/ui/elements/Navbar.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index 3b88abc15c9..df93e67165d 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -88,7 +88,7 @@ export const OrganizationSwitcherPopover = React.forwardRef { + const handleItemClick = (path?: string) => { close(); if (organizationProfileMode === 'navigation') { return navigateOrganizationProfile(); @@ -114,7 +114,7 @@ export const OrganizationSwitcherPopover = React.forwardRef handleManageOrganizationClicked()} + onClick={() => handleItemClick()} trailing={} /> ); @@ -129,7 +129,7 @@ export const OrganizationSwitcherPopover = React.forwardRef handleManageOrganizationClicked()} + onClick={() => handleItemClick()} trailing={} /> ); diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index d964130c33d..6e694305bb4 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -65,7 +65,7 @@ export const NavBar = (props: NavBarProps) => { // when the component is opened as a modal await navigateToFlowStart(); } else { - await navigate(route?.path); + await navigate(route.path); } } }; From 8da90fff22aa3bdb6478058842f36b631c371c20 Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Tue, 23 Jul 2024 15:51:13 +0300 Subject: [PATCH 07/14] feat(clerk-js): Rename path to __experimental_startPath --- .../src/ui/components/UserButton/useMultisessionActions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx index 56343fe4955..6dfb5a06d0a 100644 --- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx @@ -45,7 +45,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { return opts.actionCompleteCallback?.(); }; - const handleUserProfileActionClicked = (path?: string) => { + const handleUserProfileActionClicked = (__experimental_startPath?: string) => { if (opts.userProfileMode === 'navigation') { return navigate(opts.userProfileUrl || '').finally(() => { void (async () => { @@ -56,7 +56,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { } openUserProfile({ ...opts.userProfileProps, - ...(path && { path }), + ...(__experimental_startPath && { __experimental_startPath }), }); return opts.actionCompleteCallback?.(); From cb32066226685af3c4a9a0f8b42073695d0fbeea Mon Sep 17 00:00:00 2001 From: Emmanouela Pothitou <68468183+EmmanouelaPothitou@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:46:40 +0300 Subject: [PATCH 08/14] Update packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Co-authored-by: panteliselef --- .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index df93e67165d..34a97f5cf81 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -96,7 +96,7 @@ export const OrganizationSwitcherPopover = React.forwardRef Date: Wed, 24 Jul 2024 14:46:57 +0300 Subject: [PATCH 09/14] Update packages/clerk-js/src/ui/Components.tsx Co-authored-by: panteliselef --- packages/clerk-js/src/ui/Components.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index 6c5fd011165..eb3a2cd0dff 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -285,7 +285,7 @@ const Components = (props: ComponentsProps) => { flowName={'userProfile'} onClose={() => componentsControls.closeModal('userProfile')} onExternalNavigate={() => componentsControls.closeModal('userProfile')} - startPath={buildVirtualRouterUrl({ base: '/user', path: userProfileModal?.path || urlStateParam?.path })} + startPath={buildVirtualRouterUrl({ base: '/user', path: userProfileModal?.__experimental_startPath || urlStateParam?.path })} componentName={'UserProfileModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} From 5f1f508e85d39e5209a986650093bc0588b45073 Mon Sep 17 00:00:00 2001 From: Emmanouela Pothitou <68468183+EmmanouelaPothitou@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:47:51 +0300 Subject: [PATCH 10/14] Update packages/clerk-js/src/ui/Components.tsx Co-authored-by: panteliselef --- packages/clerk-js/src/ui/Components.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index eb3a2cd0dff..28434e6144b 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -304,7 +304,7 @@ const Components = (props: ComponentsProps) => { onExternalNavigate={() => componentsControls.closeModal('organizationProfile')} startPath={buildVirtualRouterUrl({ base: '/organizationProfile', - path: organizationProfileModal?.path || urlStateParam?.path, + path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path, })} componentName={'OrganizationProfileModal'} modalContainerSx={{ alignItems: 'center' }} From a642fceb44dd92bb61ce75768c2830bd62044f20 Mon Sep 17 00:00:00 2001 From: Emmanouela Date: Wed, 24 Jul 2024 16:02:04 +0300 Subject: [PATCH 11/14] feat(clerk-js): Rename path to __experimental_startPath --- packages/clerk-js/src/ui/Components.tsx | 7 +++++-- .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx | 2 +- packages/types/src/clerk.ts | 2 ++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index 28434e6144b..9d236a2260f 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -128,7 +128,7 @@ export const mountComponentRenderer = (clerk: Clerk, environment: EnvironmentRes void preloadComponent(preloadHint); } componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => { - createRoot(clerkRoot!).render( + createRoot(clerkRoot).render( { flowName={'userProfile'} onClose={() => componentsControls.closeModal('userProfile')} onExternalNavigate={() => componentsControls.closeModal('userProfile')} - startPath={buildVirtualRouterUrl({ base: '/user', path: userProfileModal?.__experimental_startPath || urlStateParam?.path })} + startPath={buildVirtualRouterUrl({ + base: '/user', + path: userProfileModal?.__experimental_startPath || urlStateParam?.path, + })} componentName={'UserProfileModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index 34a97f5cf81..aa58e4f0940 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -88,7 +88,7 @@ export const OrganizationSwitcherPopover = React.forwardRef { + const handleItemClick = (__experimental_startPath?: string) => { close(); if (organizationProfileMode === 'navigation') { return navigateOrganizationProfile(); diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 31338858ff9..93c429e29fb 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -816,6 +816,7 @@ export type UserProfileProps = RoutingOptions & { * Provide custom pages and links to be rendered inside the UserProfile. */ customPages?: CustomPage[]; + __experimental_startPath?: string; }; export type UserProfileModalProps = WithoutRouting; @@ -836,6 +837,7 @@ export type OrganizationProfileProps = RoutingOptions & { * Provide custom pages and links to be rendered inside the OrganizationProfile. */ customPages?: CustomPage[]; + __experimental_startPath?: string; }; export type OrganizationProfileModalProps = WithoutRouting; From 691bfef4ae60abff656b26a9c12d16b6c6681a59 Mon Sep 17 00:00:00 2001 From: Emmanouela Pothitou <68468183+EmmanouelaPothitou@users.noreply.github.com> Date: Thu, 25 Jul 2024 10:30:46 +0300 Subject: [PATCH 12/14] Update cuddly-spoons-decide.md --- .changeset/cuddly-spoons-decide.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/cuddly-spoons-decide.md b/.changeset/cuddly-spoons-decide.md index 40398931582..98f38e90a72 100644 --- a/.changeset/cuddly-spoons-decide.md +++ b/.changeset/cuddly-spoons-decide.md @@ -1,5 +1,6 @@ --- "@clerk/clerk-js": patch +"@clerk/types": patch --- Support opening the userProfileModal and organizationProfileModal to specific navigation items through the userButton and organizationSwitcher. From 362dcf836dd92a440e3cd474ceee5338fd59cf43 Mon Sep 17 00:00:00 2001 From: Emmanouela Pothitou <68468183+EmmanouelaPothitou@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:57:53 +0300 Subject: [PATCH 13/14] Update packages/clerk-js/src/ui/Components.tsx Co-authored-by: Vaggelis Yfantis --- packages/clerk-js/src/ui/Components.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index 9d236a2260f..10ec8472a1c 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -128,7 +128,7 @@ export const mountComponentRenderer = (clerk: Clerk, environment: EnvironmentRes void preloadComponent(preloadHint); } componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => { - createRoot(clerkRoot).render( + createRoot(clerkRoot!).render( Date: Thu, 25 Jul 2024 14:58:04 +0300 Subject: [PATCH 14/14] Update .changeset/cuddly-spoons-decide.md Co-authored-by: Stefanos Anagnostou --- .changeset/cuddly-spoons-decide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/cuddly-spoons-decide.md b/.changeset/cuddly-spoons-decide.md index 98f38e90a72..0a35d2b77f3 100644 --- a/.changeset/cuddly-spoons-decide.md +++ b/.changeset/cuddly-spoons-decide.md @@ -3,4 +3,4 @@ "@clerk/types": patch --- -Support opening the userProfileModal and organizationProfileModal to specific navigation items through the userButton and organizationSwitcher. +Add support for opening the `UserProfileModal` and `OrganizationProfileModal` to specific navigation items through the `UserButton` and `OrganizationSwitcher`.