diff --git a/README.md b/README.md index c2890fb..c5533df 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# rc-tooltip +# @rc-component/tooltip React Tooltip @@ -9,18 +9,16 @@ React Tooltip [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] -[npm-image]: http://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-tooltip -[travis-image]: https://img.shields.io/travis/react-component/tooltip/master?style=flat-square -[travis-url]: https://travis-ci.com/react-component/tooltip +[npm-image]: http://img.shields.io/npm/v/@rc-component/tooltip.svg?style=flat-square +[npm-url]: http://npmjs.org/package/@rc-component/tooltip [github-actions-image]: https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml/badge.svg [github-actions-url]: https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml [codecov-image]: https://img.shields.io/codecov/c/github/react-component/tooltip/master.svg?style=flat-square [codecov-url]: https://app.codecov.io/gh/react-component/tooltip -[download-image]: https://img.shields.io/npm/dm/rc-tooltip.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-tooltip -[bundlephobia-url]: https://bundlephobia.com/package/rc-tooltip -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tooltip +[download-image]: https://img.shields.io/npm/dm/@rc-component/tooltip.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/tooltip +[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/tooltip +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/tooltip [dumi-url]: https://github.com/umijs/dumi [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square @@ -36,18 +34,18 @@ React Tooltip ## Install -[![rc-tooltip](https://nodei.co/npm/rc-tooltip.png)](https://npmjs.org/package/rc-tooltip) +[![@rc-component/tooltip](https://nodei.co/npm/@rc-component/tooltip.png)](https://npmjs.org/package/@rc-component/tooltip) ## Usage ```js -var Tooltip = require('rc-tooltip'); +var Tooltip = require('@rc-component/tooltip'); var React = require('react'); var ReactDOM = require('react-dom'); // By default, the tooltip has no style. // Consider importing the stylesheet it comes with: -// 'rc-tooltip/assets/bootstrap_white.css' +// '@rc-component/tooltip/assets/bootstrap_white.css' ReactDOM.render( tooltip}> @@ -135,4 +133,4 @@ npm run coverage ## License -`rc-tooltip` is released under the MIT license. +`@rc-component/tooltip` is released under the MIT license. diff --git a/package.json b/package.json index 8fe32ce..7d98d1c 100644 --- a/package.json +++ b/package.json @@ -41,13 +41,14 @@ "test": "rc-test" }, "dependencies": { - "@rc-component/trigger": "^3.6.15", + "@rc-component/trigger": "^3.7.1", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, "devDependencies": { "@rc-component/father-plugin": "^2.0.1", "@rc-component/np": "^1.0.3", + "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.0", "@types/jest": "^29.4.0", "@types/node": "^22.15.18", diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 4808238..9f90bb4 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -16,13 +16,13 @@ export interface TooltipProps | 'onPopupAlign' | 'builtinPlacements' | 'fresh' - | 'children' | 'mouseLeaveDelay' | 'mouseEnterDelay' | 'prefixCls' | 'forceRender' | 'popupVisible' > { + children: React.ReactElement; // Style classNames?: Partial>; styles?: Partial>; @@ -113,14 +113,12 @@ const Tooltip = React.forwardRef((props, ref) => { }, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]); // ======================== Children ======================== - const getChildren = () => { + const getChildren: TriggerProps['children'] = ({ open }) => { const child = React.Children.only(children); - const originalProps = child?.props || {}; - const childProps = { - ...originalProps, - 'aria-describedby': overlay ? mergedId : null, + const ariaProps: React.AriaAttributes = { + 'aria-describedby': overlay && open ? mergedId : undefined, }; - return React.cloneElement(children, childProps) as any; + return React.cloneElement(child, ariaProps); }; // ========================= Render ========================= @@ -158,7 +156,7 @@ const Tooltip = React.forwardRef((props, ref) => { uniqueContainerStyle={styles?.uniqueContainer} {...extraProps} > - {getChildren()} + {getChildren} ); }); diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 37781e8..1363e5e 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -502,19 +502,28 @@ describe('rc-tooltip', () => { }); describe('children handling', () => { - it('should pass aria-describedby to child element when overlay exists', () => { + it('should set aria-describedby immediately when defaultVisible is true', () => { const { container } = render( - + , ); - expect(container.querySelector('button')).toHaveAttribute('aria-describedby', 'test-id'); + expect(container.querySelector('button')).toHaveAttribute('aria-describedby'); }); - it('should not pass aria-describedby when overlay is empty', () => { - const { container } = render( - + it('should remove aria-describedby when controlled hidden', () => { + const overlay = 'tooltip content'; + const { container, rerender } = render( + + + , + ); + + expect(container.querySelector('button')).toHaveAttribute('aria-describedby'); + + rerender( + , ); diff --git a/tsconfig.json b/tsconfig.json index 33bd1ce..f950160 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,6 +7,7 @@ "declaration": true, "skipLibCheck": true, "esModuleInterop": true, + "types": ["@testing-library/jest-dom"], "paths": { "@/*": [ "src/*"