Pull Request Number: 4241 Title: Blog fixes Base Branch: main Head Branch: canary Author: jrgarciadev URL: https://github.com/nextui-org/nextui/pull/4241 State: MERGED Created At: 2024-12-06T16:55:35Z Merged At: 2024-12-06T16:58:37Z Participants: jrgarciadev, ryxxn, wingkwong, abhinav700, macci001, dgz9, juliesaia, alexnguyennz, nnmax, ryo-manba, ShrinidhiUpadhyaya, sanuj21, PentSec, winchesHe, awesome-pro, CanRau, AzpektDev, Peterl561, vinroger, jubar Description: Closes # ๐Ÿ“ Description โ›ณ๏ธ Current behavior (updates) ๐Ÿš€ New behavior ๐Ÿ’ฃ Is this a breaking change (Yes/No): ๐Ÿ“ Additional Information Summary by CodeRabbit Release Notes for NextUI v2.6.0 New Features Introduced four new components: Form, Drawer, Input OTP, and Alert. Enhanced Form component with built-in validation and accessibility. Added support for React 19 and Next.js 15. Implemented a new use-theme hook for runtime theme management. Added draggable modal support. Bug Fixes and Improvements Various bug fixes and performance enhancements, including virtualization for collection-based components. Improved TypeScript support and path type safety for routers. Documentation Updated documentation reflecting new components and API changes. Commits: - fix(input): ensure clear button is not focusable when disabled (#3774) * fix(input): ensure clear button is not focusable when disabled * test(input): add test to ensure clear button is not focusable when disabled * chore: add changeset for clear button focus fix when input is disabled * fix(input): update clear button to use button element * test(input): add focus test when disabled and update tests for clear button using button element * test(input): replace querySelector with getByRole for clear button * fix(input): set tabIndex to -1 for clear button * test(input): ensure clear button is not focusable\n- fix(image): add missing `w` to `getWrapperProps` dependency (#3802) * fix(image): add missing `w` to `getWrapperProps` dependency * chore(changeset): add changeset\n- fix(autocomplete): popover should remain open after clicking clear button (#3788) * fix: add state.open() so that dropdown is not closed * chore: add changeset * chore(autocomplete): add testcases for keeping lisbox open when clearButton is clicked * chore: update changeset * chore(autocomplete): change the docs for test cases * chore(changeset): update changeset message and add issue number --------- Co-authored-by: WK Wong \n- refactor(docs): example of blurred card (#3741) * docs(card): adding info regarding the gradient for blurred card * chore(nit): adding example * chore(docs): revise content for card isBlurred example * chore(docs): revise isBlurred note --------- Co-authored-by: Maharshi Alpesh Co-authored-by: WK Wong \n- fix(docs): replace twitter logo/links with x logo/links (#3815) * fix(docs): replace Twitter logo/links with X logo/links * docs: update twitter references to x * docs: update changeset for twitter to x changes * docs: update twitter references to x * docs: update twitter references to x * chore(docs): undo .sponsorsrc since it's generated * refactor(docs): remove unnecessary classes * chore(docs): undo .sponsorsrc since it's generated --------- Co-authored-by: WK Wong \n- fix(date-picker): adding props from calendarProps to getCalendarProps (#3773) * fix(date-picker): adding props from calendarProps to the getCalendarProps * chore(date-picker): adding the changeset * chore(changeset): add issue number --------- Co-authored-by: Maharshi Alpesh Co-authored-by: WK Wong \n- feat(autocomplete): automatically focus first non-disabled item (#2186) Co-authored-by: WK Wong \n- docs(accordion): add overflow to custom motion example (#3793)\n- fix(docs): typos in dark mode page (#3823)\n- fix(theme): fullWidth in input and select (#3768) * fix(input): fixing the fullWidth functionality * chore(changeset): add issue number * chore(changeset): revise changeset message --------- Co-authored-by: Maharshi Alpesh Co-authored-by: WK Wong \n- fix(autocomplete): exit animation on popover close (#3845) * fix(autocomplete): exit animation on popover close * refactor(autocomplete): getListBoxProps --------- Co-authored-by: WK Wong \n- chore: merge branch with main\n- refactor(theme): replace the use of RTL-specific styles with logical properties (#3868) * chore(rtl): remove the usages of rtl * chore(changeset): adding the changeset * chore(changeset): update changeset message --------- Co-authored-by: WK Wong \n- fix(select): label placement discrepancy in Select (#3853) * fix(select): label placement incorrect in case of multiline * chore(select): adding the changeset * chore(select): adding the tests * chore(select): code imrovement, wkw's suggestions * chore(changeset): update changeset message --------- Co-authored-by: WK Wong \n- fix(theme): label placement in select and input (#3869) * fix(theme): fix the label placement * chore(changeset): adding the changeset * chore(select): adding comments\n- fix(docs): avoid translating the code block (#3878) * docs(Codeblock): avoid code be translated * fix(docs): lint issue --------- Co-authored-by: WK Wong \n- fix(listbox): change listBoxItem key to optional (#3883) * fix(listbox): listBoxItem key to optional * chore: add defaultSelectedKeys test for numeric keys and ids * chore: add changeset\n- chore: comment out section prompts in PR template (#3884)\n- chore(test): update testing libraries and refactor (#3886)\n- fix(theme): show margin only with label in Switch component (#3861) * fix(switch): removed right margin in wrapper #3791 * feat(changeset): added changeset * fix(switch): removed me-2 in wrapper * fix(switch): added ms-2 to label * chore(changeset): correct package and message --------- Co-authored-by: WK Wong \n- fix(theme): removed pseudo cancel btn from input (#3912) * fix(theme): removed pseudo cancel btn from input * chore(changeset): adding the changeset * fix(input): conditionally hiding the webkit search * chore(changeset): revise changeset message --------- Co-authored-by: WK Wong \n- refactor(docs): dx improvement in accordion (#3856) * refactor: improve dx for writing a docs component (#2544) * refactor: improve dx for write a docs component Signed-off-by: Innei * refactor(docs): switch to contentlayer2 * chore(docs): rename to avoid conflict * refactor(docs): switch to next-contentlayer2 * refactor(docs): revise docs lib * chore(deps): bump docs related dependencies * fix(use-aria-multiselect): type issue due to ts version bump --------- Signed-off-by: Innei Co-authored-by: WK Wong * refactor(docs): accordion codes * feat(docs): declare module `*.jsx?raw` * feat(docs): include `**/*.jsx` * fix(docs): incorrect content * chore(docs): add new lines * refactor(docs): lint --------- Signed-off-by: Innei Co-authored-by: Innei \n- fix(docs): typos in hero section (#3928)\n- fix(theme): support RTL for breadcrumbs (#3927) * fix(breadcrumbs): added separator rotation for RTL #2486 * chore(changeset): added changeset\n- fix(docs): removed unused import and merged classNames in dropdown (#3936) * fix(breadcrumbs): added separator rotation for RTL #2486 * chore(changeset): added changeset * fix(docs): removed unused Link import and merged classnames in dropdown\n- fix: avatar filter disableAnimation to dom prop (#3946)\n- feat: add git hook to auto update dependencies (#3365) * feat: add git hook to auto update dependencies * feat: update color\n- fix: prevent test matcher warning (#3893) * fix: prevent test matcher warning * chore: add node types * chore: update Jest related packages * chore: run pnpm install\n- fix(tabs): correct inert value for true condition (#3978)\n- Alert component (#3982) * feat(alert): began the work on alert component * fix(readme): making correction * chore(deps): change to 2.0.0 * chore(docs): update README.md * feat(theme): init alert tv * chore(alert): update package.json * feat(alert): init alert storybook structure * chore(changeset): add changeset * chore(changeset): change to minor * chore(alert): revise alert package.json * feat(alert): init test structure * chore(deps): pnpm-lock.yaml * feat(alert): initailized theme and basic structure * feat(alert): completed use-alert.ts and alert.tsx * feat(alert): remove innerWrapper, replace helperWrapper with mainWrapper, adding isCloseable prop * feat(alert): adding isCloseable prop to baseWrapper dependency * feat(alert): setting the default value of isCloseable prop to true * feat(alert): moving CloseIcon inside the button * feat(alert): updated package.json * feat(alert): default variant and default story * feat(alert): adding color and radius stories * feat(alert): completed the styling * feat(alert): add stories for isCloseable prop and restyle other stories * feat(alert): correcting ref type * feat(alert): add test cases * feat(alert): remove startContent and endContent props * feat(alert): make styling more accurate * feat(alert): fixed default props * feat(alert): fixed theme docs * feat(alert): add logic for icons * feat(alert): begin to add docs * chore(alert): implement the changes suggested in code review * feat(alert): add onclose prop to alert * feat(alert): add test cases * docs(alert): add onClose event * feat(docs): add alert to routes.json * fix(alert): correct the text colors * docs(alert): fix imports and syntax errors * chore(alert): implement the changes suggested in code review * chore(alert): lint the code and change isCloseable to isClosable * chore(alert): lint the code * chore(alert): run pnpm i * fix(alert): fix the logic for close button and add test case * docs(alert): fix docs, change isCloseable to isClosable and change docs for isClosable property * chore(alert): add the support for RTL, refactor the code and fix the typos * docs(alert): grammer issues fix * fix(alert): replace rtl with ms * chore(alert): custom style and custom implementation, remove isClosable={false}, refactor, fix typos * chore(alert): linting and implement coderabbit suggestions * chore(alert): refactor and typos fix * chore(alert): add import for closeIcon * chore(alert): add props for closeIcon * chore(alert): refactor fixes * chore(alert): implement ryo-manba's suggestion on close Icon * chore(alert): make alert more responsive * chore(alert): fix grammer issues suggested by coderabbit * fix(alert): add max-w property to make alert responsive * chore(alert): improve responsiveness and refactor alertIcon * chore(alert): add missing dependency to useMemo * chore(alert): implement coderabbit's suggestions * chore(alert): update docs and refactor * chore(alert): refactor alertIcon and implement coderabbit's suggestion * chore: fixes --------- Co-authored-by: Abhinav Agarwal Co-authored-by: WK Wong Co-authored-by: Abhinav Agarwal <78839973+abhinav700@users.noreply.github.com>\n- Feat/add draggable modal (#3983) * feat(hooks): add use-draggable hook * feat(components): [modal] export use-draggable * docs(components): [modal] add draggable modal * feat(components): [modal] add ref prop for modal-header * chore(components): [modal] add draggable modal for storybook * chore: add changeset for draggable modal * docs(hooks): [use-draggable] fix typo * chore: upper changeset * chore(components): [modal] add overflow draggable modal to sb * test(components): [modal] add draggable modal tests * build: update pnpm-lock * chore(changeset): include issue number * feat(hooks): [use-draggable] set user-select to none when during the dragging * docs(components): [modal] update code demo title * docs(components): [modal] condense description for draggable overflow * feat(hooks): [use-draggable] change version to 0.1.0 * refactor(hooks): [use-draggable] use use-move implement use-draggable * feat(hooks): [use-draggable] remove repeated user-select * test(components): [modal] update test case to use-draggable base use-move * docs(components): [modal] update draggable examples * fix(hooks): [use-draggable] fix mobile device touchmove event conflict * refactor(hooks): [use-draggable] remove drag ref prop * refactor(hooks): [use-draggable] draggable2is-disabled overflow2can-overflow * test(components): [modal] add draggble disable test * chore(hooks): [use-draggable] add commant for body touchmove * Update packages/hooks/use-draggable/src/index.ts Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> * fix(hooks): [use-draggable] import use-callback * test(components): [modal] add mobile-sized test for draggable * chore(hooks): [use-draggable] add use-callback for func * chore(hooks): [use-draggable] update version to 2.0.0 * chore: fix typo * Update .changeset/soft-apricots-sleep.md * fix: pnpm lock * fix: build * chore: add updated moadl --------- Co-authored-by: wzc520pyfm <1528857653@qq.com> Co-authored-by: ีกษจีผษขำ„ีกึ…ีผษข Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>\n- chore: upgrade react-aria / React 19 & Next.js 15 support (#3732) * chore: upgrade react-aria * chore: add changeset * chore: fix type error --------- Co-authored-by: Junior Garcia \n- feat(date-picker): add selectorButtonPlacement property (#3248) * feat(date-picker): add selectorButtonPlacement property * chore: update changeset * Update .changeset/neat-donkeys-accept.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Junior Garcia \n- feat: add tab ref (#3974) * feat: add tab ref * feat: add changeset\n- feat: pre-release workflow (#2910) * feat(workflow): pre-release * feat(workflow): exit pre-release * chore(workflow): update version & publish commands * fix(workflow): add missing attributes and use schangeset:beta cmd * feat(root): add changeset:beta * fix(workflows): revise pre-release logic * fix(workflows): add missing run * fix(workflows): use changeset:exit with version instead * feat(root): add changeset:exit cmd * refactor(workflows): add pths, id, and format * feat(workflows): enter pre-release mode * chore(workflows): remove pre.json only * refactor(workflows): remove enter-pre-release-mode * fix(workflows): incorrect url * refactor(root): remove unused exit command * refactor(workflows): add comments * feat(changeset): change to main branch as baseBranch * feat(root): add changeset:canary * refactor(workflows): remove unused workflow * feat(workflow): support canary pre-release mode * refactor(docs): change to canary\n- feat(popover): added control for closing popover on scroll (#3595) * fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * docs(changeset): resolved extra file * feat(popover): added control for closing popover on scroll * update(changeset): correction * feat(popover): removed extra story * refactor(test): corrected test for both true and false values of shouldCloseOnScroll * refactor(docs): added shouldCloseOnScroll prop * chore(changeset): change to minor --------- Co-authored-by: ีกำ„ีก \n- feat: add month and year pickers to DateRangePicker and RangeCalendar (#3302) * feat: add month and year pickers to DateRangePicker and RangeCalendar * chore: update docs * Update .changeset/kind-cobras-travel.md * chore: react package version --------- Co-authored-by: Junior Garcia \n- chore(deps): bump tailwind-merge version (#3657) * chore(deps): bump tailwind-merge versions * chore(theme): adopt latest extendTailwindMerge * chore(changeset): add changeset * chore(changeset): change to minor * Update .changeset/grumpy-mayflies-rhyme.md --------- Co-authored-by: Junior Garcia \n- feat: added drawer component (#3986) Signed-off-by: The1111mp Co-authored-by: The1111mp \n- refactor: optimisations (#3523) * refactor: replace lodash with native approaches * refactor(deps): update framer-motion versions * feat(utilities): add @nextui-org/dom-animation * refactor(components): load domAnimation dynamically * refactor(deps): add @nextui-org/dom-animation * fix(utilities): relocate index.ts * feat(changeset): framer motion optimization * chore(deps): bump framer-motion version * fix(docs): conflict issue * refactor(hooks): remove the unnecessary this aliasing * refactor(utilities): remove the unnecessary this aliasing * chore(docs): remove {} so that it won't be true all the time * chore(dom-animation): end with new line * refactor(hooks): use debounce from `@nextui-org/shared-utils` * chore(deps): add `@nextui-org/shared-utils` * refactor: move mapKeys logic to `@nextui-org/shared-utils` * refactor: use `get` from `@nextui-org/shared-utils` * refactor(docs): use `get` from `@nextui-org/shared-utils` * refactor(shared-utils): mapKeys * chore(deps): bump framer-motion version * chore(deps): remove lodash * refactor(docs): use intersectionBy from shared-utils * feat(shared-utils): add intersectionBy * chore(dom-animation): remove extra blank line * refactor(shared-utils): revise intersectionBy * fix(modal): add willChange * refactor(shared-utils): add comments * fix: build & tests --------- Co-authored-by: Junior Garcia \n- feat(hooks): use-theme hook (#3169) * feat(docs): update dark mode content * feat(hooks): @nextui-org/use-theme * chore(docs): revise ThemeSwitcher code * refactor(hooks): simplify useTheme and support custom theme names * feat(hooks): add use-theme test cases * feat(changeset): add changeset * refactor(hooks): make localStorageMock globally and clear before each test * fix(docs): typo * fix(hooks): coderabbitai comments * chore(hooks): remove unnecessary + * chore(changeset): change to minor * feat(hooks): handle system theme * chore(hooks): add EOL * refactor(hooks): add default theme * refactor(hooks): revise useTheme * refactor(hooks): resolve pr comments * refactor(hooks): resolve pr comments * refactor(hooks): resolve pr comments * refactor(hooks): remove unused theme in dependency array * chore(docs): typos * refactor(hooks): mark system as key for system theme * chore: merged with canary --------- Co-authored-by: Junior Garcia \n- Fix/avatar flashing (#3987) * fix(use-image): cached image flashing * chore: merged with canary --------- Co-authored-by: Rakha Kanz Kautsar \n- refactor(menu): Use `useMenu` and `useMenuItem` from RA (#3261) * refactor(menu): use useMenu from react-aria instead * refactor(menu): use useMenuItem from react-aria instead * feat(changeset): add changeset * chore: merged with canary * fix: dropdown tests --------- Co-authored-by: Junior Garcia \n- fix(theme): added stripe color gradients for progress (#3938) * fix(breadcrumbs): added separator rotation for RTL #2486 * chore(changeset): added changeset * fix(docs): removed unused Link import and merged classnames in dropdown * fix(theme):added stripe color gradients for progress #1933 * refactor(theme): added stripe-size and createStripeGradient\n- chore: add all minor releases\n- fix(docs): invalid canary storybook link (#4030)\n- fix(use-image): image ReferenceError in SSR (#4122) * fix(use-image): image ReferenceError in SSR * fix(use-image): sync with beta * fix(use-image): sync with beta * chore(use-image): remove unnecessary comments\n- fix(docs): buildLocation expects an object (#4118) * fix(docs): routing.mdx * Delete .changeset/pre.json\n- chore: merged with main\n- chore(docs): update yarn installation command (#4132) There is no `-g` flag in yarn. `global` is a command which must immediately follow yarn. Source: https://classic.yarnpkg.com/lang/en/docs/cli/global/\n Labels: Comments: - vercel: [vc]: #jTAisewq0ydFSEydCyUctP8YmAkIh65eG8AMc2Kmolw=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJuZXh0dWktZG9jcy12MiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2RvY3MiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmV4dHVpLW9yZy9uZXh0dWktZG9jcy12Mi9BMTYyQnZpQkJDb0VtcXZFVTRzZDg0Zkthb3F2IiwicHJldmlld1VybCI6IiIsIm5leHRDb21taXRTdGF0dXMiOiJDQU5DRUxFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifX0seyJuYW1lIjoibmV4dHVpLXN0b3J5Ym9vay12MiIsInJvb3REaXJlY3RvcnkiOiJwYWNrYWdlcy9zdG9yeWJvb2siLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmV4dHVpLW9yZy9uZXh0dWktc3Rvcnlib29rLXYyLzZxS1lGMnlnVmY0R1F6ejF5ZjFZQzRyeWZqSzciLCJwcmV2aWV3VXJsIjoiIiwibmV4dENvbW1pdFN0YXR1cyI6IkNBTkNFTEVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9fV19 **The latest updates on your projects**. Learn more about [Vercel for Git โ†—๏ธŽ](https://vercel.link/github-learn-more) | Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **nextui-docs-v2** | ๐Ÿ›‘ Canceled ([Inspect](https://vercel.com/nextui-org/nextui-docs-v2/A162BviBBCoEmqvEU4sd84fKaoqv)) | | | Dec 6, 2024 5:05pm | | **nextui-storybook-v2** | ๐Ÿ›‘ Canceled ([Inspect](https://vercel.com/nextui-org/nextui-storybook-v2/6qKYF2ygVf4GQzz1yf1YC4ryfjK7)) | | | Dec 6, 2024 5:05pm | \n- changeset-bot: ### โš ๏ธ No Changeset found Latest commit: 88782fc6b4c72d9bb7dcef65dd1c17282d41aca4 Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**
This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md). [Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/nextui-org/nextui/new/canary?filename=.changeset/large-news-act.md&value=---%0A%22%40nextui-org%2Fdocs%22%3A%20patch%0A---%0A%0ABlog%20fixes%0A) \n- coderabbitai: > [!CAUTION] > ## Review failed > > The pull request is closed. ## Walkthrough The changes in this pull request introduce NextUI version 2.6.0, which includes four new components: Form, Drawer, Input OTP, and Alert. It updates existing components with new props and methods, enhances TypeScript support, and improves accessibility features. The release also focuses on performance enhancements and bug fixes. Additionally, new usage examples for the Form and Input OTP components are provided, showcasing their implementation and validation logic. ## Changes | File Path | Change Summary | |-----------------------------------------------------|---------------------------------------------------------------------------------------------------| | `apps/docs/content/blog/v2.6.0.mdx` | Added release notes for NextUI 2.6.0, detailing new components, bug fixes, and breaking changes. | | `src/components/Form.jsx` | New component added: `Form` with built-in validation and submission handling. | | `src/components/Drawer.jsx` | New component added: `Drawer` providing a sliding panel. | | `src/components/InputOtp.jsx` | New component added: `Input OTP` for one-time password entry. | | `src/components/Alert.jsx` | New component added: `Alert` for displaying messages. | | `src/hooks/useTheme.js` | New hook added: `use-theme` for runtime theme management. | | `src/providers/NextUIProvider.jsx` | Updated method signatures for `useHref` and `navigate`. | | `src/components/DatePicker.jsx` | Updated method signature for `selectorButtonPlacement`. | | `src/components/Tabs.jsx` | Updated method signature for `tabRef`. | | `src/components/Popover.jsx` | Updated method signature for `shouldCloseOnScroll`. | | `src/components/Table.jsx` | Updated method signature for `isKeyboardNavigationDisabled`. | | `src/components/Textarea.jsx` | Updated method signature for `isClearable`. | | `src/components/Select.jsx` | Updated method signature for `hideEmptyContent`. | | `apps/docs/content/components/form/form-usage.raw.jsx` | New component `App` added demonstrating the usage of `Form`, `Input`, and `Button`. | | `apps/docs/content/components/form/real-time-validation.raw.jsx` | Modified `App` component to include new class name for styling. | | `apps/docs/content/components/form/usage.ts` | Updated import path for `App` component. | | `apps/docs/content/components/input-otp/input-otp-required.raw.jsx` | New component `App` added for OTP input handling. | | `apps/docs/content/components/input-otp/required.ts` | Updated import path for `App` component. | ## Possibly related PRs - **#3106**: This PR supplements validation behavior, which is relevant to the new `Form` component introduced in the main PR that includes built-in validation features. - **#3274**: This documentation refactor includes updates to the `input` component, which is related to the `Input OTP` component added in the main PR that also deals with form input handling. - **#3822**: This PR adds a forms guide, which directly relates to the new `Form` component and its usage in the main PR. - **#4198**: This PR addresses issues with `forwardRef` in several components, including dropdowns and menus, which may be relevant to the new components introduced in the main PR that could utilize similar patterns. - **#4204**: This PR fixes a double 'use client' directive in the `@nextui-org/react` package, which may indirectly relate to the overall stability and functionality of the new components introduced in the main PR. - **#4227**: This PR adds a new section for NextUI Pro on the landing page, which may enhance the visibility of the new components introduced in the main PR, although it does not directly relate to the code changes. ## Suggested labels `๐Ÿ“‹ Scope : Docs` ## Suggested reviewers - wingkwong ---
๐Ÿ“œ Recent review details **Configuration used: .coderabbit.yaml** **Review profile: CHILL**
๐Ÿ“ฅ Commits Reviewing files that changed from the base of the PR and between 935124cb795ed0eeda6d2aa83b820a640ea1eb28 and 88782fc6b4c72d9bb7dcef65dd1c17282d41aca4.
๐Ÿ“’ Files selected for processing (6) * `apps/docs/content/blog/v2.6.0.mdx` (1 hunks) * `apps/docs/content/components/form/form-usage.raw.jsx` (1 hunks) * `apps/docs/content/components/form/real-time-validation.raw.jsx` (1 hunks) * `apps/docs/content/components/form/usage.ts` (1 hunks) * `apps/docs/content/components/input-otp/input-otp-required.raw.jsx` (1 hunks) * `apps/docs/content/components/input-otp/required.ts` (1 hunks)
--- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
โค๏ธ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
๐Ÿชง Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
\n Files Changed: - apps/docs/content/blog/v2.6.0.mdx (modified, 29 changes)\n Patch: @@ -610,32 +610,25 @@ We try to keep the breaking changes to a minimum, but sometimes it's necessary t The nested group selectors for table themes have been updated to require explicit element selectors. You'll need to add `/tr` or `/th` to custom styles for group-data. -Before: -```css -group-data-[disabled=true]: text-foreground-300; -``` - -After: +```diff-tsx +// Before +- group-data-[disabled=true]:text-foreground-300; -```css -group-data-[disabled=true]/tr: text-foreground-300; +// After ++ group-data-[disabled=true]/tr:text-foreground-300; ``` #### Circular Progress Theme Location -The circular progress Tailwind variants have been moved from `circular-progress` to `progress`. You'll need to update your Tailwind CSS configuration: - -Before: - -```js -"./node_modules/@nextui-org/theme/dist/components/circular-progress.js"; -``` +The circular progress Tailwind variants have been moved from `circular-progress` to `progress`. You'll need to update your Tailwind CSS configuration `tailwind.config.js`: -After: +```diff-tsx +// Before +- "./node_modules/@nextui-org/theme/dist/components/circular-progress.js"; -```js -"./node_modules/@nextui-org/theme/dist/components/progress.js"; +// After ++ "./node_modules/@nextui-org/theme/dist/components/progress.js"; ``` \n- apps/docs/content/components/form/form-usage.raw.jsx (added, 35 changes)\n Patch: @@ -0,0 +1,35 @@ +import {Form, Input, Button} from "@nextui-org/react"; + +export default function App() { + const [submitted, setSubmitted] = React.useState(null); + + const onSubmit = (e) => { + e.preventDefault(); + + const data = Object.fromEntries(new FormData(e.currentTarget)); + + setSubmitted(data); + }; + + return ( +
+ + + {submitted && ( +
+ You submitted: {JSON.stringify(submitted)} +
+ )} +
+ ); +}\n- apps/docs/content/components/form/real-time-validation.raw.jsx (modified, 1 changes)\n Patch: @@ -16,6 +16,7 @@ export default function App() { return ( (
    {errors.map((error, i) => (\n- apps/docs/content/components/form/usage.ts (modified, 2 changes)\n Patch: @@ -1,4 +1,4 @@ -import App from "./usage.raw.jsx?raw"; +import App from "./form-usage.raw.jsx?raw"; const react = { "/App.jsx": App,\n- apps/docs/content/components/input-otp/input-otp-required.raw.jsx (added, 32 changes)\n Patch: @@ -0,0 +1,32 @@ +import {Button, InputOtp, Form} from "@nextui-org/react"; + +export default function App() { + const [otp, setOtp] = React.useState(""); + + return ( +
    { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + const otp = formData.get("otp"); + + setOtp(otp); + }} + > + + + {otp &&
    OTP submitted: {otp}
    } + + ); +}\n- apps/docs/content/components/input-otp/required.ts (modified, 2 changes)\n Patch: @@ -1,4 +1,4 @@ -import App from "./required.raw.jsx?raw"; +import App from "./input-otp-required.raw.jsx?raw"; const react = { "/App.jsx": App,\n