[Fix] no-unknown-property: support onBeforeToggle, popoverTarget, popoverTargetAction attributes

Author: acusti

CHANGELOG.md

@@ -11,6 +11,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-danger`]: avoid a crash on a nested component name ([#3833][] @ljharb)
 * [Fix] types: correct generated type declaration ([#3840][] @ocavue)
 * [`no-unknown-property`]: support `precedence` prop in react 19 ([#3829][] @acusti)
+* [`no-unknown-property`]: support `onBeforeToggle`, `popoverTarget`, `popoverTargetAction` attributes ([#3865][] @acusti)
 
 ### Changed
 * [Tests] [`jsx-no-script-url`]: Improve tests ([#3849][] @radu2147)
@@ -21,6 +22,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3840]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3840
 [#3833]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3833
 [#3829]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3829
+[#3865]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3865
 
 ## [7.37.2] - 2024.10.22
 

lib/rules/no-unknown-property.js

@@ -240,7 +240,7 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
   // Video specific
   'controls',
   // popovers
-  'popover', 'popovertarget', 'popovertargetaction',
+  'popover',
 ];
 
 const DOM_PROPERTY_NAMES_TWO_WORDS = [
@@ -259,8 +259,8 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onCompositionUpdate', 'onCut', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave',
   'onError', 'onFocus', 'onInput', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onWheel', 'onDragOver',
   'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver',
-  'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onToggle', 'onTransitionEnd', 'radioGroup', 'readOnly', 'referrerPolicy',
-  'rowSpan', 'srcDoc', 'srcLang', 'srcSet', 'useMap', 'fetchPriority',
+  'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onBeforeToggle', 'onToggle', 'onTransitionEnd', 'radioGroup',
+  'readOnly', 'referrerPolicy', 'rowSpan', 'srcDoc', 'srcLang', 'srcSet', 'useMap', 'fetchPriority',
   // SVG attributes
   // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
   'crossOrigin', 'accentHeight', 'alignmentBaseline', 'arabicForm', 'attributeName',
@@ -317,6 +317,8 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onMouseMoveCapture', 'onMouseOutCapture', 'onMouseOverCapture', 'onMouseUpCapture',
   // Video specific
   'autoPictureInPicture', 'controlsList', 'disablePictureInPicture', 'disableRemotePlayback',
+  // popovers
+  'popoverTarget', 'popoverTargetAction',
 ];
 
 const DOM_PROPERTIES_IGNORE_CASE = ['charset', 'allowFullScreen', 'webkitAllowFullScreen', 'mozAllowFullScreen', 'webkitDirectory'];

tests/lib/rules/no-unknown-property.js

@@ -182,11 +182,14 @@ ruleTester.run('no-unknown-property', rule, {
     {
       code: `
         <div>
-          <button popovertarget="my-popover" popovertargetaction="toggle">Open Popover</button>
+          <button popoverTarget="my-popover" popoverTargetAction="toggle">Open Popover</button>
 
-          <div popover id="my-popover">Greetings, one and all!</div>
+          <div id="my-popover" onBeforeToggle={this.onBeforeToggle} popover>Greetings, one and all!</div>
         </div>
       `,
+      settings: {
+        react: { version: '19.0.0' },
+      },
     },
   ]),
   invalid: parsers.all([