diff --git a/.changeset/famous-mice-approve.md b/.changeset/famous-mice-approve.md deleted file mode 100644 index 0fbb5443fa..0000000000 --- a/.changeset/famous-mice-approve.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@nextui-org/pagination": patch ---- - -Fixed pagination missing animation (#3138) diff --git a/.changeset/giant-maps-bow.md b/.changeset/giant-maps-bow.md deleted file mode 100644 index 48be2c8cf9..0000000000 --- a/.changeset/giant-maps-bow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@nextui-org/shared-icons": patch ---- - -avoid passing non-DOM attributes to svg (#3184) diff --git a/.changeset/grumpy-scissors-jam.md b/.changeset/grumpy-scissors-jam.md deleted file mode 100644 index 10661786fd..0000000000 --- a/.changeset/grumpy-scissors-jam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@nextui-org/tabs": patch ---- - -Fixed incorrect content in tab panel (#3159) diff --git a/.changeset/healthy-clouds-refuse.md b/.changeset/healthy-clouds-refuse.md new file mode 100644 index 0000000000..a1f4cb1c86 --- /dev/null +++ b/.changeset/healthy-clouds-refuse.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/navbar": patch +--- + +Fix navbar menu breaking when a numerical height value is provided. The height value is now converted to pixels if it is a number. diff --git a/.changeset/lazy-comics-crash.md b/.changeset/lazy-comics-crash.md deleted file mode 100644 index 962030cc23..0000000000 --- a/.changeset/lazy-comics-crash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@nextui-org/select": patch ---- - -Add missing `data-invalid` attribute (#3149) diff --git a/.changeset/long-ducks-do.md b/.changeset/long-ducks-do.md new file mode 100644 index 0000000000..b956db24e4 --- /dev/null +++ b/.changeset/long-ducks-do.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/input": patch +--- + +syncs changes to ref value to internal (state) value (#3024, #3436) diff --git a/.changeset/moody-coats-sparkle.md b/.changeset/moody-coats-sparkle.md new file mode 100644 index 0000000000..5995b6d6e7 --- /dev/null +++ b/.changeset/moody-coats-sparkle.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +Fix skeleton overflow issue (#3214 #3670) diff --git a/.changeset/nice-beans-thank.md b/.changeset/nice-beans-thank.md new file mode 100644 index 0000000000..57bc0e5aba --- /dev/null +++ b/.changeset/nice-beans-thank.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/system-rsc": patch +--- + +added missing `StringToBoolean[]` (#3530) diff --git a/.changeset/red-ducks-greet.md b/.changeset/red-ducks-greet.md new file mode 100644 index 0000000000..b7fe7249cf --- /dev/null +++ b/.changeset/red-ducks-greet.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/link": patch +--- + +use `@nextui-org/use-aria-link` to suppress onClick deprecation warning (#3196) diff --git a/.changeset/silver-stingrays-brush.md b/.changeset/silver-stingrays-brush.md new file mode 100644 index 0000000000..991ed15f9e --- /dev/null +++ b/.changeset/silver-stingrays-brush.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +export default-layout in theme diff --git a/.changeset/slow-forks-nail.md b/.changeset/slow-forks-nail.md new file mode 100644 index 0000000000..4857a4c2c3 --- /dev/null +++ b/.changeset/slow-forks-nail.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/calendar": patch +"@nextui-org/theme": patch +--- + +fixed arrow keys order when html has dir="rtl" (#3641, #3642) diff --git a/.changeset/sweet-crabs-buy.md b/.changeset/sweet-crabs-buy.md new file mode 100644 index 0000000000..117aac5522 --- /dev/null +++ b/.changeset/sweet-crabs-buy.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +fixed the double click need in chrome for checkbox, switch and radiobuttons (#3528) diff --git a/.changeset/thirty-timers-press.md b/.changeset/thirty-timers-press.md deleted file mode 100644 index 64f0c14683..0000000000 --- a/.changeset/thirty-timers-press.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@nextui-org/select": patch ---- - -set empty string instead of undefined for unsetting value (#3156) diff --git a/.changeset/tough-peaches-live.md b/.changeset/tough-peaches-live.md deleted file mode 100644 index ceda7e97b6..0000000000 --- a/.changeset/tough-peaches-live.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@nextui-org/autocomplete": patch ---- - -Fix maximum update depth exceeded on Autocomplete component (#3094) diff --git a/.changeset/warm-planets-smile.md b/.changeset/warm-planets-smile.md new file mode 100644 index 0000000000..a45a98f667 --- /dev/null +++ b/.changeset/warm-planets-smile.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/dropdown": patch +--- + +fix(dropdown): respect closeOnSelect prop on DropdownItem (#2290) diff --git a/.eslintrc.json b/.eslintrc.json index d3067d4cf7..ad84de361e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -87,6 +87,7 @@ "prev": ["const", "let", "var"], "next": ["const", "let", "var"] } - ] + ], + "import/consistent-type-specifier-style": ["error", "prefer-top-level"] } } diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index f8829f8896..9be474eebb 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -28,7 +28,9 @@ body: description: | Please provide the version of NextUI you are using. You can find the version number in the package.json file. - placeholder: ex. 2.0.10 + For global installation, please state the version only. (e.g. 2.4.2) + For individual installation, please state the package name as well. (e.g. @nextui-org/button@2.0.34) + placeholder: ex. 2.4.2 validations: required: true - type: textarea diff --git a/.github/common-actions/install/action.yml b/.github/common-actions/install/action.yml index dced5a2648..1bf705d739 100644 --- a/.github/common-actions/install/action.yml +++ b/.github/common-actions/install/action.yml @@ -5,12 +5,10 @@ runs: using: composite steps: - name: Install dependencies - uses: pnpm/action-setup@v2.2.4 - with: - version: 8 + uses: pnpm/action-setup@v4 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" registry-url: "https://registry.npmjs.org" diff --git a/.github/workflows/QA.yaml b/.github/workflows/QA.yaml index 300cc699e4..6763deec1e 100644 --- a/.github/workflows/QA.yaml +++ b/.github/workflows/QA.yaml @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout branch - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install uses: ./.github/common-actions/install @@ -24,7 +24,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout branch - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install uses: ./.github/common-actions/install @@ -37,7 +37,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout branch - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install uses: ./.github/common-actions/install @@ -50,7 +50,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout branch - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install uses: ./.github/common-actions/install @@ -63,7 +63,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout branch - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install uses: ./.github/common-actions/install diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 622cd95656..9d364c0602 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -17,7 +17,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout branch - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install uses: ./.github/common-actions/install diff --git a/.github/workflows/sync-canary-to-main.yaml b/.github/workflows/sync-canary-to-main.yaml index 334ef507c6..c03f5cfde7 100644 --- a/.github/workflows/sync-canary-to-main.yaml +++ b/.github/workflows/sync-canary-to-main.yaml @@ -12,7 +12,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: fetch-depth: 0 # Ensure all history is fetched diff --git a/.nvmrc b/.nvmrc index b4749b4552..91e81cb2b7 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.x +20.x \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 816c570d4b..c531e733d0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,12 @@ "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" - } + }, + "tailwindCSS.experimental.configFile": { + "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"], + "apps/docs/tailwind.config.js": "apps/docs/**/*" + }, + "tailwindCSS.experimental.classRegex": [ + ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"] + ] } diff --git a/apps/docs/.sponsorsrc b/apps/docs/.sponsorsrc index 2ee4bd2785..e5c4397227 100644 --- a/apps/docs/.sponsorsrc +++ b/apps/docs/.sponsorsrc @@ -308,5 +308,47 @@ "twitter": null, "github": null, "website": "https://encur.me/" + }, + { + "MemberId": 569973, + "createdAt": "2024-05-29 17:51", + "type": "USER", + "role": "BACKER", + "tier": "Gold Sponsor 🥇", + "isActive": true, + "totalAmountDonated": 100, + "currency": "USD", + "lastTransactionAt": "2024-05-29 17:51", + "lastTransactionAmount": 100, + "profile": "https://opencollective.com/maxprilutskiy", + "name": "Replexica", + "company": "", + "description": null, + "image": "/sponsors/569973.jpg", + "email": null, + "newsletterOptIn": null, + "twitter": null, + "github": null, + "website": "https://replexica.com/?utm_source=nextui&utm_marketing=oss" + }, + { + "MemberId": 571230, + "createdAt": "2024-06-01 18:47", + "type": "ORGANIZATION", + "role": "BACKER", + "tier": "Gold Sponsor 🥇", + "isActive": true, + "totalAmountDonated": 100, + "currency": "USD", + "lastTransactionAt": "2024-06-01 18:47", + "lastTransactionAmount": 100, + "profile": "https://opencollective.com/coderabbit", + "name": "CodeRabbit", + "company": null, + "description": "CodeRabbit is an AI-driven context-aware code reviewer that provides line-by-line feedback and smart chat. ", + "image": "/sponsors/571230.jpg", + "twitter": null, + "github": null, + "website": "https://coderabbit.ai" } ] \ No newline at end of file diff --git a/apps/docs/app/blog/layout.tsx b/apps/docs/app/blog/layout.tsx index 0b94da259e..81b173e1f0 100644 --- a/apps/docs/app/blog/layout.tsx +++ b/apps/docs/app/blog/layout.tsx @@ -1,5 +1,7 @@ import {Image} from "@nextui-org/react"; +import {ScriptProviders} from "@/components/scripts/script-providers"; + interface DocsLayoutProps { children: React.ReactNode; } @@ -22,6 +24,8 @@ export default function DocsLayout({children}: DocsLayoutProps) { > docs right background + + ); } diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx index 561443d9e7..782bb7214e 100644 --- a/apps/docs/app/docs/layout.tsx +++ b/apps/docs/app/docs/layout.tsx @@ -2,6 +2,7 @@ import {Image} from "@nextui-org/react"; import manifest from "@/config/routes.json"; import {DocsSidebar} from "@/components/docs/sidebar"; +import {ScriptProviders} from "@/components/scripts/script-providers"; interface DocsLayoutProps { children: React.ReactNode; @@ -30,6 +31,8 @@ export default function DocsLayout({children}: DocsLayoutProps) { > docs right background + + ); } diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx index de9e89f43f..79ab457b0a 100644 --- a/apps/docs/app/examples/perf/page.tsx +++ b/apps/docs/app/examples/perf/page.tsx @@ -246,7 +246,7 @@ const usersData = [ age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", - status: "Active", + status: "active", }, { id: 7, diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx index 813532048a..dbb19e9174 100644 --- a/apps/docs/app/examples/table/custom-styles/page.tsx +++ b/apps/docs/app/examples/table/custom-styles/page.tsx @@ -112,7 +112,7 @@ const users = [ age: "29", avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", email: "brian.kim@example.com", - status: "Active", + status: "active", }, { id: 7, diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/apps/docs/app/examples/table/use-case/page.tsx index 7aa18ed3f9..b94ccf30b7 100644 --- a/apps/docs/app/examples/table/use-case/page.tsx +++ b/apps/docs/app/examples/table/use-case/page.tsx @@ -112,7 +112,7 @@ const users = [ age: "29", avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", email: "brian.kim@example.com", - status: "Active", + status: "active", }, { id: 7, diff --git a/apps/docs/app/figma/page.tsx b/apps/docs/app/figma/page.tsx index a3e82595ce..95217bdfbb 100644 --- a/apps/docs/app/figma/page.tsx +++ b/apps/docs/app/figma/page.tsx @@ -2,6 +2,7 @@ import {Image} from "@nextui-org/react"; import {Blockquote} from "@/components/docs/components/blockquote"; import {FigmaButton} from "@/components/figma-button"; +import {ScriptProviders} from "@/components/scripts/script-providers"; export default function FigmaPage() { return ( @@ -43,6 +44,8 @@ export default function FigmaPage() { > docs right background + + ); } diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index 0541197205..bc2e47c511 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -12,7 +12,6 @@ import {fontSans} from "@/config/fonts"; import {Navbar} from "@/components/navbar"; import {Footer} from "@/components/footer"; import {ProBanner} from "@/components/pro-banner"; -import {ScriptProviders} from "@/components/scripts/script-providers"; export const metadata: Metadata = { title: { @@ -77,7 +76,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) { - ); diff --git a/apps/docs/components/code-window/code-block.tsx b/apps/docs/components/code-window/code-block.tsx index 74de828f20..a5bf43cbee 100644 --- a/apps/docs/components/code-window/code-block.tsx +++ b/apps/docs/components/code-window/code-block.tsx @@ -39,7 +39,7 @@ export type CodeBlockProps = PreProps & { * recursively get all text nodes as an array for a given element */ function getTextNodes(node: any): any[] { - let childTextNodes = []; + let childTextNodes: React.ReactNode[] = []; if (!node.hasChildNodes()) return []; diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx index 6da1bb4799..f6108e129f 100644 --- a/apps/docs/components/docs/components/code-demo/code-demo.tsx +++ b/apps/docs/components/docs/components/code-demo/code-demo.tsx @@ -40,7 +40,6 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps { displayMode?: "always" | "visible"; isGradientBox?: boolean; gradientColor?: GradientBoxProps["color"]; - defaultExpanded?: boolean; previewHeight?: string | number; overflow?: "auto" | "visible" | "hidden"; className?: string; @@ -61,7 +60,6 @@ export const CodeDemo: React.FC = ({ typescriptStrict = false, showOpenInCodeSandbox, isGradientBox = false, - defaultExpanded = false, previewHeight = "auto", overflow = "visible", displayMode = "always", @@ -138,7 +136,6 @@ export const CodeDemo: React.FC = ({ const content = ( = ({ isInView, files, highlightedLines, - defaultExpanded, showPreview, showSandpackPreview, showOpenInCodeSandbox, diff --git a/apps/docs/components/docs/components/package-managers.tsx b/apps/docs/components/docs/components/package-managers.tsx index 0c4920a230..d071e37db4 100644 --- a/apps/docs/components/docs/components/package-managers.tsx +++ b/apps/docs/components/docs/components/package-managers.tsx @@ -97,9 +97,9 @@ export const PackageManagers = ({ })} {showGlobalInstallWarning && ( -
- No need to install this package if @nextui-org/react is already installed - globally. +
+ The above command is for individual installation only. You may skip this step if{" "} + @nextui-org/react is already installed globally.
)} diff --git a/apps/docs/components/footer.tsx b/apps/docs/components/footer.tsx index b19a959eb2..35cdc519bd 100644 --- a/apps/docs/components/footer.tsx +++ b/apps/docs/components/footer.tsx @@ -1,12 +1,9 @@ "use client"; -import dynamic from "next/dynamic"; import {usePathname} from "next/navigation"; import {getCurrentYear} from "@/utils/time"; -const VercelCallout = dynamic(() => import("./vercel-callout").then((mod) => mod.VercelCallout)); - export const Footer = () => { const pathname = usePathname(); @@ -17,8 +14,9 @@ export const Footer = () => { return (
-

© {getCurrentYear()} NextUI Inc.

- +

+ © {getCurrentYear()} NextUI Inc. All rights reserved. +

); diff --git a/apps/docs/components/icons/social.tsx b/apps/docs/components/icons/social.tsx index 160e9ab8a9..eaad88f6d8 100644 --- a/apps/docs/components/icons/social.tsx +++ b/apps/docs/components/icons/social.tsx @@ -98,23 +98,6 @@ const NextJsIcon: React.FC = ({size = 24, width, height, ...props} ); }; -const VercelIcon: React.FC = ({width, height = 44, ...props}) => { - return ( - - - - ); -}; const NpmIcon: React.FC = ({width = "1em", height = "1em", ...props}) => { return ( @@ -477,7 +460,6 @@ export { OpenCollectiveIcon, PatreonIcon, NextJsIcon, - VercelIcon, NpmIcon, NpmSmallIcon, PnpmIcon, diff --git a/apps/docs/components/icons/sponsors.tsx b/apps/docs/components/icons/sponsors.tsx index 5749ae90fc..896e2149f9 100644 --- a/apps/docs/components/icons/sponsors.tsx +++ b/apps/docs/components/icons/sponsors.tsx @@ -78,3 +78,351 @@ export const Story2DesignLogo = ({width = 175, height = 26, ...props}: IconSvgPr ); + +export const ReplexicaLogo = () => ( + + + + + + + + + +); + +export const CodeRabbitLogo = () => ( + + + +); + +export const ScrumbuissLogo = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/apps/docs/components/index.ts b/apps/docs/components/index.ts index ec88cfbdaa..7a6e106fd5 100644 --- a/apps/docs/components/index.ts +++ b/apps/docs/components/index.ts @@ -3,7 +3,6 @@ export * from "./theme-switch"; export * from "./looper-bg"; export * from "./code-window"; export * from "./gradient-box"; -export * from "./vercel-callout"; export * from "./copy-button"; export * from "./demo-code-modal"; export * from "./mdx-components"; diff --git a/apps/docs/components/marketing/a11y-otb.tsx b/apps/docs/components/marketing/a11y-otb.tsx index eafbda9bfd..e77cdbe38d 100644 --- a/apps/docs/components/marketing/a11y-otb.tsx +++ b/apps/docs/components/marketing/a11y-otb.tsx @@ -7,7 +7,6 @@ import { Link as NextUILink, Dropdown, DropdownSection, - DropdownTrigger, DropdownMenu, DropdownItem, Tooltip, @@ -22,7 +21,7 @@ import { } from "@nextui-org/shared-icons"; import Link from "next/link"; import dynamic from "next/dynamic"; -import {useEffect, useRef, useState} from "react"; +import {Fragment, useEffect, useRef, useState} from "react"; import {FeaturesGrid} from "./features-grid"; @@ -79,6 +78,8 @@ export const A11yOtb = () => { const ref = useRef(null); + const triggerRef = useRef(null); + const isMobile = useIsMobile(); const isInView = useInView(ref, { @@ -155,6 +156,15 @@ export const A11yOtb = () => { + {ref.current && ( { portalContainer={ref.current} shouldBlockScroll={false} shouldFlip={isMobile} - onOpenChange={(open) => setIsDropdownOpen(open)} + triggerRef={triggerRef} > - - - + = () => { alt="Professional camera" as={NextImage} className="object-cover -translate-y-12 h-[100%]" - height={120} + height={180} src="/images/card-example-6.webp" width={120} /> diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx index 96085e8e02..a2f108eb25 100644 --- a/apps/docs/components/marketing/hero/hero.tsx +++ b/apps/docs/components/marketing/hero/hero.tsx @@ -113,7 +113,7 @@ export const Hero = () => { }); }} > - Github + GitHub diff --git a/apps/docs/components/marketing/sponsors.tsx b/apps/docs/components/marketing/sponsors.tsx index 36b6e92bd9..6a8ea41cb3 100644 --- a/apps/docs/components/marketing/sponsors.tsx +++ b/apps/docs/components/marketing/sponsors.tsx @@ -1,23 +1,37 @@ import {Button, Link} from "@nextui-org/react"; import {sectionWrapper} from "@/components/primitives"; -import {Story2DesignLogo} from "@/components/icons/sponsors"; +import { + Story2DesignLogo, + ReplexicaLogo, + CodeRabbitLogo, + ScrumbuissLogo, +} from "@/components/icons/sponsors"; import {HeartFilledIcon} from "@/components/icons"; -import {VercelIcon} from "@/components/icons/social"; import {siteConfig} from "@/config/site"; import {Sponsor, SponsorItem} from "@/components/marketing/sponsor-item"; const sponsors: Sponsor[] = [ - { - name: "Vercel", - href: "https://www.vercel.com?utm_source=nextui&utm_marketing=oss", - logo: , - }, { name: "story.to.design", href: "https://story.to.design?utm_source=nextui&utm_marketing=partnership", logo: , }, + { + name: "Replexica", + href: "https://replexica.com/?utm_source=nextui&utm_marketing=oss", + logo: , + }, + { + name: "CodeRabbit", + href: "https://coderabbit.ai/?utm_source=nextui&utm_marketing=oss", + logo: , + }, + { + name: "Scrumbuiss", + href: "https://www.scrumbuiss.com/?utm_source=nextui&utm_marketing=oss", + logo: , + }, ]; export const Sponsors = () => { diff --git a/apps/docs/components/sandpack/code-viewer.tsx b/apps/docs/components/sandpack/code-viewer.tsx index 3f48ebfc29..14588355dd 100644 --- a/apps/docs/components/sandpack/code-viewer.tsx +++ b/apps/docs/components/sandpack/code-viewer.tsx @@ -2,9 +2,6 @@ import type {SandpackInitMode} from "@codesandbox/sandpack-react"; import * as React from "react"; import {FileTabs, useSandpack, useActiveCode, SandpackStack} from "@codesandbox/sandpack-react"; -import {Button} from "@nextui-org/react"; -import scrollIntoView from "scroll-into-view-if-needed"; -import {clsx} from "@nextui-org/shared-utils"; import {Language} from "prism-react-renderer"; import {HighlightedLines} from "./types"; @@ -33,83 +30,42 @@ export interface CodeViewerProps { containerRef?: React.RefObject; } -const INITIAL_HEIGHT = "200px"; - export const SandpackCodeViewer = React.forwardRef( - ({showTabs, code: propCode, defaultExpanded = false, highlightedLines, containerRef}, ref) => { + ({showTabs, code: propCode, highlightedLines, containerRef}, ref) => { const {sandpack} = useSandpack(); const {code} = useActiveCode(); const {activeFile} = sandpack; - const [isExpanded, setIsExpanded] = React.useState(defaultExpanded); - // const id = React.useId(); // hack to make sure we re-render the code editor and change current file // TODO: open an issue on sandpack-react // const [internalKey, setInternalKey] = React.useState(() => id); - const lineCountRef = React.useRef<{[key: string]: number}>({}); - - if (!lineCountRef.current[activeFile]) { - lineCountRef.current[activeFile] = code.split("\n").length; - } const shouldShowTabs = showTabs ?? sandpack.visibleFilesFromProps.length > 1; - const lineCount = lineCountRef.current[activeFile]; - const isExpandable = lineCount > 7 || isExpanded; const fileExt = activeFile.split(".").pop() as Language; // const isAppFile = activeFile.includes("App"); - React.useEffect(() => { - if (containerRef && containerRef?.current !== null && isExpandable) { - containerRef.current.style.height = INITIAL_HEIGHT; - } - }, [containerRef]); - // React.useEffect(() => { // setInternalKey(getId()); // }, [propCode, code]); React.useEffect(() => { - if (defaultExpanded && containerRef && containerRef?.current !== null) { - const container = containerRef?.current; + if (containerRef && containerRef.current !== null) { + const container = containerRef.current; container.style.height = "auto"; } - }, [defaultExpanded]); - - const handleExpand = () => { - const nextIsExpanded = !isExpanded; - - setIsExpanded(nextIsExpanded); - if (containerRef && containerRef?.current !== null) { - const container = containerRef?.current; - - if (nextIsExpanded) { - container.style.height = "auto"; - } else { - container.style.height = INITIAL_HEIGHT; - scrollIntoView(container, { - behavior: "smooth", - scrollMode: "if-needed", - block: "center", - }); - } - } - }; + }, []); return ( <>
{shouldShowTabs ? : null} -
+
{/* * Disabled in favor of Codeblock due to performance issues & font size on ios * @@ -127,7 +83,7 @@ export const SandpackCodeViewer = React.forwardRef( /> */} (
- {isExpandable && ( -
- -
- )} ); }, diff --git a/apps/docs/components/sandpack/sandpack.tsx b/apps/docs/components/sandpack/sandpack.tsx index 982345d9c4..b818331151 100644 --- a/apps/docs/components/sandpack/sandpack.tsx +++ b/apps/docs/components/sandpack/sandpack.tsx @@ -17,7 +17,6 @@ export interface SandpackProps extends UseSandpackProps { showEditor?: boolean; showCopyCode?: boolean; showReportBug?: boolean; - defaultExpanded?: boolean; showOpenInCodeSandbox?: boolean; children?: React.ReactNode; } @@ -29,7 +28,6 @@ export const Sandpack: FC = ({ typescriptStrict = false, showPreview = false, showEditor = true, - defaultExpanded = false, showOpenInCodeSandbox = true, showReportBug = true, showCopyCode = true, @@ -66,7 +64,6 @@ export const Sandpack: FC = ({ diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts index c2f0988d38..d3d62b23e4 100644 --- a/apps/docs/components/sandpack/use-sandpack.ts +++ b/apps/docs/components/sandpack/use-sandpack.ts @@ -100,13 +100,17 @@ export const useSandpack = ({ let fileContent = files[key] as string; // Check if the file content includes 'React' import statements, if not, add it - if (!fileContent.includes("from 'react'") && !fileContent.includes('from "react"')) { + if ( + fileContent.includes("React.") && + !fileContent.includes("from 'react'") && + !fileContent.includes('from "react"') + ) { fileContent = `${importReact}\n${fileContent}\n`; } // Check if file content includes any other dependencies, if yes, add it to dependencies const importRegex = /import .* from ["'](.*)["']/g; - let match; + let match: RegExpExecArray | null; while ((match = importRegex.exec(fileContent)) !== null) { const dependencyName = match[1]; diff --git a/apps/docs/components/sonar-pulse.tsx b/apps/docs/components/sonar-pulse.tsx index 0176d26e85..5bfc177d25 100644 --- a/apps/docs/components/sonar-pulse.tsx +++ b/apps/docs/components/sonar-pulse.tsx @@ -41,7 +41,7 @@ export const SonarPulse: FC = ({ }, [circlesCount, color]); const renderCircles = useMemo(() => { - const circles = []; + const circles: React.ReactNode[] = []; for (let i = 1; i < circlesCount; i++) { circles.push( diff --git a/apps/docs/components/vercel-callout.tsx b/apps/docs/components/vercel-callout.tsx deleted file mode 100644 index 0c8afbc8af..0000000000 --- a/apps/docs/components/vercel-callout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; - -import React from "react"; -import {Link} from "@nextui-org/react"; - -import {VercelIcon} from "@/components/icons"; -import {trackEvent} from "@/utils/va"; - -export const VercelCallout: React.FC = () => { - return ( - { - trackEvent("VercelCallout", { - name: "vercel callout", - action: "click", - category: "footer", - }); - }} - > -

Deployed on

- - - ); -}; diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json index 395fb40e4a..583e220fa7 100644 --- a/apps/docs/config/routes.json +++ b/apps/docs/config/routes.json @@ -132,12 +132,6 @@ "keywords": "interface elements, interactive components, UI components, widgets", "defaultOpen": true, "routes": [ - { - "key": "avatar", - "title": "Avatar", - "keywords": "avatar, profile picture, user representation, identity", - "path": "/docs/components/avatar.mdx" - }, { "key": "accordion", "title": "Accordion", @@ -150,6 +144,12 @@ "keywords": "autocomplete, auto suggest, search, typeahead", "path": "/docs/components/autocomplete.mdx" }, + { + "key": "avatar", + "title": "Avatar", + "keywords": "avatar, profile picture, user representation, identity", + "path": "/docs/components/avatar.mdx" + }, { "key": "badge", "title": "Badge", @@ -157,6 +157,12 @@ "path": "/docs/components/badge.mdx", "updated": true }, + { + "key": "breadcrumbs", + "title": "Breadcrumbs", + "keywords": "breadcrumbs, navigation, path, trail, location", + "path": "/docs/components/breadcrumbs.mdx" + }, { "key": "button", "title": "Button", @@ -164,10 +170,11 @@ "path": "/docs/components/button.mdx" }, { - "key": "breadcrumbs", - "title": "Breadcrumbs", - "keywords": "breadcrumbs, navigation, path, trail, location", - "path": "/docs/components/breadcrumbs.mdx" + "key": "calendar", + "title": "Calendar", + "keywords": "calendar, date picker, month picker, year picker", + "path": "/docs/components/calendar.mdx", + "newPost": true }, { "key": "card", @@ -194,18 +201,18 @@ "keywords": "chip, tag, label, small actionable entity", "path": "/docs/components/chip.mdx" }, + { + "key": "circular-progress", + "title": "Circular Progress", + "keywords": "circular progress, loading indicator, activity sign, process display", + "path": "/docs/components/circular-progress.mdx" + }, { "key": "code", "title": "Code", "keywords": "code, code snippet, inline code, coding", "path": "/docs/components/code.mdx" }, - { - "key": "input", - "title": "Input", - "keywords": "input, text box, form field, data entry", - "path": "/docs/components/input.mdx" - }, { "key": "date-input", "title": "Date Input", @@ -213,33 +220,6 @@ "path": "/docs/components/date-input.mdx", "newPost": true }, - { - "key": "time-input", - "title": "Time Input", - "keywords": "timeinput, time, input, timezone", - "path": "/docs/components/time-input.mdx", - "newPost": true - }, - { - "key": "circular-progress", - "title": "Circular Progress", - "keywords": "circular progress, loading indicator, activity sign, process display", - "path": "/docs/components/circular-progress.mdx" - }, - { - "key": "calendar", - "title": "Calendar", - "keywords": "calendar, date picker, month picker, year picker", - "path": "/docs/components/calendar.mdx", - "newPost": true - }, - { - "key": "range-calendar", - "title": "Range Calendar", - "keywords": "range calendar, date picker, month picker, year picker", - "path": "/docs/components/range-calendar.mdx", - "newPost": true - }, { "key": "date-picker", "title": "Date Picker", @@ -272,6 +252,12 @@ "keywords": "image, media, picture, photo, graphic display", "path": "/docs/components/image.mdx" }, + { + "key": "input", + "title": "Input", + "keywords": "input, text box, form field, data entry", + "path": "/docs/components/input.mdx" + }, { "key": "kbd", "title": "Kbd", @@ -326,6 +312,19 @@ "keywords": "radio group, selection set, option selection, exclusive choices", "path": "/docs/components/radio-group.mdx" }, + { + "key": "range-calendar", + "title": "Range Calendar", + "keywords": "range calendar, date picker, month picker, year picker", + "path": "/docs/components/range-calendar.mdx", + "newPost": true + }, + { + "key": "scroll-shadow", + "title": "Scroll Shadow", + "keywords": "scroll shadow, scroll indicator, scroll bar, scroll position", + "path": "/docs/components/scroll-shadow.mdx" + }, { "key": "select", "title": "Select", @@ -339,18 +338,18 @@ "path": "/docs/components/skeleton.mdx", "updated": true }, + { + "key": "slider", + "title": "Slider", + "keywords": "slider, range input, value selector, sliding control", + "path": "/docs/components/slider.mdx" + }, { "key": "snippet", "title": "Snippet", "keywords": "snippet, code block, programming, code example", "path": "/docs/components/snippet.mdx" }, - { - "key": "scroll-shadow", - "title": "Scroll Shadow", - "keywords": "scroll shadow, scroll indicator, scroll bar, scroll position", - "path": "/docs/components/scroll-shadow.mdx" - }, { "key": "spacer", "title": "Spacer", @@ -369,12 +368,6 @@ "keywords": "switch, toggle, binary input, on/off control", "path": "/docs/components/switch.mdx" }, - { - "key": "slider", - "title": "Slider", - "keywords": "slider, range input, value selector, sliding control", - "path": "/docs/components/slider.mdx" - }, { "key": "table", "title": "Table", @@ -394,11 +387,19 @@ "keywords": "textarea, multi-line text input, large text field, form control", "path": "/docs/components/textarea.mdx" }, + { + "key": "time-input", + "title": "Time Input", + "keywords": "timeinput, time, input, timezone", + "path": "/docs/components/time-input.mdx", + "newPost": true + }, { "key": "tooltip", "title": "Tooltip", "keywords": "tooltip, hint, descriptive message, hover info", - "path": "/docs/components/tooltip.mdx" + "path": "/docs/components/tooltip.mdx", + "updated": true }, { "key": "user", diff --git a/apps/docs/content/blog/nextui-v2.mdx b/apps/docs/content/blog/nextui-v2.mdx index 39ae0575df..4724424f9e 100644 --- a/apps/docs/content/blog/nextui-v2.mdx +++ b/apps/docs/content/blog/nextui-v2.mdx @@ -60,7 +60,11 @@ into React Server Components issues. NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes. This plugin allows you to customize colors and layouts tokens that are used by NextUI components. -```js {8,13-14} +
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` +
+ +```js {9,14-15} // tailwind.config.js const {nextui} = require("@nextui-org/react"); @@ -68,6 +72,7 @@ const {nextui} = require("@nextui-org/react"); module.exports = { content: [ // ... + // make sure it's pointing to the ROOT node_module "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", ], theme: { diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts new file mode 100644 index 0000000000..7e7e27dcc1 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts @@ -0,0 +1,57 @@ +const data = `export const animals = [ + {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", value: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", value: "elephant", description: "The largest land animal"}, + {label: "Lion", value: "lion", description: "The king of the jungle"}, + {label: "Tiger", value: "tiger", description: "The largest cat species"}, + {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + value: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", value: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + value: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + value: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, +];`; + +const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {animals} from "./data"; + +export default function App() { + return ( +
+ + {(item) => {item.label}} + +
+ ); +}`; + +const react = { + "/App.jsx": App, + "/data.js": data, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/autocomplete/custom-items.ts b/apps/docs/content/components/autocomplete/custom-items.ts index 218d35d9fa..205ead3a5c 100644 --- a/apps/docs/content/components/autocomplete/custom-items.ts +++ b/apps/docs/content/components/autocomplete/custom-items.ts @@ -57,7 +57,7 @@ const data = `export const users = [ age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", - status: "Active", + status: "active", }, { id: 7, diff --git a/apps/docs/content/components/autocomplete/custom-styles.ts b/apps/docs/content/components/autocomplete/custom-styles.ts index 549be04f98..8782766986 100644 --- a/apps/docs/content/components/autocomplete/custom-styles.ts +++ b/apps/docs/content/components/autocomplete/custom-styles.ts @@ -57,7 +57,7 @@ const data = `export const users = [ age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", - status: "Active", + status: "active", }, { id: 7, diff --git a/apps/docs/content/components/autocomplete/index.ts b/apps/docs/content/components/autocomplete/index.ts index b54d80e6d4..76d57925a3 100644 --- a/apps/docs/content/components/autocomplete/index.ts +++ b/apps/docs/content/components/autocomplete/index.ts @@ -24,6 +24,7 @@ import asyncLoadingItems from "./async-loading-items"; import sections from "./sections"; import customSectionsStyle from "./custom-sections-style"; import customStyles from "./custom-styles"; +import customEmptyContentMessage from "./custom-empty-content-message"; import readOnly from "./read-only"; export const autocompleteContent = { @@ -53,5 +54,6 @@ export const autocompleteContent = { sections, customSectionsStyle, customStyles, + customEmptyContentMessage, readOnly, }; diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts index f8e125b7cc..a7ad847c51 100644 --- a/apps/docs/content/components/button/custom-impl.ts +++ b/apps/docs/content/components/button/custom-impl.ts @@ -61,7 +61,7 @@ const MyButton = forwardRef((props, ref) => { ...props, }); - const {ripples} = getRippleProps(); + const {ripples, onClear} = getRippleProps(); return ( ); }); diff --git a/apps/docs/content/components/date-input/error-message-function.ts b/apps/docs/content/components/date-input/error-message-function.ts new file mode 100644 index 0000000000..35371af420 --- /dev/null +++ b/apps/docs/content/components/date-input/error-message-function.ts @@ -0,0 +1,30 @@ +const App = `import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ { + if (value.isInvalid) { + return "Please enter a valid date."; + } + }} + className="max-w-xs" + /> +
+ ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/date-input/index.ts b/apps/docs/content/components/date-input/index.ts index 663e66615c..3af95ddc94 100644 --- a/apps/docs/content/components/date-input/index.ts +++ b/apps/docs/content/components/date-input/index.ts @@ -7,6 +7,7 @@ import labelPlacements from "./label-placements"; import description from "./description"; import startEndContent from "./start-end-content"; import errorMessage from "./error-message"; +import errorMessageFunction from "./error-message-function"; import controlled from "./controlled"; import timeZones from "./time-zones"; import granularity from "./granularity"; @@ -25,6 +26,7 @@ export const dateInputContent = { description, startEndContent, errorMessage, + errorMessageFunction, controlled, timeZones, granularity, diff --git a/apps/docs/content/components/date-picker/error-message-function.ts b/apps/docs/content/components/date-picker/error-message-function.ts new file mode 100644 index 0000000000..2b473c9f5d --- /dev/null +++ b/apps/docs/content/components/date-picker/error-message-function.ts @@ -0,0 +1,26 @@ +const App = `import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ { + if (value.isInvalid) { + return "Please enter a valid date."; + } + }} + /> +
+ ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/date-picker/index.ts b/apps/docs/content/components/date-picker/index.ts index f46ee40879..d99bfc245f 100644 --- a/apps/docs/content/components/date-picker/index.ts +++ b/apps/docs/content/components/date-picker/index.ts @@ -6,6 +6,7 @@ import variants from "./variants"; import labelPlacements from "./label-placements"; import description from "./description"; import errorMessage from "./error-message"; +import errorMessageFunction from "./error-message-function"; import withMonthAndYearPickers from "./with-month-and-year-pickers"; import withTimeField from "./with-time-field"; import selectorIcon from "./selector-icon"; @@ -28,6 +29,7 @@ export const datePickerContent = { labelPlacements, description, errorMessage, + errorMessageFunction, withMonthAndYearPickers, withTimeField, selectorIcon, diff --git a/apps/docs/content/components/date-range-picker/custom-styles.ts b/apps/docs/content/components/date-range-picker/custom-styles.ts new file mode 100644 index 0000000000..6c11daf883 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/custom-styles.ts @@ -0,0 +1,41 @@ +const App = `import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/date-range-picker/error-message-function.ts b/apps/docs/content/components/date-range-picker/error-message-function.ts new file mode 100644 index 0000000000..9e8cb16eab --- /dev/null +++ b/apps/docs/content/components/date-range-picker/error-message-function.ts @@ -0,0 +1,30 @@ +const App = `import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + { + if (value.isInvalid) { + return "Please enter your stay duration"; + } + }} + defaultValue={{ + start: parseDate("2024-04-01"), + end: parseDate("2024-04-08"), + }} + className="max-w-xs" + /> + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/date-range-picker/index.ts b/apps/docs/content/components/date-range-picker/index.ts index b4496b2651..313789ff29 100644 --- a/apps/docs/content/components/date-range-picker/index.ts +++ b/apps/docs/content/components/date-range-picker/index.ts @@ -6,6 +6,7 @@ import variants from "./variants"; import labelPlacements from "./label-placements"; import description from "./description"; import errorMessage from "./error-message"; +import errorMessageFunction from "./error-message-function"; import withTimeField from "./with-time-field"; import selectorIcon from "./selector-icon"; import controlled from "./controlled"; @@ -18,6 +19,7 @@ import visibleMonth from "./visible-month"; import pageBehavior from "./page-behavior"; import nonContigous from "./non-contiguous"; import presets from "./presets"; +import customStyles from "./custom-styles"; export const dateRangePickerContent = { usage, @@ -28,6 +30,7 @@ export const dateRangePickerContent = { labelPlacements, description, errorMessage, + errorMessageFunction, withTimeField, selectorIcon, controlled, @@ -40,4 +43,5 @@ export const dateRangePickerContent = { pageBehavior, nonContigous, presets, + customStyles, }; diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts index eb097ecf00..6bf954195b 100644 --- a/apps/docs/content/components/date-range-picker/presets.ts +++ b/apps/docs/content/components/date-range-picker/presets.ts @@ -88,7 +88,7 @@ export default function App() { } calendarProps={{ - focusedValue: value.start, + focusedValue: value?.start, onFocusChange: (val) => setValue({...value, start: val}), nextButtonProps: { variant: "bordered", diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts index b8f94ec2e3..02822deb75 100644 --- a/apps/docs/content/components/input/password.ts +++ b/apps/docs/content/components/input/password.ts @@ -69,7 +69,7 @@ export default function App() { variant="bordered" placeholder="Enter your password" endContent={ -