mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat: tailwind variants upgrade (#4386)
* feat: tailwind variants upgrade * chore: restore npmrc * chore: adjust pkgs * fix: versions * fix: lock file * chore(changeset): update package name * chore(deps): use fixed version * fix(test): incorrect package name --------- Co-authored-by: աӄա <wingkwong.code@gmail.com>
This commit is contained in:
Junior Garcia
GitHub
parent
3d9b60096d
commit
69aa4769c0
84
.changeset/stupid-pants-perform.md
Normal file
84
.changeset/stupid-pants-perform.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
"@heroui/use-intersection-observer": patch
|
||||
"@heroui/use-data-scroll-overflow": patch
|
||||
"@heroui/use-aria-accordion-item": patch
|
||||
"@heroui/use-aria-modal-overlay": patch
|
||||
"@heroui/use-safe-layout-effect": patch
|
||||
"@heroui/use-aria-multiselect": patch
|
||||
"@heroui/use-infinite-scroll": patch
|
||||
"@heroui/use-scroll-position": patch
|
||||
"@heroui/react-rsc-utils": patch
|
||||
"@heroui/scroll-shadow": patch
|
||||
"@heroui/use-aria-accordion": patch
|
||||
"@heroui/autocomplete": patch
|
||||
"@heroui/use-update-effect": patch
|
||||
"@heroui/breadcrumbs": patch
|
||||
"@heroui/date-picker": patch
|
||||
"@heroui/use-callback-ref": patch
|
||||
"@heroui/framer-utils": patch
|
||||
"@heroui/shared-icons": patch
|
||||
"@heroui/date-input": patch
|
||||
"@heroui/pagination": patch
|
||||
"@heroui/use-aria-button": patch
|
||||
"@heroui/react-utils": patch
|
||||
"@heroui/accordion": patch
|
||||
"@heroui/input-otp": patch
|
||||
"@heroui/use-disclosure": patch
|
||||
"@heroui/use-is-mounted": patch
|
||||
"@heroui/use-pagination": patch
|
||||
"@heroui/use-real-shape": patch
|
||||
"@heroui/aria-utils": patch
|
||||
"@heroui/test-utils": patch
|
||||
"@heroui/calendar": patch
|
||||
"@heroui/checkbox": patch
|
||||
"@heroui/dropdown": patch
|
||||
"@heroui/progress": patch
|
||||
"@heroui/skeleton": patch
|
||||
"@heroui/use-aria-link": patch
|
||||
"@heroui/use-clipboard": patch
|
||||
"@heroui/use-draggable": patch
|
||||
"@heroui/use-is-mobile": patch
|
||||
"@heroui/use-ref-state": patch
|
||||
"@heroui/divider": patch
|
||||
"@heroui/listbox": patch
|
||||
"@heroui/popover": patch
|
||||
"@heroui/snippet": patch
|
||||
"@heroui/spinner": patch
|
||||
"@heroui/tooltip": patch
|
||||
"@heroui/avatar": patch
|
||||
"@heroui/button": patch
|
||||
"@heroui/drawer": patch
|
||||
"@heroui/navbar": patch
|
||||
"@heroui/ripple": patch
|
||||
"@heroui/select": patch
|
||||
"@heroui/slider": patch
|
||||
"@heroui/spacer": patch
|
||||
"@heroui/switch": patch
|
||||
"@heroui/use-measure": patch
|
||||
"@heroui/alert": patch
|
||||
"@heroui/badge": patch
|
||||
"@heroui/image": patch
|
||||
"@heroui/input": patch
|
||||
"@heroui/modal": patch
|
||||
"@heroui/radio": patch
|
||||
"@heroui/table": patch
|
||||
"@heroui/use-resize": patch
|
||||
"@heroui/card": patch
|
||||
"@heroui/chip": patch
|
||||
"@heroui/code": patch
|
||||
"@heroui/form": patch
|
||||
"@heroui/link": patch
|
||||
"@heroui/menu": patch
|
||||
"@heroui/tabs": patch
|
||||
"@heroui/user": patch
|
||||
"@heroui/system-rsc": patch
|
||||
"@heroui/use-image": patch
|
||||
"@heroui/use-theme": patch
|
||||
"@heroui/kbd": patch
|
||||
"@heroui/use-ssr": patch
|
||||
"@heroui/system": patch
|
||||
"@heroui/react": patch
|
||||
"@heroui/theme": patch
|
||||
---
|
||||
|
||||
Tailwind variants upgraded to the latest version, classnames adjusted, tests fixed
|
||||
@ -78,8 +78,8 @@
|
||||
"posthog-js": "1.197.0",
|
||||
"prism-react-renderer": "^1.2.1",
|
||||
"querystring": "^0.2.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^4.10.1",
|
||||
"react-live": "^4.1.8",
|
||||
@ -97,7 +97,7 @@
|
||||
"sharp": "^0.32.1",
|
||||
"shelljs": "^0.8.4",
|
||||
"swr": "2.2.5",
|
||||
"tailwind-variants": "^0.1.20",
|
||||
"tailwind-variants": "^0.3.0",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-visit": "5.0.0",
|
||||
"usehooks-ts": "3.1.0",
|
||||
@ -126,8 +126,8 @@
|
||||
"algoliasearch": "^4.10.3",
|
||||
"autoprefixer": "10.4.20",
|
||||
"dotenv": "^16.0.1",
|
||||
"esbuild-plugin-raw": "0.1.8",
|
||||
"eslint-config-next": "15.0.3",
|
||||
"esbuild-plugin-raw": "0.1.8",
|
||||
"markdown-toc": "^1.2.0",
|
||||
"mdx-bundler": "10.0.3",
|
||||
"next-sitemap": "4.2.3",
|
||||
@ -141,8 +141,8 @@
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
17
package.json
17
package.json
@ -62,10 +62,10 @@
|
||||
"@babel/preset-env": "^7.14.5",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"@babel/preset-typescript": "^7.14.5",
|
||||
"@changesets/cli": "2.27.10",
|
||||
"@changesets/changelog-github": "0.5.0",
|
||||
"@changesets/get-release-plan": "4.0.5",
|
||||
"@changesets/cli": "2.27.10",
|
||||
"@changesets/get-github-info": "0.6.0",
|
||||
"@changesets/get-release-plan": "4.0.5",
|
||||
"@changesets/types": "6.0.0",
|
||||
"@commitlint/cli": "^17.2.0",
|
||||
"@commitlint/config-conventional": "^17.2.0",
|
||||
@ -127,14 +127,13 @@
|
||||
"prettier": "^2.2.1",
|
||||
"prettier-eslint": "^12.0.0",
|
||||
"prettier-eslint-cli": "^5.0.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"shelljs": "^0.8.4",
|
||||
"tsup": "6.4.0",
|
||||
"tsx": "^3.8.2",
|
||||
"tsup": "8.3.5",
|
||||
"tsx": "^4.19.2",
|
||||
"turbo": "1.6.3",
|
||||
"typescript": "^4.9.5",
|
||||
"typescript": "^5.5.0",
|
||||
"webpack": "^5.53.0",
|
||||
"webpack-bundle-analyzer": "^4.4.2",
|
||||
"webpack-cli": "^3.3.11",
|
||||
@ -142,8 +141,8 @@
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"@changesets/get-github-info": "0.6.0"
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import * as React from "react";
|
||||
import {act, render} from "@testing-library/react";
|
||||
import {focus} from "@heroui/test-utils";
|
||||
import {focus, shouldIgnoreReactWarning, spy} from "@heroui/test-utils";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {Input} from "@heroui/input";
|
||||
|
||||
import {Accordion, AccordionItem} from "../src";
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Accordion", () => {
|
||||
let user: UserEvent;
|
||||
|
||||
@ -30,6 +27,10 @@ describe("Accordion", () => {
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
|
||||
@ -72,8 +72,8 @@
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -55,8 +55,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
|
||||
import * as React from "react";
|
||||
import {within, render, renderHook, act} from "@testing-library/react";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
import {useForm} from "react-hook-form";
|
||||
import {Form} from "@heroui/form";
|
||||
|
||||
@ -88,6 +89,11 @@ describe("Autocomplete", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<AutocompleteExample />);
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
|
||||
@ -68,14 +68,15 @@
|
||||
"@heroui/avatar": "workspace:*",
|
||||
"@heroui/chip": "workspace:*",
|
||||
"@heroui/stories-utils": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/use-infinite-scroll": "workspace:*",
|
||||
"@react-stately/data": "3.12.1",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -53,8 +53,8 @@
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -50,8 +50,8 @@
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"@heroui/switch": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -56,8 +56,8 @@
|
||||
"@heroui/tooltip": "workspace:*",
|
||||
"@heroui/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -59,8 +59,8 @@
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -70,8 +70,8 @@
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -61,8 +61,8 @@
|
||||
"@heroui/image": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -63,8 +63,8 @@
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/user": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -53,8 +53,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/avatar": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Code} from "../src";
|
||||
|
||||
@ -8,6 +9,12 @@ describe("Code", () => {
|
||||
const wrapper = render(<Code />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
|
||||
@ -45,9 +45,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -57,8 +57,8 @@
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
/* eslint-disable jsx-a11y/no-autofocus */
|
||||
import * as React from "react";
|
||||
import {render, act, fireEvent, waitFor, within} from "@testing-library/react";
|
||||
import {pointerMap, triggerPress} from "@heroui/test-utils";
|
||||
import {
|
||||
errorSpy,
|
||||
pointerMap,
|
||||
shouldIgnoreReactWarning,
|
||||
triggerPress,
|
||||
warnSpy,
|
||||
} from "@heroui/test-utils";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import {CalendarDate, CalendarDateTime} from "@internationalized/date";
|
||||
import {HeroUIProvider} from "@heroui/system";
|
||||
@ -66,6 +72,7 @@ describe("DatePicker", () => {
|
||||
user = userEvent.setup({delay: null, pointerMap});
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
@ -435,8 +442,6 @@ describe("DatePicker", () => {
|
||||
describe("Calendar popover", function () {
|
||||
it("should emit onChange when selecting a date in the calendar in controlled mode", function () {
|
||||
let onChange = jest.fn();
|
||||
const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
|
||||
const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
let {getByRole, getAllByRole, queryByLabelText} = render(
|
||||
<DatePicker
|
||||
@ -479,10 +484,16 @@ describe("DatePicker", () => {
|
||||
expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
|
||||
expect(getTextValue(combobox)).toBe("2/3/2019"); // controlled
|
||||
|
||||
expect(consoleWarnSpy).not.toHaveBeenCalled();
|
||||
expect(consoleErrorSpy).not.toHaveBeenCalled();
|
||||
consoleWarnSpy.mockRestore();
|
||||
consoleErrorSpy.mockRestore();
|
||||
if (!shouldIgnoreReactWarning(warnSpy)) {
|
||||
expect(warnSpy).not.toHaveBeenCalled();
|
||||
}
|
||||
|
||||
if (!shouldIgnoreReactWarning(errorSpy)) {
|
||||
expect(errorSpy).not.toHaveBeenCalled();
|
||||
}
|
||||
|
||||
warnSpy.mockRestore();
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
it("should emit onChange when selecting a date in the calendar in uncontrolled mode", function () {
|
||||
|
||||
@ -67,8 +67,8 @@
|
||||
"@heroui/theme": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -47,8 +47,8 @@
|
||||
"devDependencies": {
|
||||
"@heroui/theme": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -2,11 +2,9 @@ import "@testing-library/jest-dom";
|
||||
import * as React from "react";
|
||||
import {render, fireEvent} from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter} from "../src";
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Drawer", () => {
|
||||
afterEach(() => {
|
||||
@ -25,6 +23,11 @@ describe("Drawer", () => {
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
|
||||
@ -58,10 +58,11 @@
|
||||
"@heroui/switch": "workspace:*",
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"@heroui/use-disclosure": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"react-lorem-component": "0.13.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -2,17 +2,13 @@ import * as React from "react";
|
||||
import {act, render, fireEvent} from "@testing-library/react";
|
||||
import {Button} from "@heroui/button";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {keyCodes} from "@heroui/test-utils";
|
||||
import {keyCodes, shouldIgnoreReactWarning, spy} from "@heroui/test-utils";
|
||||
import {User} from "@heroui/user";
|
||||
import {Image} from "@heroui/image";
|
||||
import {Avatar} from "@heroui/avatar";
|
||||
|
||||
import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection} from "../src";
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Dropdown", () => {
|
||||
let user: UserEvent;
|
||||
|
||||
@ -25,7 +21,7 @@ describe("Dropdown", () => {
|
||||
|
||||
it("should render correctly (static)", () => {
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button>Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -52,7 +48,7 @@ describe("Dropdown", () => {
|
||||
];
|
||||
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button>Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -67,7 +63,7 @@ describe("Dropdown", () => {
|
||||
|
||||
it("should render correctly with section (static)", () => {
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button>Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -106,7 +102,7 @@ describe("Dropdown", () => {
|
||||
];
|
||||
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button>Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -130,7 +126,7 @@ describe("Dropdown", () => {
|
||||
|
||||
it("should not throw any error when clicking button", async () => {
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -149,7 +145,14 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(triggerButton).toBeTruthy();
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
|
||||
let menu = wrapper.queryByRole("menu");
|
||||
@ -186,7 +189,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(0);
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
@ -201,7 +206,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(menuItems.length).toBe(4);
|
||||
|
||||
await user.click(menuItems[1]);
|
||||
await act(async () => {
|
||||
await user.click(menuItems[1]);
|
||||
});
|
||||
|
||||
expect(onSelectionChange).toHaveBeenCalledTimes(1);
|
||||
expect(onOpenChange).toHaveBeenCalled();
|
||||
@ -236,7 +243,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(0);
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
@ -251,7 +260,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(menuItems.length).toBe(4);
|
||||
|
||||
await user.click(menuItems[0]);
|
||||
await act(async () => {
|
||||
await user.click(menuItems[0]);
|
||||
});
|
||||
|
||||
expect(onSelectionChange).toHaveBeenCalledTimes(1);
|
||||
expect(onOpenChange).toHaveBeenCalled();
|
||||
@ -362,7 +373,7 @@ describe("Dropdown", () => {
|
||||
|
||||
it("should not open on disabled button", async () => {
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button isDisabled data-testid="trigger-test">
|
||||
Trigger
|
||||
@ -383,7 +394,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(triggerButton).toBeTruthy();
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
let menu = wrapper.queryByRole("menu");
|
||||
|
||||
@ -411,7 +424,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(triggerButton).toBeTruthy();
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
let menu = wrapper.queryByRole("menu");
|
||||
|
||||
@ -445,7 +460,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(menuItems.length).toBe(4);
|
||||
|
||||
await user.click(menuItems[1]);
|
||||
await act(async () => {
|
||||
await user.click(menuItems[1]);
|
||||
});
|
||||
|
||||
expect(onSelectionChange).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
@ -530,7 +547,7 @@ describe("Dropdown", () => {
|
||||
it("should close listbox by clicking another dropdown", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="dropdown">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -543,7 +560,7 @@ describe("Dropdown", () => {
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="dropdown2">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -565,29 +582,26 @@ describe("Dropdown", () => {
|
||||
expect(dropdown).toBeVisible();
|
||||
expect(dropdown2).toBeVisible();
|
||||
|
||||
// open the dropdown listbox by clicking dropdown button in the first dropdown
|
||||
await user.click(dropdown);
|
||||
// Wrap click events in act()
|
||||
await act(async () => {
|
||||
await user.click(dropdown);
|
||||
});
|
||||
|
||||
// assert that the first dropdown listbox is open
|
||||
expect(dropdown).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
// assert that the second dropdown listbox is close
|
||||
expect(dropdown2).toHaveAttribute("aria-expanded", "false");
|
||||
|
||||
// close the dropdown listbox by clicking the second dropdown
|
||||
await user.click(dropdown2);
|
||||
await act(async () => {
|
||||
await user.click(dropdown2);
|
||||
});
|
||||
|
||||
// assert that the first dropdown listbox is closed
|
||||
expect(dropdown).toHaveAttribute("aria-expanded", "false");
|
||||
|
||||
// assert that the second dropdown listbox is open
|
||||
expect(dropdown2).toHaveAttribute("aria-expanded", "true");
|
||||
});
|
||||
|
||||
describe("Keyboard interactions", () => {
|
||||
it("should focus on the first item on keyDown (Enter)", async () => {
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -625,7 +639,7 @@ describe("Dropdown", () => {
|
||||
|
||||
it("should focus on the first item on keyDown (Space)", async () => {
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -665,7 +679,7 @@ describe("Dropdown", () => {
|
||||
const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
|
||||
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -708,7 +722,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(menuItems[0]).toHaveFocus();
|
||||
|
||||
await user.keyboard("[Enter]");
|
||||
await act(async () => {
|
||||
await user.keyboard("[Enter]");
|
||||
});
|
||||
|
||||
expect(logSpy).toHaveBeenCalledWith("ENTER");
|
||||
|
||||
@ -719,7 +735,7 @@ describe("Dropdown", () => {
|
||||
const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
|
||||
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<Dropdown disableAnimation>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
@ -762,7 +778,9 @@ describe("Dropdown", () => {
|
||||
|
||||
expect(menuItems[0]).toHaveFocus();
|
||||
|
||||
await user.keyboard("[Space]");
|
||||
await act(async () => {
|
||||
await user.keyboard("[Space]");
|
||||
});
|
||||
|
||||
expect(logSpy).toHaveBeenCalledWith("SPACE");
|
||||
|
||||
@ -787,16 +805,24 @@ describe("Dropdown", () => {
|
||||
|
||||
let triggerButton = wrapper.getByTestId("trigger-test");
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
let menuItems = wrapper.getAllByRole("menuitem");
|
||||
|
||||
await user.click(menuItems[0]);
|
||||
await act(async () => {
|
||||
await user.click(menuItems[0]);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
await user.click(menuItems[1]);
|
||||
await act(async () => {
|
||||
await user.click(menuItems[1]);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
@ -829,12 +855,18 @@ describe("Dropdown", () => {
|
||||
|
||||
let triggerButton = wrapper.getByTestId("trigger-test");
|
||||
|
||||
await user.click(triggerButton);
|
||||
await act(async () => {
|
||||
await user.click(triggerButton);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
let menuItems = wrapper.getAllByRole("menuitem");
|
||||
|
||||
await user.click(menuItems[0]);
|
||||
await act(async () => {
|
||||
await user.click(menuItems[0]);
|
||||
});
|
||||
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
@ -63,8 +63,8 @@
|
||||
"@heroui/user": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -52,8 +52,8 @@
|
||||
"devDependencies": {
|
||||
"@heroui/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -48,8 +48,8 @@
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -56,8 +56,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -58,8 +58,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Kbd} from "../src";
|
||||
|
||||
@ -8,6 +9,12 @@ describe("Kbd", () => {
|
||||
const wrapper = render(<Kbd />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
|
||||
@ -46,9 +46,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -53,8 +53,8 @@
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -63,8 +63,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -58,10 +58,10 @@
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"clean-package": "2.2.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -1,14 +1,11 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import * as React from "react";
|
||||
import {render, fireEvent} from "@testing-library/react";
|
||||
import {shouldIgnoreReactWarning, spy} from "@heroui/test-utils";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter, useDraggable} from "../src";
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
const ModalDraggable = ({canOverflow = false, isDisabled = false}) => {
|
||||
const targetRef = React.useRef(null);
|
||||
|
||||
@ -43,6 +40,9 @@ describe("Modal", () => {
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
|
||||
@ -66,11 +66,12 @@
|
||||
"@heroui/button": "workspace:*",
|
||||
"@heroui/link": "workspace:*",
|
||||
"@heroui/switch": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"react-lorem-component": "0.13.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {
|
||||
Navbar,
|
||||
@ -14,10 +15,6 @@ import {
|
||||
|
||||
window.scrollTo = jest.fn();
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Navbar", () => {
|
||||
let user: UserEvent;
|
||||
|
||||
@ -28,6 +25,7 @@ describe("Navbar", () => {
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Navbar />);
|
||||
|
||||
@ -94,6 +92,10 @@ describe("Navbar", () => {
|
||||
|
||||
await user.click(toggle);
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
|
||||
@ -62,12 +62,13 @@
|
||||
"@heroui/dropdown": "workspace:*",
|
||||
"@heroui/input": "workspace:*",
|
||||
"@heroui/link": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"react-lorem-component": "0.13.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Pagination} from "../src";
|
||||
|
||||
@ -8,6 +9,12 @@ describe("Pagination", () => {
|
||||
const wrapper = render(<Pagination total={10} />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
|
||||
@ -54,9 +54,10 @@
|
||||
"devDependencies": {
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -3,14 +3,11 @@ import * as React from "react";
|
||||
import {render, fireEvent, act} from "@testing-library/react";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {Button} from "@heroui/button";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Popover, PopoverContent, PopoverTrigger} from "../src";
|
||||
import {Select, SelectItem} from "../../select/src";
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Popover", () => {
|
||||
let user: UserEvent;
|
||||
|
||||
@ -53,7 +50,9 @@ describe("Popover", () => {
|
||||
// open popover
|
||||
await user.click(trigger);
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
if (!shouldIgnoreReactWarning(spy)) {
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
}
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
|
||||
@ -63,10 +63,11 @@
|
||||
"@heroui/input": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -54,8 +54,8 @@
|
||||
"@heroui/card": "workspace:*",
|
||||
"@heroui/chip": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -56,9 +56,10 @@
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/button": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -50,8 +50,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -49,8 +49,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react-lorem-component": "0.13.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
import type {SelectProps} from "../src";
|
||||
|
||||
import "@testing-library/jest-dom";
|
||||
import * as React from "react";
|
||||
import {act, render, renderHook, waitFor} from "@testing-library/react";
|
||||
import {render, renderHook, waitFor, act} from "@testing-library/react";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
import {useForm} from "react-hook-form";
|
||||
import {Form} from "@heroui/form";
|
||||
|
||||
@ -58,15 +60,24 @@ describe("Select", () => {
|
||||
user = userEvent.setup();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<Select disableAnimation aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
@ -74,7 +85,7 @@ describe("Select", () => {
|
||||
const ref = React.createRef<HTMLSelectElement>();
|
||||
|
||||
render(
|
||||
<Select ref={ref} aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<Select ref={ref} disableAnimation aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
@ -85,7 +96,12 @@ describe("Select", () => {
|
||||
|
||||
it("should render correctly (dynamic)", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" items={itemsData} label="Favorite Animal">
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
items={itemsData}
|
||||
label="Favorite Animal"
|
||||
>
|
||||
{(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
|
||||
</Select>,
|
||||
);
|
||||
@ -95,7 +111,7 @@ describe("Select", () => {
|
||||
|
||||
it("should render correctly with section (static)", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<Select disableAnimation aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<SelectSection title="Birds">
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
</SelectSection>
|
||||
@ -111,7 +127,12 @@ describe("Select", () => {
|
||||
|
||||
it("should render correctly with section (dynamic)", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" items={itemsSectionData} label="Favorite Animal">
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
items={itemsSectionData}
|
||||
label="Favorite Animal"
|
||||
>
|
||||
{(section) => (
|
||||
<SelectSection<(typeof itemsSectionData)[0]["children"][0]>
|
||||
aria-label={section.title}
|
||||
@ -133,6 +154,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
disallowEmptySelection
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
@ -155,6 +177,7 @@ describe("Select", () => {
|
||||
expect(listboxItems.length).toBe(3);
|
||||
|
||||
await user.click(listboxItems[1]);
|
||||
|
||||
expect(onSelectionChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@ -163,6 +186,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
disallowEmptySelection
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
@ -184,8 +208,10 @@ describe("Select", () => {
|
||||
|
||||
expect(listboxItems.length).toBe(3);
|
||||
|
||||
await user.click(listboxItems[1]);
|
||||
await user.click(listboxItems[2]);
|
||||
await act(async () => {
|
||||
await user.click(listboxItems[1]);
|
||||
await user.click(listboxItems[2]);
|
||||
});
|
||||
|
||||
expect(onSelectionChange).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
@ -199,6 +225,7 @@ describe("Select", () => {
|
||||
|
||||
return (
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="render-selected-item-test"
|
||||
label="Favorite Animal"
|
||||
@ -222,11 +249,15 @@ describe("Select", () => {
|
||||
|
||||
const select = wrapper.getByTestId("render-selected-item-test");
|
||||
|
||||
await user.click(select);
|
||||
await act(async () => {
|
||||
await user.click(select);
|
||||
});
|
||||
|
||||
const listboxItems = wrapper.getAllByRole("option");
|
||||
|
||||
await user.click(listboxItems[0]);
|
||||
await act(async () => {
|
||||
await user.click(listboxItems[0]);
|
||||
});
|
||||
|
||||
expect(select).toHaveTextContent("Penguin");
|
||||
expect(wrapper.queryByText("Select an favorite animal")).toBe(null);
|
||||
@ -245,6 +276,7 @@ describe("Select", () => {
|
||||
it("should close dropdown when clicking outside select", async () => {
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="close-when-clicking-outside-test"
|
||||
label="Favorite Animal"
|
||||
@ -277,6 +309,7 @@ describe("Select", () => {
|
||||
<ModalHeader>Modal header</ModalHeader>
|
||||
<ModalBody>
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="close-when-clicking-outside-test"
|
||||
label="Favorite Animal"
|
||||
@ -311,6 +344,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isDisabled
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="test-select"
|
||||
@ -341,6 +375,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
defaultSelectedKeys={[1, 2]} // Numeric keys for selection
|
||||
items={items}
|
||||
@ -366,6 +401,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
defaultSelectedKeys={[1, 2]} // Numeric ids for selection
|
||||
items={items}
|
||||
@ -392,6 +428,7 @@ describe("Select", () => {
|
||||
const onSelectionChangeId = jest.fn();
|
||||
const wrapperWithId = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
items={itemsWithId}
|
||||
label="Test with ID"
|
||||
@ -430,6 +467,7 @@ describe("Select", () => {
|
||||
const onSelectionChangeKey = jest.fn();
|
||||
const wrapperWithKey = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
items={itemsWithKey}
|
||||
label="Test with Key"
|
||||
@ -461,6 +499,7 @@ describe("Select", () => {
|
||||
it("should display selected items as comma-separated string inside the select", async () => {
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isDisabled
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="test-select"
|
||||
@ -481,7 +520,12 @@ describe("Select", () => {
|
||||
it("should close listbox by clicking another select", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<Select aria-label="Favorite Animal" data-testid="select" label="Favorite Animal">
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="select"
|
||||
label="Favorite Animal"
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
@ -492,7 +536,12 @@ describe("Select", () => {
|
||||
Shark
|
||||
</SelectItem>
|
||||
</Select>
|
||||
<Select aria-label="Favorite Animal" data-testid="select2" label="Favorite Animal">
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="select2"
|
||||
label="Favorite Animal"
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
@ -536,6 +585,7 @@ describe("Select", () => {
|
||||
it("should display placeholder text when unselected", async () => {
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="test-select"
|
||||
label="Favorite Animal"
|
||||
@ -556,6 +606,7 @@ describe("Select", () => {
|
||||
const onSelectionChange = jest.fn();
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="test-select"
|
||||
@ -590,6 +641,7 @@ describe("Select", () => {
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
disableAnimation
|
||||
data-testid="select"
|
||||
defaultSelectedKeys={["foo"]}
|
||||
label="test select"
|
||||
@ -630,7 +682,12 @@ describe("Select", () => {
|
||||
|
||||
it("should close listbox by clicking selector button again", async () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" data-testid="select" label="Favorite Animal">
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="select"
|
||||
label="Favorite Animal"
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
@ -671,6 +728,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
isVirtualized={false}
|
||||
@ -709,6 +767,7 @@ describe("Select", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
isVirtualized={false}
|
||||
@ -741,6 +800,7 @@ describe("Select", () => {
|
||||
|
||||
render(
|
||||
<Select
|
||||
disableAnimation
|
||||
isMultiline
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="select"
|
||||
@ -772,6 +832,7 @@ describe("Select", () => {
|
||||
|
||||
render(
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="select"
|
||||
label={labelContent}
|
||||
@ -801,6 +862,7 @@ describe("Select", () => {
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
disableAnimation
|
||||
data-testid="select"
|
||||
errorMessage="Invalid value"
|
||||
isInvalid={isInvalid}
|
||||
@ -824,6 +886,7 @@ describe("Select", () => {
|
||||
expect(select).not.toHaveAttribute("aria-describedby");
|
||||
|
||||
await user.click(getByTestId("button"));
|
||||
|
||||
expect(select).toHaveAttribute("aria-describedby");
|
||||
expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent(
|
||||
"Invalid value",
|
||||
@ -833,6 +896,7 @@ describe("Select", () => {
|
||||
it("should not open dropdown when hideEmptyContent is true", async () => {
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
hideEmptyContent
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="hide-empty-content-true-test"
|
||||
@ -856,6 +920,7 @@ describe("Select", () => {
|
||||
it("should open dropdown when hideEmptyContent is false", async () => {
|
||||
const wrapper = render(
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="hide-empty-content-false-test"
|
||||
hideEmptyContent={false}
|
||||
@ -899,7 +964,13 @@ describe("Select virtualization tests", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<div style={{height: "200px", overflow: "auto"}}>
|
||||
<Select isOpen aria-label="Favorite Animal" label="Favorite Animal" onChange={onChange}>
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
label="Favorite Animal"
|
||||
onChange={onChange}
|
||||
>
|
||||
{options.map((o) => (
|
||||
<SelectItem key={o} value={o}>
|
||||
{o}
|
||||
@ -928,7 +999,13 @@ describe("Select virtualization tests", () => {
|
||||
|
||||
const wrapper = render(
|
||||
<div style={{height: "200px", overflow: "auto"}}>
|
||||
<Select isOpen aria-label="Favorite Animal" label="Favorite Animal" onChange={onChange}>
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
aria-label="Favorite Animal"
|
||||
label="Favorite Animal"
|
||||
onChange={onChange}
|
||||
>
|
||||
{options.map((o) => (
|
||||
<SelectItem key={o} value={o}>
|
||||
{o}
|
||||
@ -973,6 +1050,7 @@ describe("Select virtualization tests", () => {
|
||||
const wrapper = render(
|
||||
<div style={{height: "200px", overflow: "auto"}}>
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
isVirtualized
|
||||
aria-label="Favorite Animal"
|
||||
@ -1027,6 +1105,7 @@ describe("Select virtualization tests", () => {
|
||||
const wrapper = render(
|
||||
<div style={{height: "200px", overflow: "auto"}}>
|
||||
<Select
|
||||
disableAnimation
|
||||
isOpen
|
||||
isVirtualized
|
||||
aria-label="Favorite Animal"
|
||||
@ -1100,6 +1179,7 @@ describe("Select with React Hook Form", () => {
|
||||
wrapper = render(
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Select
|
||||
disableAnimation
|
||||
data-testid="select-1"
|
||||
items={itemsData}
|
||||
{...register("withDefaultValue")}
|
||||
@ -1109,6 +1189,7 @@ describe("Select with React Hook Form", () => {
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
disableAnimation
|
||||
data-testid="select-2"
|
||||
items={itemsData}
|
||||
{...register("withoutDefaultValue")}
|
||||
@ -1118,6 +1199,7 @@ describe("Select with React Hook Form", () => {
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
disableAnimation
|
||||
data-testid="select-3"
|
||||
items={itemsData}
|
||||
{...register("requiredField", {required: true})}
|
||||
@ -1307,6 +1389,7 @@ describe("validation", () => {
|
||||
return (
|
||||
<Form data-testid="form" validationBehavior="native" onSubmit={onSubmit}>
|
||||
<Select
|
||||
disableAnimation
|
||||
isRequired
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="trigger"
|
||||
@ -1362,6 +1445,7 @@ describe("validation", () => {
|
||||
const {getByTestId} = render(
|
||||
<Form data-testid="form" validationBehavior="native" onSubmit={onSubmit}>
|
||||
<Select
|
||||
disableAnimation
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="trigger"
|
||||
defaultSelectedKeys={["penguin"]}
|
||||
|
||||
@ -67,6 +67,7 @@
|
||||
"@heroui/chip": "workspace:*",
|
||||
"@heroui/input": "workspace:*",
|
||||
"@heroui/stories-utils": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/use-infinite-scroll": "workspace:*",
|
||||
@ -74,8 +75,8 @@
|
||||
"@react-stately/data": "3.12.1",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -49,8 +49,8 @@
|
||||
"@heroui/button": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -57,8 +57,8 @@
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -55,8 +55,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"framer-motion": "11.9.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Spacer} from "../src";
|
||||
|
||||
@ -8,6 +9,12 @@ describe("Spacer", () => {
|
||||
const wrapper = render(<Spacer />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
if (shouldIgnoreReactWarning(spy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
|
||||
@ -45,9 +45,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -48,8 +48,8 @@
|
||||
"devDependencies": {
|
||||
"@heroui/theme": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -56,8 +56,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"react-hook-form": "^7.51.3"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -67,8 +67,8 @@
|
||||
"@heroui/user": "workspace:*",
|
||||
"@react-stately/data": "3.12.1",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"swr": "^2.2.1"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -2,6 +2,7 @@ import * as React from "react";
|
||||
import {act, render, fireEvent, within} from "@testing-library/react";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
import {focus} from "@heroui/test-utils";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Tabs, Tab, TabsProps} from "../src";
|
||||
|
||||
@ -45,10 +46,6 @@ function getPlacementTemplate(position: TabsProps["placement"]) {
|
||||
);
|
||||
}
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Tabs", () => {
|
||||
let user: UserEvent;
|
||||
|
||||
@ -76,7 +73,9 @@ describe("Tabs", () => {
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
if (!shouldIgnoreReactWarning(spy)) {
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
}
|
||||
});
|
||||
|
||||
it("should render correctly (dynamic)", () => {
|
||||
|
||||
@ -67,8 +67,8 @@
|
||||
"@heroui/button": "workspace:*",
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -1,13 +1,10 @@
|
||||
import * as React from "react";
|
||||
import {render, fireEvent, act} from "@testing-library/react";
|
||||
import {Button} from "@heroui/button";
|
||||
import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
|
||||
|
||||
import {Tooltip} from "../src";
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
describe("Tooltip", () => {
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
@ -30,7 +27,9 @@ describe("Tooltip", () => {
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
if (!shouldIgnoreReactWarning(spy)) {
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
}
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
"@heroui/button": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0"
|
||||
},
|
||||
|
||||
@ -51,8 +51,8 @@
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/link": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -97,8 +97,8 @@
|
||||
"framer-motion": ">=11.5.6 || >=12.0.0-alpha.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"clean-package": "2.2.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
|
||||
@ -38,11 +38,11 @@
|
||||
"@heroui/theme": ">=2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"tailwind-variants": "^0.1.20",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/react-utils": "workspace:*",
|
||||
"@heroui/shared-utils": "workspace:*",
|
||||
"react": "18.3.0",
|
||||
"tailwind-variants": "^0.3.0",
|
||||
"clean-package": "2.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@ -41,8 +41,8 @@
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -47,21 +47,21 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"color": "^4.2.3",
|
||||
"color2k": "^2.0.2",
|
||||
"color2k": "^2.0.3",
|
||||
"deepmerge": "4.3.1",
|
||||
"flat": "^5.0.2",
|
||||
"clsx": "^1.2.1",
|
||||
"tailwind-variants": "^0.1.20",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwind-variants": "0.3.0",
|
||||
"tailwind-merge": "2.5.4",
|
||||
"@heroui/shared-utils": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/color": "^3.0.3",
|
||||
"@types/color": "^4.2.0",
|
||||
"@types/flat": "^5.0.2",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"tailwindcss": "^3.4.16",
|
||||
"clean-package": "2.2.0"
|
||||
},
|
||||
"tsup": {
|
||||
|
||||
@ -4,5 +4,5 @@ import {ClassValue} from "tailwind-variants";
|
||||
* This Typescript utility transform a list of slots into a list of {slot: classes}
|
||||
*/
|
||||
export type SlotsToClasses<S extends string> = {
|
||||
[key in S]?: ClassValue;
|
||||
[key in S]?: Exclude<ClassValue, 0n>;
|
||||
};
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -45,8 +45,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -55,8 +55,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
"devDependencies": {
|
||||
"@heroui/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
"@heroui/react": "workspace:*",
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^8.5.0",
|
||||
|
||||
@ -49,8 +49,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -44,8 +44,8 @@
|
||||
"@heroui/shared-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "18.3.0",
|
||||
"react-dom": "18.3.0",
|
||||
"clean-package": "2.2.0",
|
||||
"framer-motion": "11.9.0"
|
||||
},
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.3.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
|
||||
@ -5,3 +5,4 @@ export * from "./dom";
|
||||
export * from "./drag";
|
||||
export * from "./events";
|
||||
export * from "./constants";
|
||||
export * from "./spy";
|
||||
|
||||
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