Repository navigation
feat(mosaic): add settings search to UserProfile and OrganizationProfile - #10492
alexcarpenter wants to merge 4 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 99e30f7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
No actionable comments were generated in the recent review.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-biometrics
@clerk/expo-google-signin
@clerk/expo-native-components
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/mosaic
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
A leaving profile page is taken out of the layout so it no longer pushes the new page down while it exits, and a found target scrolls only as far as it needs to be in view.
Search is now off by default. Pass showSearch to show it.
Description
Adds settings search to the Mosaic
UserProfileandOrganizationProfile. It builds on #10196 and adds a way for custom pages to put their own content into the search.showSearchtoUserProfileorOrganizationProfileto show it.keywords, and sections on any page, including pages that aren't open. Results are grouped by page.Section.Root search={{ label, keywords }}, which adds no extra DOM.UserProfile.SearchTarget/OrganizationProfile.SearchTarget. Pass your own element asrenderto make it the target, with no wrapper. Custom pages also acceptkeywords.useIsSearchIndexing()is exported so a page can skip work that only the visible page needs.How the index is built: while the search field is focused or has a query, the profile renders every page a second time into a detached container. Each target renders an empty marker there instead of its children, and a
MutationObserverturns the markers into the index. The index is always what each page actually renders, so permission checks, loading states and custom pages need nothing extra. A page that throws while it's indexed is left out, and the other pages stay searchable.The highlight is one element the profile renders behind the page content. It is placed over the target with CSS anchor positioning, so the target itself gets no
positionorisolation, onlyanchor-namewhile it's highlighted. It uses the same support check as the tabs indicator, and where that fails the highlight doesn't show; the scroll and focus still happen.A profile page that is leaving is now taken out of the layout (
position: absolute) until its exit ends, so it no longer pushes the new page down. Without this, a result on another page was scrolled to where it sat below the old page.The search is only shown in the column layout. It is hidden in the select and sheet layouts.
The swingset live
UserProfileandOrganizationProfilepages turn onshowSearch, and theUserProfilepage adds a Usage custom page that usesUserProfile.SearchTarget.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change