@@ -40,7 +26,9 @@ export default async function Home() { - + Loading...}> + + \n- apps/docs/app/providers.tsx (modified, 4 changes)\n Patch: @@ -5,7 +5,7 @@ import type {ReactNode} from "react"; import * as React from "react"; import {NextUIProvider} from "@nextui-org/react"; import {ThemeProvider as NextThemesProvider} from "next-themes"; -import {ThemeProviderProps} from "next-themes/dist/types"; +import {ThemeProviderProps} from "next-themes"; import {useRouter} from "next/navigation"; import {useEffect} from "react"; import posthog from "posthog-js"; @@ -23,7 +23,7 @@ export function Providers({children, themeProps}: ProvidersProps) { const ProviderWrapper = ({children}: {children: ReactNode}) => { useEffect(() => { - if (typeof window !== "undefined") { + if (typeof window !== "undefined" && __PROD__) { posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { api_host: "/ingest", person_profiles: "identified_only",\n- apps/docs/components/demos/user-twitter-card.tsx (modified, 6 changes)\n Patch: @@ -1,15 +1,14 @@ "use client"; -import {useState, FC} from "react"; +import {useState} from "react"; import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react"; import {clsx} from "@nextui-org/shared-utils"; -import NextImage from "next/image"; interface UserTwitterCardProps { className?: string; } -export const UserTwitterCard: FC = ({className}) => { +export const UserTwitterCard = ({className}: UserTwitterCardProps) => { const [isFollowed, setIsFollowed] = useState(false); return ( @@ -18,7 +17,6 @@ export const UserTwitterCard: FC = ({className}) => {

, + href: "https://opencollective.com/nextui", + isExternal: true, + }, + { + title: "Patreon", + description: "Sponsor the creator, Junior Garcia.", + icon: , + href: "https://www.patreon.com/jrgarciadev?fan_landing=true", + isExternal: true, + }, +]; + +const SONAR_PULSE_SIZE = 80; +const SONAR_PULSE_CIRCLES_COUNT = 4; +const SONAR_PULSE_RADIUS = 130; + +const getSponsorName = (sponsor: Sponsor) => { + if (!sponsor.name) { + return ""; + } + + return sponsor.name.slice(0, 2).toUpperCase(); +}; + +const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => { + let size: AvatarProps["size"] = "md"; + const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); + + switch (tier) { + case SPONSOR_TIERS.BRONZE: + size = isMobile ? "sm" : "md"; + break; + case SPONSOR_TIERS.SILVER: + size = isMobile ? "sm" : "md"; + break; + case SPONSOR_TIERS.GOLD: + size = isMobile ? "md" : "lg"; + break; + case SPONSOR_TIERS.PLATINUM: + size = isMobile ? "md" : "lg"; + break; + default: + size = isMobile ? "sm" : "md"; + } + + return size; +}; + +const getSponsorColor = (sponsor: Sponsor) => { + const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); + + return SPONSOR_COLORS[tier] || "default"; +}; + +const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => { + const angle = (index * 360) / sponsors.length; + const radius = SONAR_PULSE_RADIUS; + + // position the avatar randomly inside the sonar pulse + const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius); + + const x = randomRadius * Math.cos((angle * Math.PI) / 180); + const y = randomRadius * Math.sin((angle * Math.PI) / 180); + + return { + transform: `translate(${x}px, ${y}px)`, + }; +}; + +export const Support: FC = ({sponsors = []}) => { + const sonarRef = useRef(null); + const isMobile = useIsMobile(); + const posthog = usePostHog(); + + const handleExternalLinkClick = (href: string) => { + if (!href) return; + window.open(href, "_blank"); + }; + + const handleBecomeSponsor = () => { + posthog.capture("Support - Become a sponsor", { + action: "click", + category: "landing-page", + }); + + handleExternalLinkClick(supportAccounts[0].href); + }; + const renderSponsors = useMemo(() => { + if (!sponsors.length) return null; + + return ( +

+ {sponsors.map((sponsor, index) => ( + handleExternalLinkClick(sponsor["website"] || sponsor["profile"])} + /> + ))} +

+ ); + }, [isMobile, sponsors]); + + return ( +

Support NextUI

+ +

+ Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your + contributions will help to make NextUI better. +

+ + +

+ + + + } + playState="running" + size={SONAR_PULSE_SIZE} + > + {renderSponsors} + +

