mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
refactor(modal): useDisclosure hooks added to manage modals
This commit is contained in:
Junior Garcia
parent
b0714ee4eb
commit
77b386e2ec
@ -1,5 +1,20 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
|
||||
@ -238,7 +238,7 @@ export const CustomWithHooks = (props: CheckboxProps) => {
|
||||
"outline-none ring-2 !ring-primary ring-offset-2 ring-offset-background dark:ring-offset-background-dark": isFocusVisible,
|
||||
}),
|
||||
content: clsx("text-primary", {
|
||||
"text-primary-contrastText pl-1": isSelected,
|
||||
"text-primary-foreground pl-1": isSelected,
|
||||
}),
|
||||
}}
|
||||
color="primary"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/drip
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/drip",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
|
||||
"keywords": [
|
||||
"drip"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
|
||||
"keywords": [
|
||||
"link"
|
||||
|
||||
@ -1,5 +1,28 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420135820
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- onOpenChange callback added to useDisclosure hook
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230420135820
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import * as React from "react";
|
||||
import {act, render, fireEvent} from "@testing-library/react";
|
||||
|
||||
import {Modal, ModalTrigger, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../src";
|
||||
import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../src";
|
||||
|
||||
describe("Modal", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(
|
||||
<Modal>
|
||||
<ModalTrigger>
|
||||
<button>Open Modal</button>
|
||||
</ModalTrigger>
|
||||
<Modal isOpen>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal header</ModalHeader>
|
||||
<ModalBody>Modal body</ModalBody>
|
||||
@ -25,10 +22,7 @@ describe("Modal", () => {
|
||||
const ref = React.createRef<HTMLElement>();
|
||||
|
||||
render(
|
||||
<Modal ref={ref}>
|
||||
<ModalTrigger>
|
||||
<button>Open Modal</button>
|
||||
</ModalTrigger>
|
||||
<Modal ref={ref} isOpen>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal header</ModalHeader>
|
||||
<ModalBody>Modal body</ModalBody>
|
||||
@ -42,9 +36,6 @@ describe("Modal", () => {
|
||||
test("should have the proper 'aria' attributes", () => {
|
||||
const {getByRole, getByText} = render(
|
||||
<Modal isOpen>
|
||||
<ModalTrigger>
|
||||
<button>Open Modal</button>
|
||||
</ModalTrigger>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal header</ModalHeader>
|
||||
<ModalBody>Modal body</ModalBody>
|
||||
@ -72,9 +63,6 @@ describe("Modal", () => {
|
||||
|
||||
const {getByLabelText} = render(
|
||||
<Modal isOpen onClose={onClose}>
|
||||
<ModalTrigger>
|
||||
<button>Open Modal</button>
|
||||
</ModalTrigger>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal header</ModalHeader>
|
||||
<ModalBody>Modal body</ModalBody>
|
||||
@ -97,9 +85,6 @@ describe("Modal", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Modal isOpen onClose={onClose}>
|
||||
<ModalTrigger>
|
||||
<button>Open Modal</button>
|
||||
</ModalTrigger>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal header</ModalHeader>
|
||||
<ModalBody>Modal body</ModalBody>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420135820",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
@ -39,9 +39,9 @@
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"@nextui-org/framer-transitions": "workspace:*",
|
||||
"@nextui-org/use-disclosure": "workspace:*",
|
||||
"@nextui-org/use-aria-button": "workspace:*",
|
||||
"@nextui-org/framer-transitions": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
@ -55,6 +55,7 @@
|
||||
"devDependencies": {
|
||||
"@nextui-org/input": "workspace:*",
|
||||
"@nextui-org/checkbox": "workspace:*",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"react-lorem-component": "0.13.0",
|
||||
"framer-motion": "^10.11.2",
|
||||
"@react-types/overlays": "^3.7.1",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Modal from "./modal";
|
||||
import ModalTrigger from "./modal-trigger";
|
||||
import ModalContent from "./modal-content";
|
||||
import ModalHeader from "./modal-header";
|
||||
import ModalBody from "./modal-body";
|
||||
@ -7,7 +6,6 @@ import ModalFooter from "./modal-footer";
|
||||
|
||||
// export types
|
||||
export type {ModalProps} from "./modal";
|
||||
export type {ModalTriggerProps} from "./modal-trigger";
|
||||
export type {ModalContentProps} from "./modal-content";
|
||||
export type {ModalHeaderProps} from "./modal-header";
|
||||
export type {ModalBodyProps} from "./modal-body";
|
||||
@ -15,9 +13,10 @@ export type {ModalFooterProps} from "./modal-footer";
|
||||
|
||||
// export hooks
|
||||
export {useModal} from "./use-modal";
|
||||
export * from "@nextui-org/use-disclosure";
|
||||
|
||||
// export context
|
||||
export * from "./modal-context";
|
||||
|
||||
// export components
|
||||
export {Modal, ModalTrigger, ModalContent, ModalHeader, ModalBody, ModalFooter};
|
||||
export {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter};
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import React, {Children, cloneElement, useMemo} from "react";
|
||||
import {pickChildren} from "@nextui-org/shared-utils";
|
||||
import {useAriaButton} from "@nextui-org/use-aria-button";
|
||||
import {Button} from "@nextui-org/button";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
|
||||
import {useModalContext} from "./modal-context";
|
||||
|
||||
export interface ModalTriggerProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* ModalTrigger opens the popover's content. It must be an interactive element
|
||||
* such as `button` or `a`.
|
||||
*/
|
||||
const ModalTrigger = forwardRef<ModalTriggerProps, "button">((props, _) => {
|
||||
const {triggerRef, getTriggerProps} = useModalContext();
|
||||
|
||||
const {children, ...otherProps} = props;
|
||||
|
||||
// force a single child
|
||||
const child = useMemo<any>(() => {
|
||||
if (typeof children === "string") return <p>{children}</p>;
|
||||
|
||||
return Children.only(children) as React.ReactElement & {
|
||||
ref?: React.Ref<any>;
|
||||
};
|
||||
}, [children]);
|
||||
|
||||
const {onPress, ...rest} = useMemo(() => {
|
||||
return getTriggerProps(mergeProps(child.props, otherProps), child.ref);
|
||||
}, [getTriggerProps, child.props, otherProps, child.ref]);
|
||||
|
||||
// validates if contains a NextUI Button as a child
|
||||
const [, triggerChildren] = pickChildren(children, Button);
|
||||
|
||||
const {buttonProps} = useAriaButton({onPress}, triggerRef);
|
||||
|
||||
const hasNextUIButton = useMemo<boolean>(() => {
|
||||
return triggerChildren?.[0] !== undefined;
|
||||
}, [triggerChildren]);
|
||||
|
||||
return cloneElement(child, mergeProps(rest, hasNextUIButton ? {onPress} : buttonProps));
|
||||
});
|
||||
|
||||
ModalTrigger.displayName = "NextUI.ModalTrigger";
|
||||
|
||||
export default ModalTrigger;
|
||||
@ -1,5 +1,5 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {Children, ReactNode} from "react";
|
||||
import {ReactNode} from "react";
|
||||
import {AnimatePresence} from "framer-motion";
|
||||
import {Overlay} from "@react-aria/overlays";
|
||||
|
||||
@ -8,23 +8,19 @@ import {ModalProvider} from "./modal-context";
|
||||
|
||||
export interface ModalProps extends Omit<UseModalProps, "ref"> {
|
||||
/**
|
||||
* The content of the popover. It is usually the `ModalTrigger`,
|
||||
* and `ModalContent`
|
||||
* The content of the modal. Usually the ModalContent
|
||||
*/
|
||||
children: ReactNode[];
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const Modal = forwardRef<ModalProps, "section">((props, ref) => {
|
||||
const {children, ...otherProps} = props;
|
||||
const context = useModal({ref, ...otherProps});
|
||||
|
||||
const [trigger, content] = Children.toArray(children);
|
||||
|
||||
const overlay = <Overlay>{content}</Overlay>;
|
||||
const overlay = <Overlay>{children}</Overlay>;
|
||||
|
||||
return (
|
||||
<ModalProvider value={context}>
|
||||
{trigger}
|
||||
{context.disableAnimation && context.isOpen ? (
|
||||
overlay
|
||||
) : (
|
||||
|
||||
@ -12,11 +12,11 @@ import Lorem from "react-lorem-component";
|
||||
import {
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalTrigger,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalProps,
|
||||
useDisclosure,
|
||||
} from "../src";
|
||||
|
||||
export default {
|
||||
@ -128,23 +128,27 @@ const content = (
|
||||
</ModalContent>
|
||||
);
|
||||
|
||||
const Template: ComponentStory<typeof Modal> = (args: ModalProps) => (
|
||||
<Modal {...args}>
|
||||
<ModalTrigger>
|
||||
<Button disableAnimation={!!args.disableAnimation}>Open Modal</Button>
|
||||
</ModalTrigger>
|
||||
{content}
|
||||
</Modal>
|
||||
);
|
||||
const Template: ComponentStory<typeof Modal> = (args: ModalProps) => {
|
||||
const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
|
||||
|
||||
const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => (
|
||||
<Modal {...args}>
|
||||
<ModalTrigger>
|
||||
<Button disableAnimation={!!args.disableAnimation}>Open Modal</Button>
|
||||
</ModalTrigger>
|
||||
<ModalContent>
|
||||
{(onClose) => (
|
||||
<>
|
||||
return (
|
||||
<>
|
||||
<Button onPress={onOpen}>Open Modal</Button>
|
||||
<Modal {...args} isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
{content}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
|
||||
const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onPress={onOpen}>Open Modal</Button>
|
||||
<Modal {...args} isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal Title</ModalHeader>
|
||||
<ModalBody>
|
||||
<Lorem count={5} />
|
||||
@ -152,20 +156,20 @@ const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) =>
|
||||
<ModalFooter>
|
||||
<Button onPress={onClose}>Close</Button>
|
||||
</ModalFooter>
|
||||
</>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => (
|
||||
<Modal {...args} scrollBehavior="outside">
|
||||
<ModalTrigger>
|
||||
<Button disableAnimation={!!args.disableAnimation}>Open Modal</Button>
|
||||
</ModalTrigger>
|
||||
<ModalContent>
|
||||
{(onClose) => (
|
||||
<>
|
||||
const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
|
||||
const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onPress={onOpen}>Open Modal</Button>
|
||||
<Modal {...args} isOpen={isOpen} scrollBehavior="outside" onOpenChange={onOpenChange}>
|
||||
<ModalContent>
|
||||
<ModalHeader>Modal Title</ModalHeader>
|
||||
<ModalBody>
|
||||
<Lorem count={5} />
|
||||
@ -173,33 +177,26 @@ const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) =
|
||||
<ModalFooter>
|
||||
<Button onPress={onClose}>Close</Button>
|
||||
</ModalFooter>
|
||||
</>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const OpenChangeTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Modal {...args} onOpenChange={(open) => setIsOpen(open)}>
|
||||
<ModalTrigger>
|
||||
<Button disableAnimation={!!args.disableAnimation}>Open Modal</Button>
|
||||
</ModalTrigger>
|
||||
<Button onPress={onOpen}>Open Modal</Button>
|
||||
<Modal {...args} isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent>
|
||||
{(onClose) => (
|
||||
<>
|
||||
<ModalHeader>Modal Title</ModalHeader>
|
||||
<ModalBody>
|
||||
<Lorem count={5} />
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button onPress={onClose}>Close</Button>
|
||||
</ModalFooter>
|
||||
</>
|
||||
)}
|
||||
<ModalHeader>Modal Title</ModalHeader>
|
||||
<ModalBody>
|
||||
<Lorem count={5} />
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button onPress={onClose}>Close</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<p className="text-sm">isOpen: {isOpen ? "true" : "false"}</p>
|
||||
@ -246,9 +243,11 @@ CustomMotion.args = {
|
||||
variants: {
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.3,
|
||||
},
|
||||
exit: {
|
||||
y: 20,
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
},
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -157,13 +157,7 @@ const WithMenuTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
|
||||
|
||||
return (
|
||||
<App ref={parentRef}>
|
||||
<Navbar
|
||||
isBordered
|
||||
parentRef={parentRef}
|
||||
position="sticky"
|
||||
onMenuOpenChange={setIsMenuOpen}
|
||||
{...args}
|
||||
>
|
||||
<Navbar parentRef={parentRef} position="sticky" onMenuOpenChange={setIsMenuOpen} {...args}>
|
||||
<NavbarContent>
|
||||
<NavbarMenuToggle
|
||||
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/snippet
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/snippet",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Display a snippet of copyable code for the command line.",
|
||||
"keywords": [
|
||||
"snippet"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spinner
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spinner",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Loaders express an unspecified wait time or display the length of a process.",
|
||||
"keywords": [
|
||||
"loading",
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/switch
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/switch",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
|
||||
"keywords": [
|
||||
"switch"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/tooltip
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tooltip",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A React Component for rendering dynamically positioned Tooltips",
|
||||
"keywords": [
|
||||
"tooltip"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/user
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/user",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Flexible User Profile Component.",
|
||||
"keywords": [
|
||||
"user"
|
||||
|
||||
@ -1,5 +1,45 @@
|
||||
# @nextui-org/react
|
||||
|
||||
## 0.0.0-dev-v2-20230420135820
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230420135820
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/react",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420135820",
|
||||
"description": "🚀 Beautiful and modern React UI library.",
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/system
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/system",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "NextUI system primitives",
|
||||
"keywords": [
|
||||
"system"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/theme
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/theme",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "The default theme for NextUI components",
|
||||
"keywords": [
|
||||
"theme",
|
||||
|
||||
@ -20,19 +20,19 @@ const base: SemanticBaseColors = {
|
||||
},
|
||||
content1: {
|
||||
DEFAULT: twColors.zinc[50],
|
||||
contrastText: twColors.zinc[900],
|
||||
foreground: twColors.zinc[900],
|
||||
},
|
||||
content2: {
|
||||
DEFAULT: twColors.zinc[100],
|
||||
contrastText: twColors.zinc[800],
|
||||
foreground: twColors.zinc[800],
|
||||
},
|
||||
content3: {
|
||||
DEFAULT: twColors.zinc[200],
|
||||
contrastText: twColors.zinc[700],
|
||||
foreground: twColors.zinc[700],
|
||||
},
|
||||
content4: {
|
||||
DEFAULT: twColors.zinc[300],
|
||||
contrastText: twColors.zinc[600],
|
||||
foreground: twColors.zinc[600],
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
@ -47,19 +47,19 @@ const base: SemanticBaseColors = {
|
||||
},
|
||||
content1: {
|
||||
DEFAULT: twColors.zinc[900],
|
||||
contrastText: twColors.zinc[50],
|
||||
foreground: twColors.zinc[50],
|
||||
},
|
||||
content2: {
|
||||
DEFAULT: twColors.zinc[800],
|
||||
contrastText: twColors.zinc[100],
|
||||
foreground: twColors.zinc[100],
|
||||
},
|
||||
content3: {
|
||||
DEFAULT: twColors.zinc[700],
|
||||
contrastText: twColors.zinc[200],
|
||||
foreground: twColors.zinc[200],
|
||||
},
|
||||
content4: {
|
||||
DEFAULT: twColors.zinc[600],
|
||||
contrastText: twColors.zinc[300],
|
||||
foreground: twColors.zinc[300],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -68,32 +68,32 @@ export const semanticColorsLight: SemanticColors = {
|
||||
...base.light,
|
||||
neutral: {
|
||||
...twColors.zinc,
|
||||
contrastText: readableColor(twColors.zinc[300]),
|
||||
foreground: readableColor(twColors.zinc[300]),
|
||||
DEFAULT: twColors.zinc[300],
|
||||
},
|
||||
primary: {
|
||||
...common.blue,
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.blue[500],
|
||||
},
|
||||
secondary: {
|
||||
...common.purple,
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.purple[500],
|
||||
},
|
||||
success: {
|
||||
...common.green,
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.green[500],
|
||||
},
|
||||
warning: {
|
||||
...common.yellow,
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.yellow[500],
|
||||
},
|
||||
danger: {
|
||||
...common.red,
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.red[500],
|
||||
},
|
||||
};
|
||||
@ -102,32 +102,32 @@ export const semanticColorsDark: SemanticColors = {
|
||||
...base.dark,
|
||||
neutral: {
|
||||
...swapColorValues(twColors.zinc),
|
||||
contrastText: readableColor(twColors.zinc[700]),
|
||||
foreground: readableColor(twColors.zinc[700]),
|
||||
DEFAULT: twColors.zinc[700],
|
||||
},
|
||||
primary: {
|
||||
...swapColorValues(common.blue),
|
||||
DEFAULT: common.blue[500],
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
},
|
||||
secondary: {
|
||||
...swapColorValues(common.purple),
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.purple[400],
|
||||
},
|
||||
success: {
|
||||
...swapColorValues(common.green),
|
||||
contrastText: readableColor(common.green[500]),
|
||||
foreground: readableColor(common.green[500]),
|
||||
DEFAULT: common.green[500],
|
||||
},
|
||||
warning: {
|
||||
...swapColorValues(common.yellow),
|
||||
contrastText: readableColor(common.yellow[500]),
|
||||
foreground: readableColor(common.yellow[500]),
|
||||
DEFAULT: common.yellow[500],
|
||||
},
|
||||
danger: {
|
||||
...swapColorValues(common.red),
|
||||
contrastText: common.white,
|
||||
foreground: common.white,
|
||||
DEFAULT: common.red[500],
|
||||
},
|
||||
};
|
||||
|
||||
@ -9,7 +9,7 @@ export type ColorScale = Partial<{
|
||||
700: string;
|
||||
800: string;
|
||||
900: string;
|
||||
contrastText: string;
|
||||
foreground: string;
|
||||
DEFAULT: string;
|
||||
}>;
|
||||
|
||||
|
||||
@ -62,22 +62,22 @@ const checkbox = tv({
|
||||
variants: {
|
||||
color: {
|
||||
neutral: {
|
||||
wrapper: "after:bg-neutral after:text-neutral-contrastText text-neutral-contrastText",
|
||||
wrapper: "after:bg-neutral after:text-neutral-foreground text-neutral-foreground",
|
||||
},
|
||||
primary: {
|
||||
wrapper: "after:bg-primary after:text-primary-contrastText text-primary-contrastText",
|
||||
wrapper: "after:bg-primary after:text-primary-foreground text-primary-foreground",
|
||||
},
|
||||
secondary: {
|
||||
wrapper: "after:bg-secondary after:text-secondary-contrastText text-secondary-contrastText",
|
||||
wrapper: "after:bg-secondary after:text-secondary-foreground text-secondary-foreground",
|
||||
},
|
||||
success: {
|
||||
wrapper: "after:bg-success after:text-success-contrastText text-success-contrastText",
|
||||
wrapper: "after:bg-success after:text-success-foreground text-success-foreground",
|
||||
},
|
||||
warning: {
|
||||
wrapper: "after:bg-warning after:text-warning-contrastText text-warning-contrastText",
|
||||
wrapper: "after:bg-warning after:text-warning-foreground text-warning-foreground",
|
||||
},
|
||||
danger: {
|
||||
wrapper: "after:bg-danger after:text-danger-contrastText text-danger-contrastText",
|
||||
wrapper: "after:bg-danger after:text-danger-foreground text-danger-foreground",
|
||||
},
|
||||
},
|
||||
size: {
|
||||
|
||||
@ -130,42 +130,42 @@ const dropdownItem = tv({
|
||||
variant: "solid",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-neutral data-[hover=true]:text-neutral-contrastText",
|
||||
base: "data-[hover=true]:bg-neutral data-[hover=true]:text-neutral-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-primary data-[hover=true]:text-primary-contrastText",
|
||||
base: "data-[hover=true]:bg-primary data-[hover=true]:text-primary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-contrastText",
|
||||
base: "data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-success data-[hover=true]:text-success-contrastText",
|
||||
base: "data-[hover=true]:bg-success data-[hover=true]:text-success-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-warning data-[hover=true]:text-warning-contrastText",
|
||||
base: "data-[hover=true]:bg-warning data-[hover=true]:text-warning-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-danger data-[hover=true]:text-danger-contrastText",
|
||||
base: "data-[hover=true]:bg-danger data-[hover=true]:text-danger-foreground",
|
||||
},
|
||||
},
|
||||
// shadow / color
|
||||
@ -174,7 +174,7 @@ const dropdownItem = tv({
|
||||
color: "neutral",
|
||||
class: {
|
||||
base:
|
||||
"data-[hover=true]:shadow-neutral/50 data-[hover=true]:bg-neutral data-[hover=true]:text-neutral-contrastText",
|
||||
"data-[hover=true]:shadow-neutral/50 data-[hover=true]:bg-neutral data-[hover=true]:text-neutral-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -182,7 +182,7 @@ const dropdownItem = tv({
|
||||
color: "primary",
|
||||
class: {
|
||||
base:
|
||||
"data-[hover=true]:shadow-primary/30 data-[hover=true]:bg-primary data-[hover=true]:text-primary-contrastText",
|
||||
"data-[hover=true]:shadow-primary/30 data-[hover=true]:bg-primary data-[hover=true]:text-primary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -190,7 +190,7 @@ const dropdownItem = tv({
|
||||
color: "secondary",
|
||||
class: {
|
||||
base:
|
||||
"data-[hover=true]:shadow-secondary/30 data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-contrastText",
|
||||
"data-[hover=true]:shadow-secondary/30 data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -198,7 +198,7 @@ const dropdownItem = tv({
|
||||
color: "success",
|
||||
class: {
|
||||
base:
|
||||
"data-[hover=true]:shadow-success/30 data-[hover=true]:bg-success data-[hover=true]:text-success-contrastText",
|
||||
"data-[hover=true]:shadow-success/30 data-[hover=true]:bg-success data-[hover=true]:text-success-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -206,7 +206,7 @@ const dropdownItem = tv({
|
||||
color: "warning",
|
||||
class: {
|
||||
base:
|
||||
"data-[hover=true]:shadow-warning/30 data-[hover=true]:bg-warning data-[hover=true]:text-warning-contrastText",
|
||||
"data-[hover=true]:shadow-warning/30 data-[hover=true]:bg-warning data-[hover=true]:text-warning-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -214,7 +214,7 @@ const dropdownItem = tv({
|
||||
color: "danger",
|
||||
class: {
|
||||
base:
|
||||
"data-[hover=true]:shadow-danger/30 data-[hover=true]:bg-danger data-[hover=true]:text-danger-contrastText",
|
||||
"data-[hover=true]:shadow-danger/30 data-[hover=true]:bg-danger data-[hover=true]:text-danger-foreground",
|
||||
},
|
||||
},
|
||||
// bordered / color
|
||||
@ -265,7 +265,7 @@ const dropdownItem = tv({
|
||||
variant: "flat",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "data-[hover=true]:bg-neutral-100 data-[hover=true]:text-neutral-contrastText",
|
||||
base: "data-[hover=true]:bg-neutral-100 data-[hover=true]:text-neutral-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -308,7 +308,7 @@ const dropdownItem = tv({
|
||||
variant: "faded",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "data-[hover=true]:text-neutral-contrastText",
|
||||
base: "data-[hover=true]:text-neutral-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@ -203,7 +203,7 @@ const pagination = tv({
|
||||
item: [
|
||||
"data-[active=true]:bg-neutral-400",
|
||||
"data-[active=true]:border-neutral-400",
|
||||
"data-[active=true]:text-neutral-contrastText",
|
||||
"data-[active=true]:text-neutral-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -214,7 +214,7 @@ const pagination = tv({
|
||||
item: [
|
||||
"data-[active=true]:bg-primary",
|
||||
"data-[active=true]:border-primary",
|
||||
"data-[active=true]:text-primary-contrastText",
|
||||
"data-[active=true]:text-primary-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -225,7 +225,7 @@ const pagination = tv({
|
||||
item: [
|
||||
"data-[active=true]:bg-secondary",
|
||||
"data-[active=true]:border-secondary",
|
||||
"data-[active=true]:text-secondary-contrastText",
|
||||
"data-[active=true]:text-secondary-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -236,7 +236,7 @@ const pagination = tv({
|
||||
item: [
|
||||
"data-[active=true]:bg-success",
|
||||
"data-[active=true]:border-success",
|
||||
"data-[active=true]:text-success-contrastText",
|
||||
"data-[active=true]:text-success-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -247,7 +247,7 @@ const pagination = tv({
|
||||
item: [
|
||||
"data-[active=true]:bg-warning",
|
||||
"data-[active=true]:border-warning",
|
||||
"data-[active=true]:text-warning-contrastText",
|
||||
"data-[active=true]:text-warning-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -258,7 +258,7 @@ const pagination = tv({
|
||||
item: [
|
||||
"data-[active=true]:bg-danger",
|
||||
"data-[active=true]:border-danger",
|
||||
"data-[active=true]:text-danger-contrastText",
|
||||
"data-[active=true]:text-danger-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -324,7 +324,7 @@ const pagination = tv({
|
||||
"outline-none",
|
||||
"items-center",
|
||||
"justify-center",
|
||||
"text-neutral-contrastText",
|
||||
"text-neutral-foreground",
|
||||
// focus ring
|
||||
"data-[focus-visible=true]:outline-none",
|
||||
"data-[focus-visible=true]:ring-2",
|
||||
|
||||
@ -64,27 +64,27 @@ const radio = tv({
|
||||
variants: {
|
||||
color: {
|
||||
neutral: {
|
||||
control: "bg-neutral-500 text-neutral-contrastText",
|
||||
control: "bg-neutral-500 text-neutral-foreground",
|
||||
wrapper: "group-data-[checked=true]:border-neutral-500",
|
||||
},
|
||||
primary: {
|
||||
control: "bg-primary text-primary-contrastText",
|
||||
control: "bg-primary text-primary-foreground",
|
||||
wrapper: "group-data-[checked=true]:border-primary",
|
||||
},
|
||||
secondary: {
|
||||
control: "bg-secondary text-secondary-contrastText",
|
||||
control: "bg-secondary text-secondary-foreground",
|
||||
wrapper: "group-data-[checked=true]:border-secondary",
|
||||
},
|
||||
success: {
|
||||
control: "bg-success text-success-contrastText",
|
||||
control: "bg-success text-success-foreground",
|
||||
wrapper: "group-data-[checked=true]:border-success",
|
||||
},
|
||||
warning: {
|
||||
control: "bg-warning text-warning-contrastText",
|
||||
control: "bg-warning text-warning-foreground",
|
||||
wrapper: "group-data-[checked=true]:border-warning",
|
||||
},
|
||||
danger: {
|
||||
control: "bg-danger text-danger-contrastText",
|
||||
control: "bg-danger text-danger-foreground",
|
||||
wrapper: "group-data-[checked=true]:border-danger",
|
||||
},
|
||||
},
|
||||
@ -162,7 +162,7 @@ const radio = tv({
|
||||
},
|
||||
isInvalid: {
|
||||
true: {
|
||||
control: "bg-danger text-danger-contrastText",
|
||||
control: "bg-danger text-danger-foreground",
|
||||
wrapper: "border-danger data-[checked=true]:border-danger",
|
||||
label: "text-danger",
|
||||
description: "text-danger-300",
|
||||
|
||||
@ -69,37 +69,37 @@ const toggle = tv({
|
||||
neutral: {
|
||||
wrapper: [
|
||||
"group-data-[checked=true]:bg-neutral-400",
|
||||
"group-data-[checked=true]:text-neutral-contrastText",
|
||||
"group-data-[checked=true]:text-neutral-foreground",
|
||||
],
|
||||
},
|
||||
primary: {
|
||||
wrapper: [
|
||||
"group-data-[checked=true]:bg-primary",
|
||||
"group-data-[checked=true]:text-primary-contrastText",
|
||||
"group-data-[checked=true]:text-primary-foreground",
|
||||
],
|
||||
},
|
||||
secondary: {
|
||||
wrapper: [
|
||||
"group-data-[checked=true]:bg-secondary",
|
||||
"group-data-[checked=true]:text-secondary-contrastText",
|
||||
"group-data-[checked=true]:text-secondary-foreground",
|
||||
],
|
||||
},
|
||||
success: {
|
||||
wrapper: [
|
||||
"group-data-[checked=true]:bg-success",
|
||||
"group-data-[checked=true]:text-success-contrastText",
|
||||
"group-data-[checked=true]:text-success-foreground",
|
||||
],
|
||||
},
|
||||
warning: {
|
||||
wrapper: [
|
||||
"group-data-[checked=true]:bg-warning",
|
||||
"group-data-[checked=true]:text-warning-contrastText",
|
||||
"group-data-[checked=true]:text-warning-foreground",
|
||||
],
|
||||
},
|
||||
danger: {
|
||||
wrapper: [
|
||||
"group-data-[checked=true]:bg-danger",
|
||||
"data-[checked=true]:text-danger-contrastText",
|
||||
"data-[checked=true]:text-danger-foreground",
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
const solid = {
|
||||
neutral: "bg-neutral text-neutral-contrastText",
|
||||
primary: "bg-primary text-primary-contrastText",
|
||||
secondary: "bg-secondary text-secondary-contrastText",
|
||||
success: "bg-success text-success-contrastText",
|
||||
warning: "bg-warning text-warning-contrastText",
|
||||
danger: "bg-danger text-danger-contrastText",
|
||||
neutral: "bg-neutral text-neutral-foreground",
|
||||
primary: "bg-primary text-primary-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground",
|
||||
success: "bg-success text-success-foreground",
|
||||
warning: "bg-warning text-warning-foreground",
|
||||
danger: "bg-danger text-danger-foreground",
|
||||
foreground: "bg-foreground text-background",
|
||||
};
|
||||
|
||||
const shadow = {
|
||||
neutral: "shadow-lg shadow-neutral/50 bg-neutral text-neutral-contrastText",
|
||||
primary: "shadow-lg shadow-primary/40 bg-primary text-primary-contrastText",
|
||||
secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-contrastText",
|
||||
success: "shadow-lg shadow-success/40 bg-success text-success-contrastText",
|
||||
warning: "shadow-lg shadow-warning/40 bg-warning text-warning-contrastText",
|
||||
danger: "shadow-lg shadow-danger/40 bg-danger text-danger-contrastText",
|
||||
neutral: "shadow-lg shadow-neutral/50 bg-neutral text-neutral-foreground",
|
||||
primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
|
||||
secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
|
||||
success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
|
||||
warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
|
||||
danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
|
||||
foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background",
|
||||
};
|
||||
|
||||
@ -29,7 +29,7 @@ const bordered = {
|
||||
};
|
||||
|
||||
const flat = {
|
||||
neutral: "bg-neutral-100 text-neutral-contrastText",
|
||||
neutral: "bg-neutral-100 text-neutral-foreground",
|
||||
primary: "bg-primary-50 text-primary",
|
||||
secondary: "bg-secondary-100 text-secondary",
|
||||
success: "bg-success-50 text-success",
|
||||
@ -39,7 +39,7 @@ const flat = {
|
||||
};
|
||||
|
||||
const faded = {
|
||||
neutral: "border-neutral bg-neutral-100 text-neutral-contrastText",
|
||||
neutral: "border-neutral bg-neutral-100 text-neutral-foreground",
|
||||
primary: "border-neutral bg-neutral-100 text-primary",
|
||||
secondary: "border-neutral bg-neutral-100 text-secondary",
|
||||
success: "border-neutral bg-neutral-100 text-success",
|
||||
@ -49,7 +49,7 @@ const faded = {
|
||||
};
|
||||
|
||||
const light = {
|
||||
neutral: "bg-transparent text-neutral-contrastText",
|
||||
neutral: "bg-transparent text-neutral-foreground",
|
||||
primary: "bg-transparent text-primary",
|
||||
secondary: "bg-transparent text-secondary",
|
||||
success: "bg-transparent text-success",
|
||||
@ -59,13 +59,12 @@ const light = {
|
||||
};
|
||||
|
||||
const ghost = {
|
||||
neutral: "border-neutral text-neutral-contrastText hover:!bg-neutral",
|
||||
primary: "border-primary text-primary hover:!text-primary-contrastText hover:!bg-primary",
|
||||
secondary:
|
||||
"border-secondary text-secondary hover:text-secondary-contrastText hover:!bg-secondary",
|
||||
success: "border-success text-success hover:!text-success-contrastText hover:!bg-success",
|
||||
warning: "border-warning text-warning hover:!text-warning-contrastText hover:!bg-warning",
|
||||
danger: "border-danger text-danger hover:!text-danger-contrastText hover:!bg-danger",
|
||||
neutral: "border-neutral text-neutral-foreground hover:!bg-neutral",
|
||||
primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
|
||||
secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
|
||||
success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
|
||||
warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
|
||||
danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
|
||||
foreground: "border-foreground text-foreground hover:!bg-foreground",
|
||||
};
|
||||
|
||||
|
||||
@ -177,22 +177,22 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "content1",
|
||||
className: "bg-content1",
|
||||
textClassName: "text-content1-contrastText",
|
||||
textClassName: "text-content1-foreground",
|
||||
},
|
||||
{
|
||||
color: "content2",
|
||||
className: "bg-content2",
|
||||
textClassName: "text-content2-contrastText",
|
||||
textClassName: "text-content2-foreground",
|
||||
},
|
||||
{
|
||||
color: "content3",
|
||||
className: "bg-content3",
|
||||
textClassName: "text-content3-contrastText",
|
||||
textClassName: "text-content3-foreground",
|
||||
},
|
||||
{
|
||||
color: "content4",
|
||||
className: "bg-content4",
|
||||
textClassName: "text-content4-contrastText",
|
||||
textClassName: "text-content4-foreground",
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -202,32 +202,32 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "neutral",
|
||||
className: "bg-neutral",
|
||||
textClassName: "text-neutral-contrastText",
|
||||
textClassName: "text-neutral-foreground",
|
||||
},
|
||||
{
|
||||
color: "primary",
|
||||
className: "bg-primary",
|
||||
textClassName: "text-primary-contrastText",
|
||||
textClassName: "text-primary-foreground",
|
||||
},
|
||||
{
|
||||
color: "secondary",
|
||||
className: "bg-secondary",
|
||||
textClassName: "text-secondary-contrastText",
|
||||
textClassName: "text-secondary-foreground",
|
||||
},
|
||||
{
|
||||
color: "success",
|
||||
className: "bg-success",
|
||||
textClassName: "text-success-contrastText",
|
||||
textClassName: "text-success-foreground",
|
||||
},
|
||||
{
|
||||
color: "warning",
|
||||
className: "bg-warning",
|
||||
textClassName: "text-warning-contrastText",
|
||||
textClassName: "text-warning-foreground",
|
||||
},
|
||||
{
|
||||
color: "danger",
|
||||
className: "bg-danger",
|
||||
textClassName: "text-danger-contrastText",
|
||||
textClassName: "text-danger-foreground",
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -262,7 +262,7 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "neutral-500",
|
||||
className: "bg-neutral-500",
|
||||
textClassName: "text-neutral-contrastText",
|
||||
textClassName: "text-neutral-foreground",
|
||||
},
|
||||
{
|
||||
color: "neutral-600",
|
||||
@ -317,7 +317,7 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "primary-500",
|
||||
className: "bg-primary-500",
|
||||
textClassName: "text-primary-contrastText",
|
||||
textClassName: "text-primary-foreground",
|
||||
},
|
||||
{
|
||||
color: "primary-600",
|
||||
@ -372,7 +372,7 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "secondary-500",
|
||||
className: "bg-secondary-500",
|
||||
textClassName: "text-secondary-contrastText",
|
||||
textClassName: "text-secondary-foreground",
|
||||
},
|
||||
{
|
||||
color: "secondary-600",
|
||||
@ -427,7 +427,7 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "success-500",
|
||||
className: "bg-success-500",
|
||||
textClassName: "text-success-contrastText",
|
||||
textClassName: "text-success-foreground",
|
||||
},
|
||||
{
|
||||
color: "success-600",
|
||||
@ -482,7 +482,7 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "warning-500",
|
||||
className: "bg-warning-500",
|
||||
textClassName: "text-warning-contrastText",
|
||||
textClassName: "text-warning-foreground",
|
||||
},
|
||||
{
|
||||
color: "warning-600",
|
||||
@ -537,7 +537,7 @@ SemanticColors.args = {
|
||||
{
|
||||
color: "danger-500",
|
||||
className: "bg-danger-500",
|
||||
textClassName: "text-danger-contrastText",
|
||||
textClassName: "text-danger-foreground",
|
||||
},
|
||||
{
|
||||
color: "danger-600",
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-accordion-item
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-accordion-item",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Internal impl for react aria accordion item",
|
||||
"keywords": [
|
||||
"use-aria-accordion-item"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-button
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-button",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
|
||||
"keywords": [
|
||||
"use-aria-button"
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/use-aria-field
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230420134926
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-field",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Based on react-aria useField hook, provides the accessibility implementation for input fields",
|
||||
"keywords": [
|
||||
"use-aria-field"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-label
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-label",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Based on react-aria label hook, it provides the accessibility implementation for labels and their associated elements. Labels provide context for user inputs.",
|
||||
"keywords": [
|
||||
"use-aria-label"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-slot-id
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-slot-id",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Based on react-aria useSlotId, used to generate an id, and after render check if that id is rendered",
|
||||
"keywords": [
|
||||
"use-aria-slot-id"
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/use-aria-toggle-button
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-toggle-button",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
|
||||
"keywords": [
|
||||
"use-aria-toggle-button"
|
||||
|
||||
8
packages/hooks/use-callback-ref/CHANGELOG.md
Normal file
8
packages/hooks/use-callback-ref/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
# @nextui-org/use-callback-ref
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230420134926
|
||||
24
packages/hooks/use-callback-ref/README.md
Normal file
24
packages/hooks/use-callback-ref/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# @nextui-org/use-callback-ref
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/use-callback-ref
|
||||
# or
|
||||
npm i @nextui-org/use-callback-ref
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
55
packages/hooks/use-callback-ref/package.json
Normal file
55
packages/hooks/use-callback-ref/package.json
Normal file
@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "@nextui-org/use-callback-ref",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "React hook to persist any value between renders, but keeps it up-to-date if it changes.",
|
||||
"keywords": [
|
||||
"use-callback-ref"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/hooks/use-callback-ref"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src --dts",
|
||||
"build:fast": "tsup src",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/use-safe-layout-effect": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
"target": "es2019",
|
||||
"format": [
|
||||
"cjs",
|
||||
"esm"
|
||||
]
|
||||
}
|
||||
}
|
||||
27
packages/hooks/use-callback-ref/src/index.ts
Normal file
27
packages/hooks/use-callback-ref/src/index.ts
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Part of this code is taken from @chakra-ui/system ❤️
|
||||
*/
|
||||
|
||||
import {useCallback, useRef} from "react";
|
||||
import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
|
||||
|
||||
/**
|
||||
* React hook to persist any value between renders,
|
||||
* but keeps it up-to-date if it changes.
|
||||
*
|
||||
* @param fn the function to persist
|
||||
* @param deps the function dependency list
|
||||
*/
|
||||
export function useCallbackRef<T extends (...args: any[]) => any>(
|
||||
fn: T | undefined,
|
||||
deps: React.DependencyList = [],
|
||||
): T {
|
||||
const ref = useRef(fn);
|
||||
|
||||
useSafeLayoutEffect(() => {
|
||||
ref.current = fn;
|
||||
});
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
return useCallback(((...args) => ref.current?.(...args)) as T, deps);
|
||||
}
|
||||
4
packages/hooks/use-callback-ref/tsconfig.json
Normal file
4
packages/hooks/use-callback-ref/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-clipboard
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-clipboard",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "Wrapper around navigator.clipboard with feedback timeout",
|
||||
"keywords": [
|
||||
"use-clipboard"
|
||||
|
||||
13
packages/hooks/use-disclosure/CHANGELOG.md
Normal file
13
packages/hooks/use-disclosure/CHANGELOG.md
Normal file
@ -0,0 +1,13 @@
|
||||
# @nextui-org/use-disclosure
|
||||
|
||||
## 0.0.0-dev-v2-20230420135820
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- onOpenChange callback added to useDisclosure hook
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @nextui-org/use-callback-ref@0.0.0-dev-v2-20230420134926
|
||||
24
packages/hooks/use-disclosure/README.md
Normal file
24
packages/hooks/use-disclosure/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# @nextui-org/use-disclosure
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/use-disclosure
|
||||
# or
|
||||
npm i @nextui-org/use-disclosure
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
57
packages/hooks/use-disclosure/package.json
Normal file
57
packages/hooks/use-disclosure/package.json
Normal file
@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "@nextui-org/use-disclosure",
|
||||
"version": "0.0.0-dev-v2-20230420135820",
|
||||
"description": "The hook in charge of managing modals",
|
||||
"keywords": [
|
||||
"use-disclosure"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/hooks/use-disclosure"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src --dts",
|
||||
"build:fast": "tsup src",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/use-callback-ref": "workspace:*",
|
||||
"@react-stately/utils": "^3.6.0",
|
||||
"@react-aria/utils": "^3.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
"target": "es2019",
|
||||
"format": [
|
||||
"cjs",
|
||||
"esm"
|
||||
]
|
||||
}
|
||||
}
|
||||
73
packages/hooks/use-disclosure/src/index.ts
Normal file
73
packages/hooks/use-disclosure/src/index.ts
Normal file
@ -0,0 +1,73 @@
|
||||
import {chain} from "@react-aria/utils";
|
||||
import {useControlledState} from "@react-stately/utils";
|
||||
import {useCallbackRef} from "@nextui-org/use-callback-ref";
|
||||
import {useCallback, useId} from "react";
|
||||
|
||||
export interface UseDisclosureProps {
|
||||
isOpen?: boolean;
|
||||
defaultOpen?: boolean;
|
||||
onClose?(): void;
|
||||
onOpen?(): void;
|
||||
onChange?(isOpen: boolean | undefined): void;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export function useDisclosure(props: UseDisclosureProps = {}) {
|
||||
const {
|
||||
id: idProp,
|
||||
defaultOpen,
|
||||
isOpen: isOpenProp,
|
||||
onClose: onCloseProp,
|
||||
onOpen: onOpenProp,
|
||||
onChange = () => {},
|
||||
} = props;
|
||||
|
||||
const onOpenPropCallbackRef = useCallbackRef(onOpenProp);
|
||||
const onClosePropCallbackRef = useCallbackRef(onCloseProp);
|
||||
const [isOpen, setIsOpen] = useControlledState(isOpenProp, defaultOpen || false, onChange);
|
||||
|
||||
const reactId = useId();
|
||||
const id = idProp || reactId;
|
||||
const isControlled = isOpenProp !== undefined;
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
if (!isControlled) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
onClosePropCallbackRef?.();
|
||||
}, [isControlled, onClosePropCallbackRef]);
|
||||
|
||||
const onOpen = useCallback(() => {
|
||||
if (!isControlled) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
onOpenPropCallbackRef?.();
|
||||
}, [isControlled, onOpenPropCallbackRef]);
|
||||
|
||||
const onOpenChange = useCallback(() => {
|
||||
const action = isOpen ? onClose : onOpen;
|
||||
|
||||
action();
|
||||
}, [isOpen, onOpen, onClose]);
|
||||
|
||||
return {
|
||||
isOpen: !!isOpen,
|
||||
onOpen,
|
||||
onClose,
|
||||
onOpenChange,
|
||||
isControlled,
|
||||
getButtonProps: (props: any = {}) => ({
|
||||
...props,
|
||||
"aria-expanded": isOpen,
|
||||
"aria-controls": id,
|
||||
onClick: chain(props.onClick, onOpenChange),
|
||||
}),
|
||||
getDisclosureProps: (props: any = {}) => ({
|
||||
...props,
|
||||
hidden: !isOpen,
|
||||
id,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
export type UseDisclosureReturn = ReturnType<typeof useDisclosure>;
|
||||
4
packages/hooks/use-disclosure/tsconfig.json
Normal file
4
packages/hooks/use-disclosure/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/use-image
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230420134926
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-image",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "React hook for progressing image loading",
|
||||
"keywords": [
|
||||
"use-image"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-is-mobile
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-is-mobile",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "A hook that returns whether the device is mobile or not",
|
||||
"keywords": [
|
||||
"use-is-mobile"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-is-mounted
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Modal structure change, now is controlled by the useDisclosure modal
|
||||
|
||||
## 0.0.0-dev-v2-20230420024722
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-is-mounted",
|
||||
"version": "0.0.0-dev-v2-20230420024722",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"description": "This hook can be used to render client-based components or run client logic",
|
||||
"keywords": [
|
||||
"use-is-mounted"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user