diff --git a/.changeset/clever-cherries-watch.md b/.changeset/clever-cherries-watch.md new file mode 100644 index 0000000000..0bcabdb379 --- /dev/null +++ b/.changeset/clever-cherries-watch.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/system-rsc": patch +--- + +fixed `extendVariants` when having `defaultVariants` (#3009) diff --git a/.changeset/cyan-emus-swim.md b/.changeset/cyan-emus-swim.md new file mode 100644 index 0000000000..48ef694f26 --- /dev/null +++ b/.changeset/cyan-emus-swim.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/date-picker": patch +--- + +Fix calendar props on date-range-picker diff --git a/.changeset/dry-foxes-melt.md b/.changeset/dry-foxes-melt.md new file mode 100644 index 0000000000..637b9c9863 --- /dev/null +++ b/.changeset/dry-foxes-melt.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/radio": patch +--- + +Fix ensure radio input correctly references description (#2932) diff --git a/.changeset/eleven-panthers-remain.md b/.changeset/eleven-panthers-remain.md new file mode 100644 index 0000000000..78713ab409 --- /dev/null +++ b/.changeset/eleven-panthers-remain.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/avatar": patch +--- + +Removed extra `disableAnimation` prop in `getImageProps` (#3257) diff --git a/.changeset/great-avocados-eat.md b/.changeset/great-avocados-eat.md new file mode 100644 index 0000000000..e4338a912e --- /dev/null +++ b/.changeset/great-avocados-eat.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/chip": patch +"@nextui-org/input": patch +--- + +Add accessible name to the icon button (#2802, #2808) \ No newline at end of file diff --git a/.changeset/nasty-forks-explode.md b/.changeset/nasty-forks-explode.md new file mode 100644 index 0000000000..61412b1322 --- /dev/null +++ b/.changeset/nasty-forks-explode.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/accordion": patch +"@nextui-org/theme": patch +--- + +Fixed variants for nested accordions (#3285) diff --git a/.changeset/pink-rivers-rush.md b/.changeset/pink-rivers-rush.md new file mode 100644 index 0000000000..c9cb866725 --- /dev/null +++ b/.changeset/pink-rivers-rush.md @@ -0,0 +1,20 @@ +--- +"@nextui-org/accordion": patch +"@nextui-org/autocomplete": patch +"@nextui-org/button": patch +"@nextui-org/calendar": patch +"@nextui-org/card": patch +"@nextui-org/dropdown": patch +"@nextui-org/modal": patch +"@nextui-org/navbar": patch +"@nextui-org/popover": patch +"@nextui-org/ripple": patch +"@nextui-org/select": patch +"@nextui-org/snippet": patch +"@nextui-org/tabs": patch +"@nextui-org/tooltip": patch +"@nextui-org/system": patch +"@nextui-org/framer-utils": patch +--- + +update `framer-motion` versions diff --git a/.changeset/tiny-kids-thank.md b/.changeset/tiny-kids-thank.md new file mode 100644 index 0000000000..71d470661f --- /dev/null +++ b/.changeset/tiny-kids-thank.md @@ -0,0 +1,15 @@ +--- +"@nextui-org/accordion": patch +"@nextui-org/calendar": patch +"@nextui-org/modal": patch +"@nextui-org/navbar": patch +"@nextui-org/popover": patch +"@nextui-org/ripple": patch +"@nextui-org/tooltip": patch +"@nextui-org/theme": patch +"@nextui-org/use-infinite-scroll": patch +"@nextui-org/dom-animation": patch +"@nextui-org/shared-utils": patch +--- + +framer motion optimization (#3340) diff --git a/.changeset/warm-suits-report.md b/.changeset/warm-suits-report.md new file mode 100644 index 0000000000..aa971e188a --- /dev/null +++ b/.changeset/warm-suits-report.md @@ -0,0 +1,8 @@ +--- +"@nextui-org/calendar": patch +"@nextui-org/theme": patch +"@nextui-org/use-infinite-scroll": patch +"@nextui-org/shared-utils": patch +--- + +replaced lodash with native approaches diff --git a/.eslintrc.json b/.eslintrc.json index ad84de361e..d3067d4cf7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -87,7 +87,6 @@ "prev": ["const", "let", "var"], "next": ["const", "let", "var"] } - ], - "import/consistent-type-specifier-style": ["error", "prefer-top-level"] + ] } } diff --git a/.vscode/settings.json b/.vscode/settings.json index c531e733d0..816c570d4b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,12 +3,5 @@ "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/app/blog/layout.tsx b/apps/docs/app/blog/layout.tsx index 81b173e1f0..0b94da259e 100644 --- a/apps/docs/app/blog/layout.tsx +++ b/apps/docs/app/blog/layout.tsx @@ -1,7 +1,5 @@ import {Image} from "@nextui-org/react"; -import {ScriptProviders} from "@/components/scripts/script-providers"; - interface DocsLayoutProps { children: React.ReactNode; } @@ -24,8 +22,6 @@ 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 782bb7214e..561443d9e7 100644 --- a/apps/docs/app/docs/layout.tsx +++ b/apps/docs/app/docs/layout.tsx @@ -2,7 +2,6 @@ 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; @@ -31,8 +30,6 @@ export default function DocsLayout({children}: DocsLayoutProps) { > docs right background - - ); } diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx index dbb19e9174..cd02d809b3 100644 --- a/apps/docs/app/examples/table/custom-styles/page.tsx +++ b/apps/docs/app/examples/table/custom-styles/page.tsx @@ -23,7 +23,7 @@ import { } from "@nextui-org/react"; import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons"; import {useCallback, useMemo, useState} from "react"; -import {capitalize} from "lodash"; +import {capitalize} from "@nextui-org/shared-utils"; import {PlusLinearIcon} from "@/components/icons"; import {VerticalDotsIcon} from "@/components/icons/vertical-dots"; diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/apps/docs/app/examples/table/use-case/page.tsx index b94ccf30b7..c79650090a 100644 --- a/apps/docs/app/examples/table/use-case/page.tsx +++ b/apps/docs/app/examples/table/use-case/page.tsx @@ -23,7 +23,7 @@ import { } from "@nextui-org/react"; import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons"; import {useCallback, useMemo, useState} from "react"; -import {capitalize} from "lodash"; +import {capitalize} from "@nextui-org/shared-utils"; import {PlusLinearIcon} from "@/components/icons"; import {VerticalDotsIcon} from "@/components/icons/vertical-dots"; diff --git a/apps/docs/app/figma/page.tsx b/apps/docs/app/figma/page.tsx index 95217bdfbb..a3e82595ce 100644 --- a/apps/docs/app/figma/page.tsx +++ b/apps/docs/app/figma/page.tsx @@ -2,7 +2,6 @@ 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 ( @@ -44,8 +43,6 @@ export default function FigmaPage() { > docs right background - - ); } diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index bc2e47c511..0541197205 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -12,6 +12,7 @@ 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: { @@ -76,6 +77,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) { + ); diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx index 25a33d03f5..e3213d47af 100644 --- a/apps/docs/components/cmdk.tsx +++ b/apps/docs/components/cmdk.tsx @@ -13,7 +13,8 @@ import {clsx} from "@nextui-org/shared-utils"; import scrollIntoView from "scroll-into-view-if-needed"; import {isAppleDevice, isWebKit} from "@react-aria/utils"; import {create} from "zustand"; -import {intersectionBy, isEmpty} from "lodash"; +import {isEmpty} from "@nextui-org/shared-utils"; +import intersectionBy from "lodash/intersectionBy"; import {writeStorage, useLocalStorage} from "@rehooks/local-storage"; import { diff --git a/apps/docs/components/code-window/code-block.tsx b/apps/docs/components/code-window/code-block.tsx index a5bf43cbee..74de828f20 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: React.ReactNode[] = []; + let childTextNodes = []; if (!node.hasChildNodes()) return []; diff --git a/apps/docs/components/demo-code-modal.tsx b/apps/docs/components/demo-code-modal.tsx index baf2e1dede..31c9996d91 100644 --- a/apps/docs/components/demo-code-modal.tsx +++ b/apps/docs/components/demo-code-modal.tsx @@ -12,7 +12,6 @@ import { Skeleton, } from "@nextui-org/react"; import Link from "next/link"; -import {toLower} from "lodash"; import {CodeWindow} from "@/components/code-window"; import {useIsMobile} from "@/hooks/use-media-query"; @@ -30,8 +29,8 @@ export const DemoCodeModal: FC = ({isOpen, code, title, subt const isMobile = useIsMobile(); - const lowerTitle = toLower(title); - const fileName = `${toLower(lowerTitle)}.tsx`; + const lowerTitle = title.toLowerCase(); + const fileName = `${lowerTitle}.tsx`; return ( = ({ typescriptStrict = false, showOpenInCodeSandbox, isGradientBox = false, + defaultExpanded = false, previewHeight = "auto", overflow = "visible", displayMode = "always", @@ -136,6 +138,7 @@ export const CodeDemo: React.FC = ({ const content = ( = ({ isInView, files, highlightedLines, + defaultExpanded, showPreview, showSandpackPreview, showOpenInCodeSandbox, diff --git a/apps/docs/components/docs/components/code-demo/utils.ts b/apps/docs/components/docs/components/code-demo/utils.ts index f4c6714d5d..5119c3b0a8 100644 --- a/apps/docs/components/docs/components/code-demo/utils.ts +++ b/apps/docs/components/docs/components/code-demo/utils.ts @@ -1,17 +1,19 @@ -import {get} from "lodash"; - import {FileCode} from "./types"; const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm; const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/; -export const transformCode = (code: string, imports = {}, compName = "App") => { +export const transformCode = ( + code: string, + imports: {[key: string]: any} = {}, + compName = "App", +) => { let cleanedCode = code .replace(importRegex, (match) => { // get component name from the match ex. "import { Table } from '@nextui-org/react'" const componentName = match.match(/\w+/g)?.[1] || ""; - const matchingImport = get(imports, componentName); + const matchingImport = imports[componentName] || {}; if (matchingImport) { // remove the matching import diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx index 8d4f61cbf1..57b6408e08 100644 --- a/apps/docs/components/docs/components/codeblock.tsx +++ b/apps/docs/components/docs/components/codeblock.tsx @@ -1,7 +1,7 @@ import React, {forwardRef, useEffect} from "react"; import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils"; import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer"; -import {debounce, omit} from "lodash"; +import {debounce, omit} from "@nextui-org/shared-utils"; import defaultTheme from "@/libs/prism-theme"; diff --git a/apps/docs/components/docs/components/swatch-colors-set.tsx b/apps/docs/components/docs/components/swatch-colors-set.tsx index 319e9e72e0..0696a8926e 100644 --- a/apps/docs/components/docs/components/swatch-colors-set.tsx +++ b/apps/docs/components/docs/components/swatch-colors-set.tsx @@ -1,10 +1,10 @@ import {parseToRgba, readableColor} from "color2k"; import {Button, Tooltip} from "@nextui-org/react"; -import {commonColors, semanticColors} from "@nextui-org/theme"; +import {commonColors, semanticColors, SemanticBaseColors, ThemeColors} from "@nextui-org/theme"; import {useClipboard} from "@nextui-org/use-clipboard"; import {useState} from "react"; import {useTheme} from "next-themes"; -import {get, isEmpty} from "lodash"; +import {isEmpty} from "@nextui-org/shared-utils"; type ColorsItem = { color: string; @@ -106,12 +106,12 @@ const SemanticSwatch = ({ let value: string = ""; const [colorName, colorScale] = color.split("-"); - let currentPalette = get(semanticColors, theme ?? "", {}); + const currentPalette = semanticColors[theme as keyof SemanticBaseColors] || {}; if (!colorScale) { - value = get(currentPalette, `${colorName}.DEFAULT`, ""); + value = (currentPalette[colorName as keyof ThemeColors] as any)?.DEFAULT || ""; } else { - value = get(currentPalette, `${colorName}.${colorScale}`, ""); + value = (currentPalette[colorName as keyof ThemeColors] as any)?.colorScale || ""; } const handleCopy = () => { diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx index e52ccdc639..ac25317ad1 100644 --- a/apps/docs/components/docs/sidebar.tsx +++ b/apps/docs/components/docs/sidebar.tsx @@ -18,7 +18,7 @@ import { dataFocusVisibleClasses, } from "@nextui-org/react"; import Link from "next/link"; -import {isEmpty} from "lodash"; +import {isEmpty} from "@nextui-org/shared-utils"; import {usePathname, useRouter} from "next/navigation"; import {ScrollArea} from "../scroll-area"; diff --git a/apps/docs/components/footer.tsx b/apps/docs/components/footer.tsx index 35cdc519bd..bf4ee63d7a 100644 --- a/apps/docs/components/footer.tsx +++ b/apps/docs/components/footer.tsx @@ -14,9 +14,7 @@ export const Footer = () => { return (
-

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

+

© {getCurrentYear()} NextUI Inc.

); diff --git a/apps/docs/components/marketing/custom-themes/custom-themes.tsx b/apps/docs/components/marketing/custom-themes/custom-themes.tsx index ecb1f2cf23..9046ca8e29 100644 --- a/apps/docs/components/marketing/custom-themes/custom-themes.tsx +++ b/apps/docs/components/marketing/custom-themes/custom-themes.tsx @@ -3,7 +3,6 @@ /* eslint-disable react/display-name */ import {useMemo, useState} from "react"; import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react"; -import get from "lodash/get"; import NextLink from "next/link"; import NextImage from "next/image"; @@ -238,7 +237,7 @@ export const CustomThemes = () => { = () => { alt="Professional camera" as={NextImage} className="object-cover -translate-y-12 h-[100%]" - height={180} + height={120} src="/images/card-example-6.webp" width={120} /> diff --git a/apps/docs/components/marketing/support.tsx b/apps/docs/components/marketing/support.tsx index 8bce9750db..ec640ca648 100644 --- a/apps/docs/components/marketing/support.tsx +++ b/apps/docs/components/marketing/support.tsx @@ -2,7 +2,7 @@ import {FC, useMemo, useRef} from "react"; import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react"; -import {clamp, get} from "lodash"; +import {clamp} from "@nextui-org/shared-utils"; import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives"; @@ -132,9 +132,7 @@ export const Support: FC = ({sponsors = []}) => { size={getSponsorSize(sponsor, isMobile)} src={sponsor.image} style={getSponsorAvatarStyles(index, sponsors)} - onClick={() => - handleExternalLinkClick(get(sponsor, "website") || get(sponsor, "profile")) - } + onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])} /> ))} diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx index d9e95b7456..11cc145e6f 100644 --- a/apps/docs/components/navbar.tsx +++ b/apps/docs/components/navbar.tsx @@ -24,7 +24,6 @@ import {isAppleDevice} from "@react-aria/utils"; import {clsx} from "@nextui-org/shared-utils"; import NextLink from "next/link"; import {usePathname} from "next/navigation"; -import {includes} from "lodash"; import {motion, AnimatePresence} from "framer-motion"; import {useEffect} from "react"; import {usePress} from "@react-aria/interactions"; @@ -197,7 +196,7 @@ export const Navbar: FC = ({children, routes, mobileRoutes = [], sl handlePressNavbarItem("Docs", "/docs/guide/introduction")} > @@ -208,7 +207,7 @@ export const Navbar: FC = ({children, routes, mobileRoutes = [], sl handlePressNavbarItem("Components", "/docs/components/avatar")} > @@ -219,7 +218,7 @@ export const Navbar: FC = ({children, routes, mobileRoutes = [], sl handlePressNavbarItem("Blog", "/blog")} > @@ -230,7 +229,7 @@ export const Navbar: FC = ({children, routes, mobileRoutes = [], sl handlePressNavbarItem("Figma", "/figma")} > diff --git a/apps/docs/components/sandpack/bugreport-button.tsx b/apps/docs/components/sandpack/bugreport-button.tsx index 0f7438e719..2c2e19491d 100644 --- a/apps/docs/components/sandpack/bugreport-button.tsx +++ b/apps/docs/components/sandpack/bugreport-button.tsx @@ -1,7 +1,7 @@ import React from "react"; import {usePathname} from "next/navigation"; import {Tooltip, Button} from "@nextui-org/react"; -import {capitalize, last} from "lodash"; +import {capitalize} from "@nextui-org/shared-utils"; import {BugIcon} from "@/components/icons"; import {ISSUE_REPORT_URL} from "@/libs/github/constants"; @@ -9,7 +9,7 @@ import {ISSUE_REPORT_URL} from "@/libs/github/constants"; export const BugReportButton = () => { const pathname = usePathname(); - const componentTitle = capitalize(last(pathname?.split("/"))); + const componentTitle = capitalize(pathname?.split("/")?.at(-1) ?? ""); const handlePress = () => { window.open(`${ISSUE_REPORT_URL}${componentTitle}`, "_blank"); diff --git a/apps/docs/components/sandpack/code-viewer.tsx b/apps/docs/components/sandpack/code-viewer.tsx index 14588355dd..3f48ebfc29 100644 --- a/apps/docs/components/sandpack/code-viewer.tsx +++ b/apps/docs/components/sandpack/code-viewer.tsx @@ -2,6 +2,9 @@ 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"; @@ -30,42 +33,83 @@ export interface CodeViewerProps { containerRef?: React.RefObject; } +const INITIAL_HEIGHT = "200px"; + export const SandpackCodeViewer = React.forwardRef( - ({showTabs, code: propCode, highlightedLines, containerRef}, ref) => { + ({showTabs, code: propCode, defaultExpanded = false, 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 (containerRef && containerRef.current !== null) { - const container = containerRef.current; + if (defaultExpanded && 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 * @@ -83,7 +127,7 @@ export const SandpackCodeViewer = React.forwardRef( /> */} (
+ {isExpandable && ( +
+ +
+ )} ); }, diff --git a/apps/docs/components/sandpack/sandpack.tsx b/apps/docs/components/sandpack/sandpack.tsx index b818331151..982345d9c4 100644 --- a/apps/docs/components/sandpack/sandpack.tsx +++ b/apps/docs/components/sandpack/sandpack.tsx @@ -17,6 +17,7 @@ export interface SandpackProps extends UseSandpackProps { showEditor?: boolean; showCopyCode?: boolean; showReportBug?: boolean; + defaultExpanded?: boolean; showOpenInCodeSandbox?: boolean; children?: React.ReactNode; } @@ -28,6 +29,7 @@ export const Sandpack: FC = ({ typescriptStrict = false, showPreview = false, showEditor = true, + defaultExpanded = false, showOpenInCodeSandbox = true, showReportBug = true, showCopyCode = true, @@ -64,6 +66,7 @@ export const Sandpack: FC = ({ diff --git a/apps/docs/components/sonar-pulse.tsx b/apps/docs/components/sonar-pulse.tsx index 5bfc177d25..0176d26e85 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: React.ReactNode[] = []; + const circles = []; for (let i = 1; i < circlesCount; i++) { circles.push( diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json index 583e220fa7..fa1b2226d1 100644 --- a/apps/docs/config/routes.json +++ b/apps/docs/config/routes.json @@ -132,6 +132,12 @@ "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", @@ -144,12 +150,6 @@ "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,12 +157,6 @@ "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", @@ -170,11 +164,10 @@ "path": "/docs/components/button.mdx" }, { - "key": "calendar", - "title": "Calendar", - "keywords": "calendar, date picker, month picker, year picker", - "path": "/docs/components/calendar.mdx", - "newPost": true + "key": "breadcrumbs", + "title": "Breadcrumbs", + "keywords": "breadcrumbs, navigation, path, trail, location", + "path": "/docs/components/breadcrumbs.mdx" }, { "key": "card", @@ -201,18 +194,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", @@ -220,6 +213,33 @@ "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", @@ -252,12 +272,6 @@ "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", @@ -312,19 +326,6 @@ "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", @@ -338,18 +339,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", @@ -368,6 +369,12 @@ "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", @@ -387,13 +394,6 @@ "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", diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts index a7ad847c51..f8e125b7cc 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, onClear} = getRippleProps(); + const {ripples} = getRippleProps(); return ( ); }); diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts index 6bf954195b..eb097ecf00 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/table/custom-styles.ts b/apps/docs/content/components/table/custom-styles.ts index 7e53d1ef39..3e816ef9e5 100644 --- a/apps/docs/content/components/table/custom-styles.ts +++ b/apps/docs/content/components/table/custom-styles.ts @@ -220,8 +220,8 @@ const users = [ export {columns, users, statusOptions};`; -const utils = `export function capitalize(str) { - return str.charAt(0).toUpperCase() + str.slice(1); +const utils = `export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; }`; const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => ( diff --git a/apps/docs/content/components/table/use-case.ts b/apps/docs/content/components/table/use-case.ts index 68c17c06e5..b46e960e7c 100644 --- a/apps/docs/content/components/table/use-case.ts +++ b/apps/docs/content/components/table/use-case.ts @@ -448,8 +448,8 @@ export type IconSvgProps = SVGProps & { size?: number; };`; -const utils = `export function capitalize(str) { - return str.charAt(0).toUpperCase() + str.slice(1); +const utils = `export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; }`; const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => ( @@ -544,8 +544,8 @@ const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ... );`; -const utilsTs = `export function capitalize(str: string) { - return str.charAt(0).toUpperCase() + str.slice(1); +const utilsTs = `export function capitalize(s: string) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; }`; const PlusIconTs = `import {IconSvgProps} from "./types"; diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx index 3c967a6303..8f9e6fd96f 100644 --- a/apps/docs/content/docs/components/dropdown.mdx +++ b/apps/docs/content/docs/components/dropdown.mdx @@ -322,9 +322,9 @@ you to customize each item individually. | variant | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` | The dropdown items appearance style. | `solid` | | color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The dropdown items color theme. | `default` | | selectionMode | `none` \| `single` \| `multiple` | The type of selection that is allowed in the collection. | - | -| selectedKeys | `all` \| `Iterable` | The currently selected keys in the collection (controlled). | - | -| disabledKeys | `Iterable` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - | -| defaultSelectedKeys | `all` \| `Iterable` | The initial selected keys in the collection (uncontrolled). | - | +| selectedKeys | `React.Key[]` | The currently selected keys in the collection (controlled). | - | +| disabledKeys | `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - | +| defaultSelectedKeys | `all` \| `React.Key[]` | The initial selected keys in the collection (uncontrolled). | - | | disallowEmptySelection | `boolean` | Whether the collection allows empty selection. | `false` | | autoFocus | `boolean` \| `first` \| `last` | Where the focus should be set. | `false` | | topContent | `ReactNode` | The content to display above the listbox items. | - | @@ -343,7 +343,7 @@ you to customize each item individually. | Attribute | Type | Description | | ----------------- | ----------------------------- | -------------------------------------------------------------------------- | | onAction | `(key: React.Key) => void` | Handler that is called when an item is selected. | -| onSelectionChange | `(keys: "all" \| Set & {anchorKey?: string; currentKey?: string}) => void` | Handler that is called when the selection changes. | +| onSelectionChange | `(keys: React.Key[]) => void` | Handler that is called when the selection changes. | | onClose | `() => void` | Handler that is called when the menu should close after selecting an item. | --- diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx index b287c9aef1..b2bccb7efb 100644 --- a/apps/docs/content/docs/components/pagination.mdx +++ b/apps/docs/content/docs/components/pagination.mdx @@ -126,7 +126,7 @@ You can use the `renderItem` property to customize the pagination items. - **prev**: The previous button slot. - **next**: The next button slot. - **item**: The pagination item slot, applied to the middle items. -- **cursor**: The current page slot. Available only when `disableCursorAnimation` is `false` and `disableAnimation` is `false`. +- **cursor**: The current page slot. Available only when `disableCursorAnimation` is `false` and `disableAnimation` is `false. - **forwardIcon**: The forward icon slot. The one that appears when hovering the ellipsis button. - **ellipsis**: The ellipsis slot. - **chevronNext**: The chevron next icon slot. diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index 40cc3e44ea..650b18e61d 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -359,9 +359,9 @@ the popover and listbox components. | children\* | `ReactNode[]` | The children to render. Usually a list of `SelectItem` and `SelectSection` elements. | - | | items | [`Iterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the select. (dynamic) | - | | selectionMode | `single` \| `multiple` | The type of selection that is allowed in the collection. | - | -| selectedKeys | `all` \| `Iterable` | The currently selected keys in the collection (controlled). | - | -| disabledKeys | `Iterable` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - | -| defaultSelectedKeys | `all` \| `Iterable` | The initial selected keys in the collection (uncontrolled). | - | +| selectedKeys | `all` \| `React.Key[]` | The currently selected keys in the collection (controlled). | - | +| disabledKeys | `all` \| `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - | +| defaultSelectedKeys | `all` \| `React.Key[]` | The initial selected keys in the collection (uncontrolled). | - | | variant | `flat` \| `bordered` \| `faded` \| `underlined` | The variant of the select. | `flat` | | color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the select. | `default` | | size | `sm` \| `md` \| `lg` | The size of the select. | `md` | @@ -400,7 +400,7 @@ the popover and listbox components. | ----------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ | | onClose | `() => void` | Callback fired when the select popover is closed. | | onOpenChange | `(isOpen: boolean) => void` | Callback fired when the select popover is opened or closed. | -| onSelectionChange | `(keys: "all" \| Set & {anchorKey?: string; currentKey?: string}) => void` | Callback fired when the selected keys change. | +| onSelectionChange | `(keys: React.Key[]) => void` | Callback fired when the selected keys change. | | onChange | `React.ChangeEvent` | Native select change event, fired when the selected value changes. | | renderValue | [RenderValueFunction](#render-value-function) | Function to render the value of the select. It renders the selected item by default. | diff --git a/apps/docs/content/docs/frameworks/astro.mdx b/apps/docs/content/docs/frameworks/astro.mdx index 5afc605c09..3f67bb61cf 100644 --- a/apps/docs/content/docs/frameworks/astro.mdx +++ b/apps/docs/content/docs/frameworks/astro.mdx @@ -62,7 +62,7 @@ the following code to your `tailwind.config.cjs` file: **Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` -```js {2,9,14-15} +```js {9,14-15} // tailwind.config.cjs const { nextui } = require("@nextui-org/react"); diff --git a/apps/docs/content/docs/frameworks/nextjs.mdx b/apps/docs/content/docs/frameworks/nextjs.mdx index 6347126aab..219230abf2 100644 --- a/apps/docs/content/docs/frameworks/nextjs.mdx +++ b/apps/docs/content/docs/frameworks/nextjs.mdx @@ -99,7 +99,7 @@ Filtered results for: Enter something to filter You still need to add the provider to your app manually (we are working on automating this step). -```jsx {3,7,9} +```jsx {7,9} // app/providers.tsx import {NextUIProvider} from '@nextui-org/react' @@ -115,7 +115,7 @@ export function Providers({children}: { children: React.ReactNode }) { -```jsx {3,7,9,11} +```jsx {7,9,11} // app/layout.tsx import {Providers} from "./providers"; @@ -174,7 +174,7 @@ the following code to your `tailwind.config.js` file: **Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` -```js {2,9,14-15} +```js {9,14-15} // tailwind.config.js import {nextui} from "@nextui-org/react"; @@ -199,7 +199,7 @@ export default config; Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`: -```jsx {4,8,10} +```jsx {8,10} // app/providers.tsx 'use client' @@ -218,7 +218,7 @@ export function Providers({children}: { children: React.ReactNode }) { Now, Go to your `root` layout page and wrap it with the `Providers`: -```jsx {2,6,8,10} +```jsx {6,8,10} // app/layout.tsx import {Providers} from "./providers"; @@ -244,7 +244,7 @@ of them by adding the `dark`/`light` class to the `html` tag. See the [theme doc Now you can import any NextUI component directly in your Server Components without needing to use the `use client;` directive: -```jsx {2,7} +```jsx {2} // app/page.tsx import {Button} from '@nextui-org/button'; @@ -338,7 +338,7 @@ Filtered results for: Enter something to filter You still need to add the provider to your app manually (we are working on automating this step). -```jsx {3,7,9} +```jsx {7,9} // app/providers.tsx import {NextUIProvider} from '@nextui-org/react' @@ -354,7 +354,7 @@ export function Providers({children}: { children: React.ReactNode }) { -```jsx {3,7,9,11} +```jsx {7,9,11} // app/layout.tsx import {Providers} from "./providers"; @@ -413,7 +413,7 @@ the following code to your `tailwind.config.js` file: **Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` -```js {2,9,14-15} +```js {9,14-15} // tailwind.config.js import {nextui} from "@nextui-org/react"; @@ -438,7 +438,7 @@ export default config; Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`: -```jsx {2,6,8} +```jsx {6,8} // pages/_app.js import {NextUIProvider} from '@nextui-org/react' @@ -457,7 +457,7 @@ export default MyApp; Now you can import any NextUI component wherever you want: -```jsx {1,6} +```jsx {1} import {Button} from '@nextui-org/react' export default function Page() { diff --git a/apps/docs/content/docs/frameworks/remix.mdx b/apps/docs/content/docs/frameworks/remix.mdx index 8a4e6848b6..3c7c9e8e13 100644 --- a/apps/docs/content/docs/frameworks/remix.mdx +++ b/apps/docs/content/docs/frameworks/remix.mdx @@ -56,7 +56,7 @@ the following code to your `tailwind.config.js` file: **Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` -```ts {2,10,15-16} +```ts {10,15-16} // tailwind.config.ts const { nextui } = require("@nextui-org/react"); diff --git a/apps/docs/content/docs/frameworks/vite.mdx b/apps/docs/content/docs/frameworks/vite.mdx index fda73c1f05..fd9c6d3f27 100644 --- a/apps/docs/content/docs/frameworks/vite.mdx +++ b/apps/docs/content/docs/frameworks/vite.mdx @@ -57,7 +57,7 @@ the following code to your `tailwind.config.js` file: **Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules` -```js {2,8,13-14} +```js {8,13-14} // tailwind.config.js const { nextui } = require("@nextui-org/react"); @@ -81,7 +81,7 @@ After installing NextUI, you need to set up the `NextUIProvider` at the `root` o Go to the src directory and inside `main.jsx` or `main.tsx`, wrap `NextUIProvider` around App: -```jsx {4,10,12} +```jsx // main.tsx or main.jsx import React from 'react' import ReactDOM from 'react-dom/client' diff --git a/apps/docs/content/docs/guide/cli.mdx b/apps/docs/content/docs/guide/cli.mdx index 70e29cac9d..1c51a94fe5 100644 --- a/apps/docs/content/docs/guide/cli.mdx +++ b/apps/docs/content/docs/guide/cli.mdx @@ -178,12 +178,6 @@ Tailwind CSS settings have been updated in: /project-path/tailwind.config.js ## upgrade -Upgrade all the NextUI components within your project. - -```codeBlock bash -nextui upgrade --all -``` - Upgrade specific NextUI components within your project using the upgrade command to ensure they are up to date. ```codeBlock bash diff --git a/apps/docs/package.json b/apps/docs/package.json index 93a2347caa..1339f5f507 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -38,7 +38,7 @@ "@nextui-org/use-is-mobile": "workspace:*", "@radix-ui/react-scroll-area": "^1.0.5", "@react-aria/focus": "3.17.1", - "@react-aria/i18n": "3.11.1", + "@react-aria/i18n": "^3.10.2", "@react-aria/interactions": "3.21.3", "@react-aria/selection": "3.18.1", "@react-aria/ssr": "3.9.4", @@ -55,7 +55,7 @@ "color2k": "^2.0.2", "contentlayer": "^0.3.4", "date-fns": "^2.30.0", - "framer-motion": "^11.1.7", + "framer-motion": "^11.3.6", "github-slugger": "^2.0.0", "gray-matter": "^4.0.3", "hast-util-to-html": "7.1.2", @@ -104,7 +104,7 @@ "@react-types/shared": "3.23.1", "@tailwindcss/typography": "^0.5.9", "@types/canvas-confetti": "^1.4.2", - "@types/lodash": "^4.14.194", + "@types/lodash": "^4.17.5", "@types/marked": "^5.0.0", "@types/mdx": "^2.0.5", "@types/node": "20.2.5", diff --git a/apps/docs/scripts/update-search-meta.ts b/apps/docs/scripts/update-search-meta.ts index 74c70c2c36..192c862f62 100644 --- a/apps/docs/scripts/update-search-meta.ts +++ b/apps/docs/scripts/update-search-meta.ts @@ -54,7 +54,7 @@ async function getMDXMeta(file: string) { const result:ResultType[] = []; - const title = frontMatter.title || ""; + const title = !!frontMatter.title ? frontMatter.title : ""; result.push({ content: title, @@ -96,7 +96,7 @@ async function getSearchMeta(saveMode: "algolia" | "local" = "local") { .filter((file: any) => file.endsWith(".mdx")); for (const file of files) { - let result: ResultType[] = []; + let result = []; try { result = await getMDXMeta(file); diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css index 21033242d3..af9757ea1d 100644 --- a/apps/docs/styles/globals.css +++ b/apps/docs/styles/globals.css @@ -15,6 +15,7 @@ html { body { min-height: 100vh; + position: relative; } /* Experimental */ /* body::after { diff --git a/apps/docs/styles/sandpack.css b/apps/docs/styles/sandpack.css index 56d23993e9..01a48663fe 100644 --- a/apps/docs/styles/sandpack.css +++ b/apps/docs/styles/sandpack.css @@ -31,6 +31,11 @@ max-height: 600px; } +.sp-code-viewer.is-expanded .cm-scroller { + overflow: auto; + padding-bottom: 50px; +} + .cm-scroller::-webkit-scrollbar { width: 0px } @@ -68,4 +73,4 @@ .sp-highlight { @apply relative z-10 before:content-[''] before:w-full before:h-full before:absolute before:z-[-1] before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background before:border-l-2 border-l-white/80 dark:before:border-l-white/50; -} +} \ No newline at end of file diff --git a/apps/docs/utils/get-sponsors.ts b/apps/docs/utils/get-sponsors.ts index 06723ed2ea..046fa5cd3b 100644 --- a/apps/docs/utils/get-sponsors.ts +++ b/apps/docs/utils/get-sponsors.ts @@ -1,4 +1,4 @@ -import {uniqBy} from "lodash"; +import {uniqBy} from "@nextui-org/shared-utils"; import fetch from "node-fetch"; import {__PROD__} from "./env"; diff --git a/package.json b/package.json index a1d6b4bcd9..2cf1cb1653 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,9 @@ "test": "jest --verbose --config ./jest.config.js", "typecheck": "turbo typecheck", "lint": "pnpm lint:pkg && pnpm lint:docs", - "lint:pkg": "eslint -c .eslintrc.json ./packages/**/*.{ts,tsx}", + "lint:pkg": "eslint -c .eslintrc.json ./packages/**/**/*.{ts,tsx}", "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}", - "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/*.{ts,tsx}", + "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/**/*.{ts,tsx}", "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}", "check:rap": "tsx scripts/check-rap-updates.ts", "fix:rap": "tsx scripts/fix-rap.ts", diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx index ac63c95cbe..60f8e30b3a 100644 --- a/packages/components/accordion/__tests__/accordion.test.tsx +++ b/packages/components/accordion/__tests__/accordion.test.tsx @@ -1,8 +1,7 @@ import * as React from "react"; import {act, render} from "@testing-library/react"; import {focus} from "@nextui-org/test-utils"; -import userEvent, {UserEvent} from "@testing-library/user-event"; -import {Input} from "@nextui-org/input"; +import userEvent from "@testing-library/user-event"; import {Accordion, AccordionItem} from "../src"; @@ -11,12 +10,6 @@ import {Accordion, AccordionItem} from "../src"; const spy = jest.spyOn(console, "error").mockImplementation(() => {}); describe("Accordion", () => { - let user: UserEvent; - - beforeEach(() => { - user = userEvent.setup(); - }); - afterEach(() => { jest.clearAllMocks(); }); @@ -122,7 +115,7 @@ describe("Accordion", () => { expect(button).toHaveAttribute("aria-expanded", "false"); await act(async () => { - await user.click(button); + await userEvent.click(button); }); expect(button).toHaveAttribute("aria-expanded", "true"); @@ -168,12 +161,12 @@ describe("Accordion", () => { }); await act(async () => { - await user.keyboard("[ArrowDown]"); + await userEvent.keyboard("[ArrowDown]"); }); expect(secondButton).toHaveFocus(); await act(async () => { - await user.keyboard("[ArrowUp]"); + await userEvent.keyboard("[ArrowUp]"); }); expect(firstButton).toHaveFocus(); }); @@ -201,12 +194,12 @@ describe("Accordion", () => { }); await act(async () => { - await user.keyboard("[Home]"); + await userEvent.keyboard("[Home]"); }); expect(firstButton).toHaveFocus(); await act(async () => { - await user.keyboard("[End]"); + await userEvent.keyboard("[End]"); }); expect(secondButton).toHaveFocus(); }); @@ -234,7 +227,7 @@ describe("Accordion", () => { }); await act(async () => { - await user.keyboard("[Tab]"); + await userEvent.keyboard("[Tab]"); }); expect(secondButton).toHaveFocus(); }); @@ -277,7 +270,7 @@ describe("Accordion", () => { expect(button).toHaveAttribute("aria-expanded", "false"); await act(async () => { - await user.click(button); + await userEvent.click(button); }); expect(button).toHaveAttribute("aria-expanded", "true"); @@ -301,78 +294,17 @@ describe("Accordion", () => { expect(item1.querySelector("[role='region']")).toBeInTheDocument(); await act(async () => { - await user.click(button); + await userEvent.click(button); }); const item2 = wrapper.getByTestId("item-2"); const button2 = item2.querySelector("button") as HTMLElement; await act(async () => { - await user.click(button2); + await userEvent.click(button2); }); expect(item1.querySelector("[role='region']")).toBeInTheDocument(); expect(item2.querySelector("[role='region']")).toBeInTheDocument(); }); - - it("should handle arrow key navigation within Input inside AccordionItem", async () => { - const wrapper = render( - - - - - - Accordion Item 2 description - - , - ); - - const input = wrapper.getByLabelText("name"); - - const firstButton = await wrapper.getByRole("button", {name: "Accordion Item 1"}); - - await act(() => { - focus(firstButton); - }); - await act(async () => { - await user.keyboard("[Tab]"); - }); - expect(input).toHaveFocus(); - - await act(async () => { - await user.keyboard("aaa"); - }); - expect(input).toHaveValue("aaa"); - - await act(async () => { - await user.keyboard("[ArrowLeft]"); - await user.keyboard("b"); - }); - expect(input).toHaveValue("aaba"); - - await act(async () => { - await user.keyboard("[ArrowRight]"); - await user.keyboard("c"); - }); - expect(input).toHaveValue("aabac"); - }); - - it("should pass dividerProps to divider", () => { - const {getByRole} = render( - - - Accordion Item 1 description - - - Accordion Item 2 description - - , - ); - - expect(getByRole("separator")).toHaveClass("bg-rose-500"); - }); }); diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json index d1e2e8d445..ccb267e254 100644 --- a/packages/components/accordion/package.json +++ b/packages/components/accordion/package.json @@ -42,7 +42,7 @@ "peerDependencies": { "react": ">=18", "react-dom": ">=18", - "framer-motion": ">=10.17.0", + "framer-motion": ">=11.0.22", "@nextui-org/theme": ">=2.1.0", "@nextui-org/system": ">=2.0.0" }, @@ -54,6 +54,7 @@ "@nextui-org/framer-utils": "workspace:*", "@nextui-org/divider": "workspace:*", "@nextui-org/use-aria-accordion": "workspace:*", + "@nextui-org/dom-animation": "workspace:*", "@react-aria/interactions": "3.21.3", "@react-aria/focus": "3.17.1", "@react-aria/utils": "3.24.1", @@ -69,7 +70,7 @@ "@nextui-org/avatar": "workspace:*", "@nextui-org/input": "workspace:*", "@nextui-org/test-utils": "workspace:*", - "framer-motion": "^11.0.22", + "framer-motion": "^11.3.6", "clean-package": "2.2.0", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx index ee3fc18e19..0c2ac20d87 100644 --- a/packages/components/accordion/src/accordion-item.tsx +++ b/packages/components/accordion/src/accordion-item.tsx @@ -3,13 +3,15 @@ import type {Variants} from "framer-motion"; import {forwardRef} from "@nextui-org/system"; import {useMemo, ReactNode} from "react"; import {ChevronIcon} from "@nextui-org/shared-icons"; -import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion"; +import {AnimatePresence, LazyMotion, m, useWillChange} from "framer-motion"; import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils"; import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item"; export interface AccordionItemProps extends UseAccordionItemProps {} +const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default); + const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { const { Component, @@ -69,9 +71,6 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { initial="exit" style={{willChange}} variants={transitionVariants} - onKeyDown={(e) => { - e.stopPropagation(); - }} {...motionProps} >
{children}
@@ -88,9 +87,6 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { initial="exit" style={{willChange}} variants={transitionVariants} - onKeyDown={(e) => { - e.stopPropagation(); - }} {...motionProps} >
{children}
diff --git a/packages/components/accordion/src/accordion.tsx b/packages/components/accordion/src/accordion.tsx index 35a7bf73c5..b14a004133 100644 --- a/packages/components/accordion/src/accordion.tsx +++ b/packages/components/accordion/src/accordion.tsx @@ -19,7 +19,6 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => { disableAnimation, handleFocusChanged: handleFocusChangedProps, itemClasses, - dividerProps, } = useAccordion({ ...props, ref, @@ -46,7 +45,7 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => { {!item.props.hidden && !isSplitted && showDivider && - index < state.collection.size - 1 && } + index < state.collection.size - 1 && } ); }); diff --git a/packages/components/accordion/src/use-accordion.ts b/packages/components/accordion/src/use-accordion.ts index 2948ed61e7..7f9e91c47a 100644 --- a/packages/components/accordion/src/use-accordion.ts +++ b/packages/components/accordion/src/use-accordion.ts @@ -1,9 +1,8 @@ import type {SelectionBehavior, MultipleSelection} from "@react-types/shared"; import type {AriaAccordionProps} from "@react-types/accordion"; import type {AccordionGroupVariantProps} from "@nextui-org/theme"; -import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system"; -import {useProviderContext} from "@nextui-org/system"; +import {useProviderContext, type HTMLNextUIProps, type PropGetter} from "@nextui-org/system"; import {ReactRef, filterDOMProps} from "@nextui-org/react-utils"; import React, {Key, useCallback} from "react"; import {TreeState, useTreeState} from "@react-stately/tree"; diff --git a/packages/components/accordion/stories/accordion.stories.tsx b/packages/components/accordion/stories/accordion.stories.tsx index e752c130dd..ccb3390027 100644 --- a/packages/components/accordion/stories/accordion.stories.tsx +++ b/packages/components/accordion/stories/accordion.stories.tsx @@ -13,7 +13,7 @@ import { InvalidCardIcon, } from "@nextui-org/shared-icons"; import {Avatar} from "@nextui-org/avatar"; -import {Input, Textarea} from "@nextui-org/input"; +import {Input} from "@nextui-org/input"; import {Button} from "@nextui-org/button"; import {Accordion, AccordionProps, AccordionItem, AccordionItemProps} from "../src"; @@ -354,7 +354,7 @@ const WithFormTemplate = (args: AccordionProps) => { } /> -