Pull Request Number: 4228 Title: feat: nextjs 15 migration [docs] Base Branch: canary Head Branch: feat/next15 Author: jrgarciadev URL: https://github.com/nextui-org/nextui/pull/4228 State: MERGED Created At: 2024-12-05T15:04:01Z Merged At: 2024-12-05T20:07:45Z Participants: jrgarciadev Description: Closes # 📝 Description ⛳️ Current behavior (updates) 🚀 New behavior 💣 Is this a breaking change (Yes/No): 📝 Additional Information Summary by CodeRabbit Release Notes New Features Introduced new components: Support, CarbonAd, Codeblock, PackageManagers, and NextUIPerf. Added a new route for "Design Principles" in the documentation. Improvements Enhanced the Support component to fetch sponsor data asynchronously. Updated the PopoverContent and NavbarMenu components for improved scroll management. Refactored the theme-switch logic for better theme initialization. Bug Fixes Corrected image paths in the blog documentation for version 2.6.0. Documentation Updated the blog post for NextUI v2.6.0 with new features and breaking changes. Chores Updated various dependencies to improve performance and compatibility. Commits: - feat: nextjs 15 migration in progress\n- feat: next 15 downgraded to next 14\n Labels: Comments: - vercel: [vc]: #ywTe3xw0xPNgcDCvxYRL46oOwPaQzsIzsEwq0QvakI0=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJuZXh0dWktZG9jcy12MiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2RvY3MiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmV4dHVpLW9yZy9uZXh0dWktZG9jcy12Mi9IOTNzeDNMUzZlczVBeldqblAxWHNDdVoxV2sxIiwicHJldmlld1VybCI6Im5leHR1aS1kb2NzLXYyLWdpdC1mZWF0LW5leHQxNS1uZXh0dWktb3JnLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibmV4dHVpLWRvY3MtdjItZ2l0LWZlYXQtbmV4dDE1LW5leHR1aS1vcmcudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJuZXh0dWktc3Rvcnlib29rLXYyIiwicm9vdERpcmVjdG9yeSI6InBhY2thZ2VzL3N0b3J5Ym9vayIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9uZXh0dWktb3JnL25leHR1aS1zdG9yeWJvb2stdjIvMTJzU0V3RG11RFVzbnlROXFEcmo1UlZEYXlUdSIsInByZXZpZXdVcmwiOiJuZXh0dWktc3Rvcnlib29rLXYyLWdpdC1mZWF0LW5leHQxNS1uZXh0dWktb3JnLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibmV4dHVpLXN0b3J5Ym9vay12Mi1naXQtZmVhdC1uZXh0MTUtbmV4dHVpLW9yZy52ZXJjZWwuYXBwIn19XX0= **The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more) | Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **nextui-docs-v2** | ✅ Ready ([Inspect](https://vercel.com/nextui-org/nextui-docs-v2/H93sx3LS6es5AzWjnP1XsCuZ1Wk1)) | [Visit Preview](https://nextui-docs-v2-git-feat-next15-nextui-org.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/nextui-docs-v2-git-feat-next15-nextui-org.vercel.app?via=pr-comment-feedback-link) | Dec 5, 2024 8:07pm | | **nextui-storybook-v2** | ✅ Ready ([Inspect](https://vercel.com/nextui-org/nextui-storybook-v2/12sSEwDmuDUsnyQ9qDrj5RVDayTu)) | [Visit Preview](https://nextui-storybook-v2-git-feat-next15-nextui-org.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/nextui-storybook-v2-git-feat-next15-nextui-org.vercel.app?via=pr-comment-feedback-link) | Dec 5, 2024 8:07pm | \n- coderabbitai: ## Walkthrough This pull request introduces multiple changes across various files, primarily focusing on updates to components, configuration, and documentation. Key modifications include adjustments to the `generateStaticParams` function's return type, restructuring of metadata and viewport settings, refactoring of components like `Support` and `UserTwitterCard`, and the introduction of new components such as `CarbonAd` and `Codeblock`. Additionally, several package.json files have been updated to reflect dependency changes and version bumps. The overall aim is to enhance functionality, improve documentation clarity, and streamline component behavior. ## Changes | File Path | Change Summary | |--------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------| | `apps/docs/app/docs/[[...slug]]/page.tsx` | Updated `generateStaticParams` return type from `Promise` to `Promise<{slug: string[]}[]>`. | | `apps/docs/app/layout.tsx` | Removed `themeColor` and `viewport` from `metadata`; added new `viewport` object with specific properties. | | `apps/docs/app/page.tsx` | Changed `Support` import to default import; removed `getData` function and its call; wrapped `Support` in `Suspense`. | | `apps/docs/app/providers.tsx` | Updated `ThemeProviderProps` import; modified PostHog initialization to check for production environment. | | `apps/docs/components/demos/user-twitter-card.tsx` | Removed `FC` type annotation; simplified component definition. | | `apps/docs/components/docs/components/code-demo/react-live-demo.tsx` | Changed import alias from `Components` to `NextUI`; updated `scope` object. | | `apps/docs/components/marketing/support-client.tsx` | Introduced new `Support` component for displaying sponsorship options. | | `apps/docs/components/marketing/support.tsx` | Refactored to an async function that fetches sponsors using `getAllSponsors`. | | `apps/docs/components/theme-switch.tsx` | Introduced `initialTheme` variable for SSR detection; updated `isSelected` and `aria-label` logic. | | `apps/docs/config/routes.json` | Added new route for "Design Principles"; removed previous entry for the same. | | `apps/docs/content/blog/v2.6.0.mdx` | Updated image paths and enhanced the introduction section with new features and breaking changes. | | `apps/docs/next.config.js` | Removed `swcMinify`; updated `images` configuration from `domains` to `remotePatterns`. | | `apps/docs/package.json` | Updated several dependencies to exact versions; added new `mdx-bundler` dependency. | | `apps/docs/styles/globals.css` | Reintroduced Tailwind CSS directives; commented out experimental styles. | | `packages/components/navbar/package.json` | Updated version to `2.1.0`; removed `react-remove-scroll` dependency. | | `packages/components/navbar/src/navbar-menu.tsx` | Removed `MenuWrapper` component; simplified rendering logic. | | `packages/components/navbar/src/use-navbar.ts` | Added `shouldBlockScroll` property to `Props` interface; updated default value in `useNavbar`. | | `packages/components/popover/package.json` | Updated version to `2.2.0`; removed `react-remove-scroll` dependency. | | `packages/components/popover/src/popover-content.tsx` | Removed `RemoveScroll` from rendering logic; simplified structure. | | `packages/components/popover/src/use-popover.ts` | Integrated `usePreventScroll` for managing scroll behavior based on `shouldBlockScroll`. | | `packages/components/tooltip/package.json` | Updated version to `2.1.0`; removed `react` and `react-dom` from `devDependencies`. | | `apps/docs/components/docs/components/codeblock.tsx` | Introduced new `Codeblock` component for syntax-highlighted code blocks. | | `apps/docs/components/docs/components/package-managers.tsx` | Introduced new `PackageManagers` component for displaying package manager commands. | | `apps/docs/components/mdx-content.tsx` | Updated `MDXContent` to utilize `useMDXComponent` hook for dynamic rendering. | | `apps/docs/app/examples/perf/client-page.tsx` | Introduced new `NextUIPerf` component for performance testing interface. | | `apps/docs/app/examples/perf/page.tsx` | Renamed export from `NextUIPerf` to `PerfPage`; simplified structure to wrap `ClientPage` in `Suspense`. | | `apps/docs/components/ads/carbon-ad/carbon-ad.tsx` | Introduced new `CarbonAd` component for managing ethical and carbon ads. | ## Possibly related PRs - **#2544**: Modifies the `generateStaticParams` function in the `page.tsx` file. - **#3035**: Updates to the `cli-api.mdx` file, affecting parameter generation. - **#3307**: Refactors the `Popover` component, impacting component behavior. - **#3512**: Focuses on version bumps across various components. - **#3582**: Enhances logic for React imports, affecting component handling. - **#3595**: Introduces a new feature for the `Popover` component. - **#3631**: Adds missing package manager tabs in documentation. - **#3650**: Improves documentation for package managers. - **#3731**: Enhances installation documentation. - **#3815**: Updates references from Twitter to X in documentation. - **#3922**: Revises the code block structure, related to code handling. - **#4030**: Fixes an invalid link in the documentation. - **#4204**: Addresses issues in the React core package. ## Suggested labels `📋 Scope : Docs` ## Suggested reviewers - wingkwong - ryo-manba --- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
\n- changeset-bot: ### ⚠️ No Changeset found Latest commit: c1c05ecc0834b12ff63db5cd56d0a77c1512c22d Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**
This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md). [Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/nextui-org/nextui/new/feat/next15?filename=.changeset/tough-stingrays-turn.md&value=---%0A%22%40nextui-org%2Fdocs%22%3A%20patch%0A%22%40nextui-org%2Fnavbar%22%3A%20patch%0A%22%40nextui-org%2Fpopover%22%3A%20patch%0A%22%40nextui-org%2Ftooltip%22%3A%20patch%0A---%0A%0Afeat%3A%20nextjs%2015%20migration%20%5Bdocs%5D%0A) \n Files Changed: - apps/docs/app/docs/[[...slug]]/page.tsx (modified, 2 changes)\n Patch: @@ -71,7 +71,7 @@ export async function generateMetadata({params}: DocPageProps): Promise { +export async function generateStaticParams(): Promise<{slug: string[]}[]> { return allDocs.map((doc) => ({ slug: doc.slugAsParams.split("/"), }));\n- apps/docs/app/examples/perf/client-page.tsx (added, 561 changes)\n Patch: @@ -0,0 +1,561 @@ +"use client"; + +import { + RadioGroup, + Radio, + Button, + Accordion, + Tabs, + Textarea, + Input, + Tab, + Avatar, + Select, + SelectItem, + AccordionItem, + Pagination, + extendVariants, + PaginationItem, +} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; +import {useEffect, useMemo, useRef, useState} from "react"; +import {useSearchParams} from "next/navigation"; + +import {SearchLinearIcon} from "@/components/icons"; + +const MyRadioGroup = () => { + const [radio, setRadio] = useState("1"); + + return ( + + Radio 1 + Radio 2 + Radio 3 + Radio 4 + Radio 5 + Radio 6 + Radio 7 + Radio 8 + Radio 9 + Radio 10 + Radio 11 + Radio 12 + Radio 13 + Radio 14 + Radio 15 + Radio 16 + Radio 17 + Radio 18 + Radio 19 + Radio 20 + Radio 21 + Radio 22 + Radio 23 + Radio 24 + Radio 25 + Radio 26 + Radio 27 + Radio 28 + Radio 29 + Radio 30 + Radio 31 + Radio 32 + Radio 33 + Radio 34 + Radio 35 + Radio 36 + Radio 37 + Radio 38 + Radio 39 + Radio 40 + Radio 41 + Radio 42 + Radio 43 + Radio 44 + Radio 45 + Radio 46 + Radio 47 + Radio 48 + Radio 49 + Radio 50 + Radio 51 + Radio 52 + Radio 53 + Radio 54 + Radio 55 + Radio 56 + Radio 57 + Radio 58 + Radio 59 + Radio 60 + Radio 61 + Radio 62 + + ); +}; + +const MyInput = extendVariants(Input, { + variants: { + color: { + stone: { + inputWrapper: [ + "bg-zinc-100", + "border", + "shadow", + "transition-colors", + "focus-within:bg-zinc-100", + "data-[hover=true]:border-zinc-600", + "data-[hover=true]:bg-zinc-100", + "group-data-[focus=true]:border-zinc-600", + // dark theme + "dark:bg-zinc-900", + "dark:border-zinc-800", + "dark:data-[hover=true]:bg-zinc-900", + "dark:focus-within:bg-zinc-900", + ], + input: [ + "text-zinc-800", + "placeholder:text-zinc-600", + // dark theme + "dark:text-zinc-400", + "dark:placeholder:text-zinc-600", + ], + }, + }, + size: { + xs: { + inputWrapper: "h-6 min-h-6 px-1", + input: "text-tiny", + }, + md: { + inputWrapper: "h-10 min-h-10", + input: "text-small", + }, + xl: { + inputWrapper: "h-14 min-h-14", + input: "text-medium", + }, + }, + radius: { + xs: { + inputWrapper: "rounded", + }, + sm: { + inputWrapper: "rounded-[4px]", + }, + }, + textSize: { + base: { + input: "text-base", + }, + }, + removeLabel: { + true: { + label: "hidden", + }, + false: {}, + }, + }, + defaultVariants: { + color: "stone", + textSize: "base", + removeLabel: true, + }, +}); + +const MyButton2 = extendVariants(Button, { + variants: { + color: { + foreground: + "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80", + }, + isScalable: { + true: "scale-125", + false: "", + }, + size: { + xl: "size--xl", + "2xl": "size--2xl", + }, + mySize: { + lg: "px-12 py-6 text-lg", + xl: "px-12 py-6 text-xl", + }, + }, + defaultVariants: { + color: "foreground", + }, +}); + +const usersData = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function NextUIPerf() { + const [textA, setTextA] = useState(""); + const [textB, setTextB] = useState(""); + const [textC, setTextC] = useState(""); + const [isOpen, setIsOpen] = useState(false); + const [inputValue, setInputValue] = useState(); + const [selectedKey, setSelectedKey] = useState(""); + + const searchParams = useSearchParams(); + + const page = Number(searchParams.get("page")); + + let {startsWith} = useFilter({sensitivity: "base"}); + + const filteredItems = inputValue + ? usersData.filter((item) => startsWith(item.name, inputValue)) + : usersData; + + const inputRef = useRef(null); + + useEffect(() => { + isOpen && inputRef?.current?.focus(); + }, [isOpen]); + + const handleSelectionChange = (e: React.ChangeEvent) => { + setSelectedKey(e.target.value); + }; + + const topContent = useMemo(() => { + return ( + } + type="text" + onValueChange={setInputValue} + /> + ); + }, [inputRef, selectedKey, isOpen]); + + return ( +
+ + + + + Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui + reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur + eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco + ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. + Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in + cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim + incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis + aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum. + Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis + veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia. + Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur + adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea + enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim. + Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam + elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat + nostrud. Tempor sint Lorem est culpa do. + + + Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui + reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur + eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco + ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. + Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in + cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim + + + Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui + reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur + eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco + ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. + Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in + + + + +