diff --git a/README.md b/README.md index 5cc092d..4a57694 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ open http://localhost:8000 ## Usage ```js | pure -import Portal from 'rc-portal'; +import Portal from '@rc-component/portal'; const Demo = () => { return Hello World; diff --git a/package.json b/package.json index 4f70bb0..2302bdb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rc-component/portal", - "version": "1.1.2", + "version": "2.0.0", "description": "React Portal Component", "keywords": [ "react", @@ -27,29 +27,29 @@ ], "scripts": { "compile": "father build", - "prepare": "dumi setup", "deploy": "npm run docs:build && npm run docs:deploy", "docs:build": "dumi build", "docs:deploy": "gh-pages -d docs-dist", "lint": "eslint src/ --ext .tsx,.ts", "lint:tsc": "tsc -p tsconfig.json --noEmit", "now-build": "npm run docs:build", - "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "prepare": "dumi setup", + "prepublishOnly": "npm run compile && rc-np", "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"", "start": "dumi dev", "test": "npm run test:server && npm run test:coverage", - "test:client": "umi-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx", + "test:client": "rc-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx", "test:coverage": "npm run test:client -- --coverage", - "test:server": "umi-test --env=node -- tests/ssr.test.tsx", + "test:server": "rc-test --env=node -- tests/ssr.test.tsx", "watch": "father dev" }, "dependencies": { - "@babel/runtime": "^7.18.0", - "classnames": "^2.3.2", - "rc-util": "^5.24.4" + "@rc-component/util": "^1.2.1", + "classnames": "^2.3.2" }, "devDependencies": { - "@rc-component/father-plugin": "^1.0.0", + "@rc-component/father-plugin": "^2.0.2", + "@rc-component/np": "^1.0.3", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.0.0", "@types/jest": "^26.0.20", @@ -62,19 +62,17 @@ "father": "^4.0.0", "gh-pages": "^6.1.1", "glob": "^10.0.0", - "np": "^5.0.3", "prettier": "^2.1.2", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "typescript": "^5.0.0", - "cheerio": "1.0.0-rc.12", - "umi-test": "^1.9.7" + "rc-test": "^7.1.2", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "typescript": "^5.0.0" }, "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0" + "react": ">=18.0.0", + "react-dom": ">=18.0.0" }, "engines": { - "node": ">=8.x" + "node": ">=12.x" } } diff --git a/src/Portal.tsx b/src/Portal.tsx index 5fc4d79..3678b74 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -1,12 +1,16 @@ +import canUseDom from '@rc-component/util/lib/Dom/canUseDom'; +import { + getNodeRef, + supportRef, + useComposeRef, +} from '@rc-component/util/lib/ref'; +import warning from '@rc-component/util/lib/warning'; import * as React from 'react'; import { createPortal } from 'react-dom'; -import canUseDom from 'rc-util/lib/Dom/canUseDom'; -import warning from 'rc-util/lib/warning'; -import { supportRef, useComposeRef } from 'rc-util/lib/ref'; import OrderContext from './Context'; +import { inlineMock } from './mock'; import useDom from './useDom'; import useScrollLocker from './useScrollLocker'; -import { inlineMock } from './mock'; export type ContainerType = Element | DocumentFragment; @@ -109,7 +113,7 @@ const Portal = React.forwardRef((props, ref) => { let childRef: React.Ref = null; if (children && supportRef(children) && ref) { - ({ ref: childRef } = children as any); + childRef = getNodeRef(children); } const mergedRef = useComposeRef(childRef, ref); diff --git a/src/useDom.tsx b/src/useDom.tsx index 784aaae..e2fb69e 100644 --- a/src/useDom.tsx +++ b/src/useDom.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; -import canUseDom from 'rc-util/lib/Dom/canUseDom'; +import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect'; +import canUseDom from '@rc-component/util/lib/Dom/canUseDom'; import OrderContext from './Context'; import type { QueueCreate } from './Context'; diff --git a/src/useScrollLocker.tsx b/src/useScrollLocker.tsx index febc78b..01a6630 100644 --- a/src/useScrollLocker.tsx +++ b/src/useScrollLocker.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS'; -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; -import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize'; +import { updateCSS, removeCSS } from '@rc-component/util/lib/Dom/dynamicCSS'; +import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect'; +import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize'; import { isBodyOverflowing } from './util'; const UNIQUE_ID = `rc-util-locker-${Date.now()}`; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index c433ea0..e8d77fb 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import { render } from '@testing-library/react'; +import React from 'react'; import Portal from '../src'; global.isOverflow = true; @@ -13,7 +13,7 @@ jest.mock('../src/util', () => { }); // Revert `useLayoutEffect` back to real one since we should keep order for test -jest.mock('rc-util/lib/hooks/useLayoutEffect', () => { +jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => { const origin = jest.requireActual('react'); return origin.useLayoutEffect; }); @@ -210,7 +210,8 @@ describe('Portal', () => { expect(portalRef.current).toBeFalsy(); }); - it('not support FC', () => { + it('no warning for React 19 ref', () => { + const errSpy = jest.spyOn(console, 'error'); const elementRef = React.createRef(); const portalRef = React.createRef(); @@ -222,8 +223,9 @@ describe('Portal', () => { , ); - expect(elementRef.current).toBeFalsy(); - expect(portalRef.current).toBeFalsy(); + expect(errSpy).not.toHaveBeenCalled(); + + errSpy.mockRestore(); }); }); diff --git a/tests/webkit.test.tsx b/tests/webkit.test.tsx index 48757a2..7fc95ca 100644 --- a/tests/webkit.test.tsx +++ b/tests/webkit.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; import Portal from '../src'; -import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; jest.mock('../src/util', () => { const origin = jest.requireActual('../src/util'); @@ -12,14 +11,14 @@ jest.mock('../src/util', () => { }); // Revert `useLayoutEffect` back to real one since we should keep order for test -jest.mock('rc-util/lib/hooks/useLayoutEffect', () => { +jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => { const origin = jest.requireActual('react'); return origin.useLayoutEffect; }); // Revert `useLayoutEffect` back to real one since we should keep order for test -jest.mock('rc-util/lib/getScrollBarSize', () => { - const origin = jest.requireActual('rc-util/lib/getScrollBarSize'); +jest.mock('@rc-component/util/lib/getScrollBarSize', () => { + const origin = jest.requireActual('@rc-component/util/lib/getScrollBarSize'); return { ...origin,