+ ); +};\n- apps/docs/components/marketing/support.tsx (modified, 220 changes)\n Patch: @@ -1,211 +1,21 @@ -"use client"; +import {Support as SupportClient} from "./support-client"; -import {FC, useMemo, useRef} from "react"; -import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react"; -import {clamp} from "@nextui-org/shared-utils"; -import {usePostHog} from "posthog-js/react"; +import {getAllSponsors} from "@/utils/get-all-sponsors"; -import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives"; +async function getData() { + try { + const sponsors = await getAllSponsors(); -import {FeaturesGrid} from "./features-grid"; - -import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons"; -import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors"; -import {SonarPulse} from "@/components/sonar-pulse"; -import {useIsMobile} from "@/hooks/use-media-query"; - -export interface SupportProps { - sponsors: Sponsor[]; -} - -const supportAccounts = [ - { - title: "Open Collective", - description: "Sponsor the NextUI maintainers.", - icon: , - href: "https://opencollective.com/nextui", - isExternal: true, - }, - { - title: "Patreon", - description: "Sponsor the creator, Junior Garcia.", - icon: , - href: "https://www.patreon.com/jrgarciadev?fan_landing=true", - isExternal: true, - }, -]; - -const SONAR_PULSE_SIZE = 80; -const SONAR_PULSE_CIRCLES_COUNT = 4; -const SONAR_PULSE_RADIUS = 130; - -const getSponsorName = (sponsor: Sponsor) => { - if (!sponsor.name) { - return ""; + return { + sponsors, + }; + } catch (error) { + throw new Error("Failed to fetch data"); } +} - return sponsor.name.slice(0, 2).toUpperCase(); -}; - -const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => { - let size: AvatarProps["size"] = "md"; - const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); - - switch (tier) { - case SPONSOR_TIERS.BRONZE: - size = isMobile ? "sm" : "md"; - break; - case SPONSOR_TIERS.SILVER: - size = isMobile ? "sm" : "md"; - break; - case SPONSOR_TIERS.GOLD: - size = isMobile ? "md" : "lg"; - break; - case SPONSOR_TIERS.PLATINUM: - size = isMobile ? "md" : "lg"; - break; - default: - size = isMobile ? "sm" : "md"; - } - - return size; -}; - -const getSponsorColor = (sponsor: Sponsor) => { - const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); - - return SPONSOR_COLORS[tier] || "default"; -}; - -const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => { - const angle = (index * 360) / sponsors.length; - const radius = SONAR_PULSE_RADIUS; - - // position the avatar randomly inside the sonar pulse - const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius); - - const x = randomRadius * Math.cos((angle * Math.PI) / 180); - const y = randomRadius * Math.sin((angle * Math.PI) / 180); - - return { - transform: `translate(${x}px, ${y}px)`, - }; -}; - -export const Support: FC = ({sponsors = []}) => { - const sonarRef = useRef(null); - const isMobile = useIsMobile(); - const posthog = usePostHog(); - - const handleExternalLinkClick = (href: string) => { - if (!href) return; - window.open(href, "_blank"); - }; - - const handleBecomeSponsor = () => { - posthog.capture("Support - Become a sponsor", { - action: "click", - category: "landing-page", - }); - - handleExternalLinkClick(supportAccounts[0].href); - }; - const renderSponsors = useMemo(() => { - if (!sponsors.length) return null; - - return ( -

- {sponsors.map((sponsor, index) => ( - handleExternalLinkClick(sponsor["website"] || sponsor["profile"])} - /> - ))} -

- ); - }, [isMobile, sponsors]); +export default async function Support() { + const data = await getData(); - return ( -

Support NextUI

- -

- Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your - contributions will help to make NextUI better. -

- - -

- - - - } - playState="running" - size={SONAR_PULSE_SIZE} - > - {renderSponsors} - -

- ); -}; + return ; +}\n- apps/docs/components/theme-switch.tsx (modified, 6 changes)\n Patch: @@ -20,6 +20,8 @@ export const ThemeSwitch: FC = ({className, classNames}) => { const isSSR = useIsSSR(); const posthog = usePostHog(); + const initialTheme = isSSR ? "light" : theme; + const onChange = () => { theme === "light" ? setTheme("dark") : setTheme("light"); @@ -31,8 +33,8 @@ export const ThemeSwitch: FC = ({className, classNames}) => { }; const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({ - isSelected: theme === "light", - "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`, + isSelected: initialTheme === "light", + "aria-label": `Switch to ${initialTheme === "light" ? "dark" : "light"} mode`, onChange, }); \n- apps/docs/config/routes.json (modified, 12 changes)\n Patch: @@ -12,6 +12,12 @@ "keywords": "introduction, nextui", "path": "/docs/guide/introduction.mdx" }, + { + "key": "design-principles", + "title": "Design Principles", + "keywords": "design principles, nextui", + "path": "/docs/guide/design-principles.mdx" + }, { "key": "installation", "title": "Installation", @@ -24,12 +30,6 @@ "keywords": "cli, command line interface", "path": "/docs/guide/cli.mdx" }, - { - "key": "design-principles", - "title": "Design Principles", - "keywords": "design principles, nextui", - "path": "/docs/guide/design-principles.mdx" - }, { "key": "routing", "title": "Routing",\n- apps/docs/content/blog/v2.6.0.mdx (modified, 4 changes)\n Patch: @@ -2,7 +2,7 @@ title: "NextUI v2.6.0 🔥" description: "NextUI v2.6.0 includes 4 new components, React 19 & Next.js 15 support, and lots of bug fixes and improvements." date: "2024-12-03" -image: "/blog/v2.6.0.jpg" +image: "/blog/v2.4.0.jpg" tags: ["nextui", "v2.6.0", "release", "bug fixes", "improvements", "animations"] author: name: "Junior Garcia" @@ -14,7 +14,7 @@ author: import {formContent} from "@/content/components/form"; NextUI v2.6.0

{\n- apps/docs/package.json (modified, 76 changes)\n Patch: @@ -3,7 +3,7 @@ "version": "2.0.0", "private": true, "scripts": { - "dev": "rimraf .contentlayer && concurrently \"contentlayer2 dev\" \"next dev\"", + "dev": "rimraf .contentlayer && concurrently \"contentlayer2 dev\" \"next dev --turbopack\"", "build": "contentlayer2 build && next build ", "build:analyze": "ANALYZE=true next build", "start": "next start", @@ -18,8 +18,8 @@ "dependencies": { "@codesandbox/sandpack-react": "^2.6.4", "@emotion/is-prop-valid": "^1.3.1", - "@iconify/icons-solar": "^1.2.3", - "@iconify/react": "^4.1.1", + "@iconify/icons-solar": "1.2.3", + "@iconify/react": "5.0.2", "@internationalized/date": "3.5.6", "@mapbox/rehype-prism": "^0.6.0", "@nextui-org/aria-utils": "workspace:*", @@ -52,57 +52,59 @@ "@react-stately/layout": "3.13.9", "@react-stately/tree": "3.8.1", "@rehooks/local-storage": "^2.4.5", + "@tanstack/react-virtual": "3.10.9", "canvas-confetti": "^1.9.2", "cmdk": "^0.2.0", - "color2k": "^2.0.2", - "contentlayer2": "^0.5.1", - "date-fns": "^2.30.0", - "framer-motion": "11.9.0", - "geist": "^1.3.1", + "color2k": "2.0.3", + "contentlayer2": "0.5.3", + "date-fns": "4.1.0", + "framer-motion": "11.11.13", + "geist": "1.3.1", "github-slugger": "^2.0.0", "gray-matter": "^4.0.3", "hast-util-to-html": "9.0.3", "marked": "^5.1.0", - "match-sorter": "^6.3.1", - "mini-svg-data-uri": "^1.4.3", - "mitt": "3.0.0", - "next": "13.5.1", - "next-contentlayer2": "^0.5.1", - "next-themes": "^0.2.1", + "match-sorter": "8.0.0", + "mini-svg-data-uri": "1.4.4", + "mitt": "3.0.1", + "next": "15.0.3", + "next-contentlayer2": "0.5.3", + "next-themes": "0.4.3", "nprogress": "^0.2.0", "parse-numeric-range": "1.2.0", - "posthog-js": "1.187.1", + "posthog-js": "1.184.1", "prism-react-renderer": "^1.2.1", "querystring": "^0.2.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "18.2.0", + "react-dom": "18.2.0", "react-hook-form": "^7.51.3", "react-icons": "^4.10.1", - "react-live": "^2.3.0", + "react-live": "^4.1.8", "react-multi-ref": "^1.0.1", "react-wrap-balancer": "^1.0.0", "refractor": "3.3.1", "rehype": "13.0.2", "rehype-parse": "9.0.1", "rehype-pretty-code": "^0.14.0", - "rehype-slug": "^6.0.0", + "rehype-slug": "6.0.0", "remark": "^15.0.1", - "remark-gfm": "^4.0.0", - "rss": "^1.2.2", - "scroll-into-view-if-needed": "3.0.10", + "remark-gfm": "4.0.0", + "rss": "1.2.2", + "scroll-into-view-if-needed": "3.1.0", "sharp": "^0.32.1", "shelljs": "^0.8.4", - "swr": "^2.2.1", + "swr": "2.2.5", "tailwind-variants": "^0.1.20", "unified": "^11.0.5", - "unist-util-visit": "^5.0.0", - "usehooks-ts": "^2.9.1", - "zustand": "^4.3.8" + "unist-util-visit": "5.0.0", + "usehooks-ts": "3.1.0", + "zustand": "5.0.1" }, "devDependencies": { "@docusaurus/utils": "2.0.0-beta.3", - "@next/bundle-analyzer": "^13.4.6", - "@next/env": "^13.4.12", + "@next/bundle-analyzer": "15.0.3", + "@next/env": "15.0.3", + "mdx-bundler": "10.0.3", "@react-types/calendar": "3.4.10", "@react-types/datepicker": "3.8.3", "@react-types/shared": "3.25.0", @@ -116,22 +118,28 @@ "@types/react": "18.2.8", "@types/react-dom": "18.2.4", "@types/refractor": "^3.0.2", - "@types/rss": "^0.0.30", + "@types/rss": "0.0.32", "@types/shelljs": "^0.8.9", "@types/uuid": "^8.3.1", "algoliasearch": "^4.10.3", - "autoprefixer": "^10.4.14", + "autoprefixer": "10.4.20", "dotenv": "^16.0.1", "esbuild-plugin-raw": "0.1.8", - "eslint-config-next": "^13.5.1", + "eslint-config-next": "15.0.3", "markdown-toc": "^1.2.0", - "next-sitemap": "^4.1.8", + "next-sitemap": "4.2.3", "node-fetch": "^3.2.10", - "postcss": "^8.4.21", + "postcss": "8.4.49", "prettier": "^2.7.1", - "tailwindcss": "^3.4.0", + "tailwindcss": "3.4.14", "tsx": "^3.8.2", "typescript": "^5.5.0", "uuid": "^8.3.2" + }, + "pnpm": { + "overrides": { + "react": "18.2.0", + "react-dom": "18.2.0" + } } }\n- apps/docs/styles/globals.css (modified, 8 changes)\n Patch: @@ -1,11 +1,11 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - @import 'prism.css'; @import 'nprogress.css'; @import 'ads.css'; +@tailwind base; +@tailwind components; +@tailwind utilities; + html { font-size: 16px; padding: 0px !important;\n- package.json (modified, 4 changes)\n Patch: @@ -142,8 +142,8 @@ }, "pnpm": { "overrides": { - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "18.2.0", + "react-dom": "18.2.0", "@changesets/get-github-info": "0.6.0" } },\n- packages/components/autocomplete/src/autocomplete.tsx (modified, 31 changes)\n Patch: @@ -7,6 +7,7 @@ import {Button} from "@nextui-org/button"; import {Input} from "@nextui-org/input"; import {ForwardedRef, ReactElement} from "react"; import {AnimatePresence} from "framer-motion"; +import * as React from "react"; import {UseAutocompleteProps, useAutocomplete} from "./use-autocomplete"; @@ -49,18 +50,24 @@ const Autocomplete = forwardRef(function Autocomplete( ) : null; return ( - - - {endContent || } - -

- } - /> - {disableAnimation ? popoverContent : {popoverContent}} - + <> + {React.createElement( + Component, + getBaseProps(), + <> + + {endContent || } + + + } + /> + {disableAnimation ? popoverContent : {popoverContent}} + , + )} + ); }) as (props: AutocompleteProps) => ReactElement; \n- packages/components/autocomplete/src/use-autocomplete.ts (modified, 5 changes)\n Patch: @@ -7,7 +7,7 @@ import {autocomplete} from "@nextui-org/theme"; import {useFilter} from "@react-aria/i18n"; import {FilterFn, useComboBoxState} from "@react-stately/combobox"; import {ReactRef, useDOMRef} from "@nextui-org/react-utils"; -import {ReactNode, useEffect, useMemo, useRef} from "react"; +import {ElementType, ReactNode, useEffect, useMemo, useRef} from "react"; import {ComboBoxProps} from "@react-types/combobox"; import {PopoverProps} from "@nextui-org/popover"; import {ListboxProps} from "@nextui-org/listbox"; @@ -377,7 +377,7 @@ export function useAutocomplete(originalProps: UseAutocomplete }; } - const Component = as || "div"; + const Component: ElementType = as || "div"; const slots = useMemo( () => @@ -537,6 +537,7 @@ export function useAutocomplete(originalProps: UseAutocomplete }); return { + as, Component, inputRef, label,\n- packages/components/date-picker/src/date-range-picker-field.tsx (modified, 40 changes)\n Patch: @@ -13,6 +13,7 @@ import {DateInputSegment} from "@nextui-org/date-input"; import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils"; import {useLocale} from "@react-aria/i18n"; import {mergeProps} from "@react-aria/utils"; +import * as React from "react"; type NextUIBaseProps = Omit< HTMLNextUIProps<"div">, @@ -54,29 +55,34 @@ const DateRangePickerField = forwardRef(function DateRangePickerField - {state.segments.map((segment, i) => ( - - ))} - - + <> + {React.createElement( + Component, + {...mergeProps(fieldProps, filterDOMProps(otherProps)), ref: {domRef}}, + <> + {state.segments.map((segment, i) => ( + + ))} + , + )} + ); }) as (props: DateRangePickerFieldProps) => ReactElement; \n- packages/components/navbar/package.json (modified, 26 changes)\n Patch: @@ -34,41 +34,41 @@ "postpack": "clean-package restore" }, "peerDependencies": { - "react": ">=18 || >=19.0.0-rc.0", - "react-dom": ">=18 || >=19.0.0-rc.0", - "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", + "@nextui-org/system": ">=2.3.0-beta.0", "@nextui-org/theme": ">=2.3.0-beta.0", - "@nextui-org/system": ">=2.3.0-beta.0" + "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", + "react": ">=18 || >=19.0.0-rc.0", + "react-dom": ">=18 || >=19.0.0-rc.0" }, "dependencies": { - "@nextui-org/shared-utils": "workspace:*", - "@nextui-org/react-utils": "workspace:*", + "@nextui-org/dom-animation": "workspace:*", "@nextui-org/framer-utils": "workspace:*", + "@nextui-org/react-utils": "workspace:*", + "@nextui-org/shared-utils": "workspace:*", "@nextui-org/use-aria-toggle-button": "workspace:*", "@nextui-org/use-scroll-position": "workspace:*", - "@nextui-org/dom-animation": "workspace:*", "@react-aria/focus": "3.18.4", "@react-aria/interactions": "3.22.4", "@react-aria/overlays": "3.23.4", "@react-aria/utils": "3.26.0", "@react-stately/toggle": "3.7.8", "@react-stately/utils": "3.10.4", - "react-remove-scroll": "^2.5.6" + "react-remove-scroll": "^2.6.0" }, "devDependencies": { - "@nextui-org/theme": "workspace:*", - "@nextui-org/system": "workspace:*", "@nextui-org/avatar": "workspace:*", "@nextui-org/button": "workspace:*", "@nextui-org/dropdown": "workspace:*", "@nextui-org/input": "workspace:*", "@nextui-org/link": "workspace:*", "@nextui-org/shared-icons": "workspace:*", - "framer-motion": "11.9.0", - "react-lorem-component": "0.13.0", + "@nextui-org/system": "workspace:*", + "@nextui-org/theme": "workspace:*", "clean-package": "2.2.0", + "framer-motion": "11.9.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-lorem-component": "0.13.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file\n- packages/components/navbar/src/navbar-brand.tsx (modified, 11 changes)\n Patch: @@ -1,6 +1,7 @@ import {forwardRef, HTMLNextUIProps} from "@nextui-org/system"; import {useDOMRef} from "@nextui-org/react-utils"; import {clsx} from "@nextui-org/shared-utils"; +import * as React from "react"; import {useNavbarContext} from "./navbar-context"; @@ -19,9 +20,13 @@ const NavbarBrand = forwardRef<"div", NavbarBrandProps>((props, ref) => { const styles = clsx(classNames?.brand, className); return ( - - {children} - + <> + {React.createElement( + Component, + {ref: domRef, className: slots.brand?.({class: styles}), ...otherProps}, + <>{children}, + )} + ); }); \n- packages/components/navbar/src/navbar-content.tsx (modified, 21 changes)\n Patch: @@ -1,6 +1,7 @@ import {forwardRef, HTMLNextUIProps} from "@nextui-org/system"; import {useDOMRef} from "@nextui-org/react-utils"; import {clsx} from "@nextui-org/shared-utils"; +import * as React from "react"; import {useNavbarContext} from "./navbar-context"; @@ -27,14 +28,18 @@ const NavbarContent = forwardRef<"ul", NavbarContentProps>((props, ref) => { const styles = clsx(classNames?.content, className); return ( - - {children} - + <> + {React.createElement( + Component, + { + ref: domRef, + className: slots.content?.({class: styles}), + "data-justify": justify, + ...otherProps, + }, + <>{children}, + )} + ); }); \n- packages/components/navbar/src/navbar-item.tsx (modified, 21 changes)\n Patch: @@ -1,6 +1,7 @@ import {forwardRef, HTMLNextUIProps} from "@nextui-org/system"; import {useDOMRef} from "@nextui-org/react-utils"; import {clsx, dataAttr} from "@nextui-org/shared-utils"; +import * as React from "react"; import {useNavbarContext} from "./navbar-context"; @@ -24,14 +25,18 @@ const NavbarItem = forwardRef<"li", NavbarItemProps>((props, ref) => { const styles = clsx(classNames?.item, className); return ( - - {children} - + <> + {React.createElement( + Component, + { + ref: domRef, + className: slots.item?.({class: styles}), + "data-active": dataAttr(isActive), + ...otherProps, + }, + <>{children}, + )} + ); }); \n- packages/components/navbar/src/navbar-menu-toggle.tsx (modified, 31 changes)\n Patch: @@ -7,6 +7,7 @@ import {useFocusRing} from "@react-aria/focus"; import {mergeProps} from "@react-aria/utils"; import {useHover} from "@react-aria/interactions"; import {useMemo, ReactNode} from "react"; +import * as React from "react"; import {useNavbarContext} from "./navbar-context"; @@ -74,18 +75,24 @@ const NavbarMenuToggle = forwardRef<"button", NavbarMenuToggleProps>((props, ref }, [srOnlyTextProp, isMenuOpen]); return ( - - {srOnlyText} - {child} - + <> + {React.createElement( + Component, + { + ref: domRef, + className: slots.toggle?.({class: toggleStyles}), + "data-focus-visible": dataAttr(isFocusVisible), + "data-hover": dataAttr(isHovered), + "data-open": dataAttr(isMenuOpen), + "data-pressed": dataAttr(isPressed), + ...mergeProps(buttonProps, focusProps, hoverProps, otherProps), + }, + <> + {srOnlyText} + {child} + , + )} + ); }); \n- packages/components/navbar/src/navbar.tsx (modified, 3 changes)\n Patch: @@ -2,6 +2,7 @@ import {forwardRef} from "@nextui-org/system"; import {pickChildren} from "@nextui-org/react-utils"; import {LazyMotion, m} from "framer-motion"; import {mergeProps} from "@react-aria/utils"; +import * as React from "react"; import {hideOnScrollVariants} from "./navbar-transitions"; import {UseNavbarProps, useNavbar} from "./use-navbar"; @@ -44,7 +45,7 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => { ) : ( - {content} + <>{React.createElement(Component, context.getBaseProps(), <>{content})} )} );\n- packages/components/popover/src/free-solo-popover.tsx (modified, 10 changes)\n Patch: @@ -92,7 +92,7 @@ FreeSoloPopoverWrapper.displayName = "NextUI.FreeSoloPopoverWrapper"; const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>( ({children, transformOrigin, disableDialogFocus = false, ...props}, ref) => { const { - Component, + as, state, placement, backdrop, @@ -144,7 +144,9 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>( return ( {!isNonModal && backdropContent} - + {React.createElement( + as || "div", + getPopoverProps(), ( {typeof children === "function" ? children(titleProps) : children} - - + , + )} ); },\n- packages/components/popover/src/popover-content.tsx (modified, 65 changes)\n Patch: @@ -9,6 +9,7 @@ import {m, LazyMotion} from "framer-motion"; import {HTMLNextUIProps} from "@nextui-org/system"; import {getTransformOrigins} from "@nextui-org/aria-utils"; import {useDialog} from "@react-aria/dialog"; +import * as React from "react"; import {usePopoverContext} from "./popover-context"; @@ -41,22 +42,19 @@ const PopoverContent = (props: PopoverContentProps) => { const dialogRef = useRef(null); const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef); - const dialogProps = getDialogProps({ - ref: dialogRef, - ...ariaDialogProps, - ...otherProps, - }); const Component = as || OverlayComponent || "div"; const content = ( <> {!isNonModal && } - -

+ {React.createElement( + Component, + getDialogProps({ref: dialogRef, ...ariaDialogProps, ...otherProps}), +

{typeof children === "function" ? children(titleProps) : children} -

- +

, + )} ); @@ -83,27 +81,34 @@ const PopoverContent = (props: PopoverContentProps) => { ); }, [backdrop, disableAnimation, getBackdropProps]); - const contents = ( - - {disableAnimation ? ( - content - ) : ( - - - {content} - - - )} - + const contents = React.createElement( + RemoveScroll as React.ComponentType, + { + enabled: shouldBlockScroll && isOpen, + removeScrollBar: false, + key: null, + }, + disableAnimation + ? content + : React.createElement( + LazyMotion, + {features: domAnimation}, + React.createElement( + m.div, + { + key: null, + animate: "enter", + exit: "exit", + initial: "initial", + style: { + ...getTransformOrigins(placement === "center" ? "top" : placement), + }, + variants: TRANSITION_VARIANTS.scaleSpringOpacity, + ...motionProps, + }, + content, + ), + ), ); return (\n- packages/components/popover/src/use-popover.ts (modified, 5 changes)\n Patch: @@ -2,7 +2,7 @@ import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@nextui-or import type {HTMLMotionProps} from "framer-motion"; import type {PressEvent} from "@react-types/shared"; -import {RefObject, Ref, useEffect} from "react"; +import {RefObject, Ref, useEffect, ElementType} from "react"; import {ReactRef, useDOMRef} from "@nextui-org/react-utils"; import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays"; import {useFocusRing} from "@react-aria/focus"; @@ -126,7 +126,7 @@ export function usePopover(originalProps: UsePopoverProps) { ...otherProps } = props; - const Component = as || "div"; + const Component = (as || "div") as ElementType; const domRef = useDOMRef(ref); @@ -307,6 +307,7 @@ export function usePopover(originalProps: UsePopoverProps) { }, [state.isOpen, domRef]); return { + as, state, Component, children,\n- packages/components/select/src/select.tsx (modified, 29 changes)\n Patch: @@ -10,6 +10,7 @@ import {ScrollShadow} from "@nextui-org/scroll-shadow"; import {cloneElement} from "react"; import {VisuallyHidden} from "@react-aria/visually-hidden"; import {AnimatePresence} from "framer-motion"; +import * as React from "react"; import {HiddenSelect} from "./hidden-select"; import {UseSelectProps, useSelect} from "./use-select"; @@ -130,18 +131,22 @@ const Select = forwardRef(function Select( {shouldLabelBeOutside ? labelContent : null}

- - {!shouldLabelBeOutside ? labelContent : null} -

- {startContent} - {renderSelectedItem} - {endContent && state.selectedItems && ( - , - )} - {endContent} -

- {renderIndicator} - + {React.createElement( + Component, + getTriggerProps(), + <> + {!shouldLabelBeOutside ? labelContent : null} +

+ {startContent} + {renderSelectedItem} + {endContent && state.selectedItems && ( + , + )} + {endContent} +

+ {renderIndicator} + , + )} {helperWrapper}

{disableAnimation ? popoverContent : {popoverContent}}\n- pnpm-lock.yaml (modified, 4303 changes)\n Patch: No patch available\n