eslint-plugin-react-dom 2.0.0-next.154 → 2.0.0-next.156

package/dist/index.js

@@ -47,7 +47,7 @@ const settings = { "react-x": DEFAULT_ESLINT_REACT_SETTINGS };
 //#endregion
 //#region package.json
 var name = "eslint-plugin-react-dom";
-var version = "2.0.0-next.154";
+var version = "2.0.0-next.156";
 
 //#endregion
 //#region src/utils/create-jsx-element-resolver.ts
@@ -81,6 +81,13 @@ const createRule = ESLintUtils.RuleCreator(getDocsUrl("dom"));
 
 //#endregion
 //#region src/utils/find-custom-component.ts
+/**
+* Finds a custom component prop by its "as" name.
+*
+* @param name - The name to match against the prop's "as" property
+* @param props - Array of normalized custom component props to search through
+* @returns The matching prop if found, undefined otherwise
+*/
 function findCustomComponentProp(name$2, props) {
 	return props.findLast((a) => a.as === name$2);
 }
@@ -706,6 +713,9 @@ const DEFAULTS = {
 	ignore: [],
 	requireDataLowercase: false
 };
+/**
+* Map of standard HTML attributes to their React counterparts
+*/
 const DOM_ATTRIBUTE_NAMES = {
 	"accept-charset": "acceptCharset",
 	class: "className",
@@ -714,6 +724,96 @@ const DOM_ATTRIBUTE_NAMES = {
 	"http-equiv": "httpEquiv",
 	nomodule: "noModule"
 };
+/**
+* Map of SVG attributes to their React camelCase equivalents
+*/
+const SVGDOM_ATTRIBUTE_NAMES = {
+	"accent-height": "accentHeight",
+	"alignment-baseline": "alignmentBaseline",
+	"arabic-form": "arabicForm",
+	"baseline-shift": "baselineShift",
+	"cap-height": "capHeight",
+	"clip-path": "clipPath",
+	"clip-rule": "clipRule",
+	"color-interpolation": "colorInterpolation",
+	"color-interpolation-filters": "colorInterpolationFilters",
+	"color-profile": "colorProfile",
+	"color-rendering": "colorRendering",
+	"dominant-baseline": "dominantBaseline",
+	"enable-background": "enableBackground",
+	"fill-opacity": "fillOpacity",
+	"fill-rule": "fillRule",
+	"flood-color": "floodColor",
+	"flood-opacity": "floodOpacity",
+	"font-family": "fontFamily",
+	"font-size": "fontSize",
+	"font-size-adjust": "fontSizeAdjust",
+	"font-stretch": "fontStretch",
+	"font-style": "fontStyle",
+	"font-variant": "fontVariant",
+	"font-weight": "fontWeight",
+	"glyph-name": "glyphName",
+	"glyph-orientation-horizontal": "glyphOrientationHorizontal",
+	"glyph-orientation-vertical": "glyphOrientationVertical",
+	"horiz-adv-x": "horizAdvX",
+	"horiz-origin-x": "horizOriginX",
+	"image-rendering": "imageRendering",
+	"letter-spacing": "letterSpacing",
+	"lighting-color": "lightingColor",
+	"marker-end": "markerEnd",
+	"marker-mid": "markerMid",
+	"marker-start": "markerStart",
+	"overline-position": "overlinePosition",
+	"overline-thickness": "overlineThickness",
+	"paint-order": "paintOrder",
+	"panose-1": "panose1",
+	"pointer-events": "pointerEvents",
+	"rendering-intent": "renderingIntent",
+	"shape-rendering": "shapeRendering",
+	"stop-color": "stopColor",
+	"stop-opacity": "stopOpacity",
+	"strikethrough-position": "strikethroughPosition",
+	"strikethrough-thickness": "strikethroughThickness",
+	"stroke-dasharray": "strokeDasharray",
+	"stroke-dashoffset": "strokeDashoffset",
+	"stroke-linecap": "strokeLinecap",
+	"stroke-linejoin": "strokeLinejoin",
+	"stroke-miterlimit": "strokeMiterlimit",
+	"stroke-opacity": "strokeOpacity",
+	"stroke-width": "strokeWidth",
+	"text-anchor": "textAnchor",
+	"text-decoration": "textDecoration",
+	"text-rendering": "textRendering",
+	"underline-position": "underlinePosition",
+	"underline-thickness": "underlineThickness",
+	"unicode-bidi": "unicodeBidi",
+	"unicode-range": "unicodeRange",
+	"units-per-em": "unitsPerEm",
+	"v-alphabetic": "vAlphabetic",
+	"v-hanging": "vHanging",
+	"v-ideographic": "vIdeographic",
+	"v-mathematical": "vMathematical",
+	"vector-effect": "vectorEffect",
+	"vert-adv-y": "vertAdvY",
+	"vert-origin-x": "vertOriginX",
+	"vert-origin-y": "vertOriginY",
+	"word-spacing": "wordSpacing",
+	"writing-mode": "writingMode",
+	"x-height": "xHeight",
+	"xlink:actuate": "xlinkActuate",
+	"xlink:arcrole": "xlinkArcrole",
+	"xlink:href": "xlinkHref",
+	"xlink:role": "xlinkRole",
+	"xlink:show": "xlinkShow",
+	"xlink:title": "xlinkTitle",
+	"xlink:type": "xlinkType",
+	"xml:base": "xmlBase",
+	"xml:lang": "xmlLang",
+	"xml:space": "xmlSpace"
+};
+/**
+* Map of attributes that are only valid on specific HTML tags
+*/
 const ATTRIBUTE_TAGS_MAP = {
 	as: ["link"],
 	abbr: ["th", "td"],
@@ -853,90 +953,9 @@ const ATTRIBUTE_TAGS_MAP = {
 	webkitAllowFullScreen: ["iframe", "video"],
 	webkitDirectory: ["input"]
 };
-const SVGDOM_ATTRIBUTE_NAMES = {
-	"accent-height": "accentHeight",
-	"alignment-baseline": "alignmentBaseline",
-	"arabic-form": "arabicForm",
-	"baseline-shift": "baselineShift",
-	"cap-height": "capHeight",
-	"clip-path": "clipPath",
-	"clip-rule": "clipRule",
-	"color-interpolation": "colorInterpolation",
-	"color-interpolation-filters": "colorInterpolationFilters",
-	"color-profile": "colorProfile",
-	"color-rendering": "colorRendering",
-	"dominant-baseline": "dominantBaseline",
-	"enable-background": "enableBackground",
-	"fill-opacity": "fillOpacity",
-	"fill-rule": "fillRule",
-	"flood-color": "floodColor",
-	"flood-opacity": "floodOpacity",
-	"font-family": "fontFamily",
-	"font-size": "fontSize",
-	"font-size-adjust": "fontSizeAdjust",
-	"font-stretch": "fontStretch",
-	"font-style": "fontStyle",
-	"font-variant": "fontVariant",
-	"font-weight": "fontWeight",
-	"glyph-name": "glyphName",
-	"glyph-orientation-horizontal": "glyphOrientationHorizontal",
-	"glyph-orientation-vertical": "glyphOrientationVertical",
-	"horiz-adv-x": "horizAdvX",
-	"horiz-origin-x": "horizOriginX",
-	"image-rendering": "imageRendering",
-	"letter-spacing": "letterSpacing",
-	"lighting-color": "lightingColor",
-	"marker-end": "markerEnd",
-	"marker-mid": "markerMid",
-	"marker-start": "markerStart",
-	"overline-position": "overlinePosition",
-	"overline-thickness": "overlineThickness",
-	"paint-order": "paintOrder",
-	"panose-1": "panose1",
-	"pointer-events": "pointerEvents",
-	"rendering-intent": "renderingIntent",
-	"shape-rendering": "shapeRendering",
-	"stop-color": "stopColor",
-	"stop-opacity": "stopOpacity",
-	"strikethrough-position": "strikethroughPosition",
-	"strikethrough-thickness": "strikethroughThickness",
-	"stroke-dasharray": "strokeDasharray",
-	"stroke-dashoffset": "strokeDashoffset",
-	"stroke-linecap": "strokeLinecap",
-	"stroke-linejoin": "strokeLinejoin",
-	"stroke-miterlimit": "strokeMiterlimit",
-	"stroke-opacity": "strokeOpacity",
-	"stroke-width": "strokeWidth",
-	"text-anchor": "textAnchor",
-	"text-decoration": "textDecoration",
-	"text-rendering": "textRendering",
-	"underline-position": "underlinePosition",
-	"underline-thickness": "underlineThickness",
-	"unicode-bidi": "unicodeBidi",
-	"unicode-range": "unicodeRange",
-	"units-per-em": "unitsPerEm",
-	"v-alphabetic": "vAlphabetic",
-	"v-hanging": "vHanging",
-	"v-ideographic": "vIdeographic",
-	"v-mathematical": "vMathematical",
-	"vector-effect": "vectorEffect",
-	"vert-adv-y": "vertAdvY",
-	"vert-origin-x": "vertOriginX",
-	"vert-origin-y": "vertOriginY",
-	"word-spacing": "wordSpacing",
-	"writing-mode": "writingMode",
-	"x-height": "xHeight",
-	"xlink:actuate": "xlinkActuate",
-	"xlink:arcrole": "xlinkArcrole",
-	"xlink:href": "xlinkHref",
-	"xlink:role": "xlinkRole",
-	"xlink:show": "xlinkShow",
-	"xlink:title": "xlinkTitle",
-	"xlink:type": "xlinkType",
-	"xml:base": "xmlBase",
-	"xml:lang": "xmlLang",
-	"xml:space": "xmlSpace"
-};
+/**
+* Single-word HTML/DOM properties
+*/
 const DOM_PROPERTY_NAMES_ONE_WORD = [
 	"dir",
 	"draggable",
@@ -1129,6 +1148,9 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
 	"security",
 	"controls"
 ];
+/**
+* Multi-word (camelCase) HTML/DOM properties
+*/
 const DOM_PROPERTY_NAMES_TWO_WORDS = [
 	"accessKey",
 	"autoCapitalize",
@@ -1490,6 +1512,9 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
 	"disablePictureInPicture",
 	"disableRemotePlayback"
 ];
+/**
+* DOM properties that are exempt from case sensitivity checks
+*/
 const DOM_PROPERTIES_IGNORE_CASE = [
 	"charset",
 	"allowFullScreen",
@@ -1497,6 +1522,9 @@ const DOM_PROPERTIES_IGNORE_CASE = [
 	"mozAllowFullScreen",
 	"webkitDirectory"
 ];
+/**
+* List of ARIA attributes
+*/
 const ARIA_PROPERTIES = [
 	"aria-atomic",
 	"aria-braillelabel",
@@ -1552,6 +1580,9 @@ const ARIA_PROPERTIES = [
 	"aria-rowspan",
 	"aria-setsize"
 ];
+/**
+* React-specific pointer event handlers added in React 16.4
+*/
 const REACT_ON_PROPS = [
 	"onGotPointerCapture",
 	"onGotPointerCaptureCapture",
@@ -1575,6 +1606,9 @@ const REACT_ON_PROPS = [
 	"onPointerUp",
 	"onPointerUpCapture"
 ];
+/**
+* Popover API properties added in React 19
+*/
 const POPOVER_API_PROPS = [
 	"popover",
 	"popoverTarget",
@@ -1582,6 +1616,11 @@ const POPOVER_API_PROPS = [
 	"onToggle",
 	"onBeforeToggle"
 ];
+/**
+* Gets all valid DOM property names based on React version
+* @param context - ESLint rule context
+* @returns Array of valid DOM property names
+*/
 function getDOMPropertyNames(context) {
 	const ALL_DOM_PROPERTY_NAMES = DOM_PROPERTY_NAMES_TWO_WORDS.concat(DOM_PROPERTY_NAMES_ONE_WORD);
 	if (testReactVersion(context, "<=", "16.1.0")) {
@@ -1594,14 +1633,9 @@ function getDOMPropertyNames(context) {
 }
 /**
 * Checks if a node's parent is a JSX tag that is written with lowercase letters,
-* and is not a custom web component. Custom web components have a hyphen in tag name,
-* or have an `is="some-elem"` attribute.
-*
-* Note: does not check if a tag's parent against a list of standard HTML/DOM tags. For example,
-* a `<fake>`'s child would return `true` because "fake" is written only with lowercase letters
-* without a hyphen and does not have a `is="some-elem"` attribute.
-* @param childNode - JSX element being tested.
-* @returns Whether or not the node name match the JSX tag convention.
+* and is not a custom web component.
+* @param childNode - JSX element being tested
+* @returns Whether the node is a valid HTML tag in JSX
 */
 function isValidHTMLTagInJSX(childNode) {
 	const tagConvention = /^[a-z][^-]*$/;
@@ -1609,70 +1643,59 @@ function isValidHTMLTagInJSX(childNode) {
 	return false;
 }
 /**
-* Checks if the attribute name is included in the attributes that are excluded
-* from the camel casing.
-*
-* // returns 'charSet'
-* @example normalizeAttributeCase('charset')
-*
-* Note - these exclusions are not made by React core team, but `eslint-plugin-react` community.
-* @param name - Attribute name to be normalized
-* @returns Result
+* Normalizes attribute names that should be case-insensitive
+* @param name - Attribute name to normalize
+* @returns Normalized attribute name
 */
 function normalizeAttributeCase(name$2) {
 	return DOM_PROPERTIES_IGNORE_CASE.find((element) => element.toLowerCase() === name$2.toLowerCase()) || name$2;
 }
 /**
-* Checks if an attribute name is a valid `data-*` attribute:
-* if the name starts with "data-" and has alphanumeric words (browsers require lowercase, but React and TS lowercase them),
-* not start with any casing of "xml", and separated by hyphens (-) (which is also called "kebab case" or "dash case"),
-* then the attribute is a valid data attribute.
-* @param name - Attribute name to be tested
-* @returns Result
+* Checks if an attribute name is a valid data-* attribute
+* @param name - Attribute name to test
+* @returns Whether the attribute is a valid data attribute
 */
 function isValidDataAttribute(name$2) {
 	return !/^data-xml/i.test(name$2) && /^data-[^:]*$/.test(name$2);
 }
 /**
-* Checks if an attribute name has at least one uppercase characters
-* @param name
-* @returns Result
+* Checks if an attribute name has uppercase characters
+* @param name - Attribute name to test
+* @returns Whether the name has uppercase characters
 */
 function hasUpperCaseCharacter(name$2) {
 	return name$2.toLowerCase() !== name$2;
 }
 /**
-* Checks if an attribute name is a standard aria attribute by compering it to a list
-* of standard aria property names
-* @param {string} name - Attribute name to be tested
-* @returns {boolean} Result
+* Checks if an attribute is a valid ARIA attribute
+* @param name - Attribute name to test
+* @returns Whether the attribute is a valid ARIA attribute
 */
 function isValidAriaAttribute(name$2) {
 	return ARIA_PROPERTIES.some((element) => element === name$2);
 }
 /**
-* Extracts the tag name for the JSXAttribute
-* @param node - JSXAttribute being tested.
-* @returns tag name
+* Gets the tag name for a JSXAttribute
+* @param node - JSXAttribute to get tag name from
+* @returns Tag name or null
 */
 function getTagName(node) {
 	if (node?.parent?.name) return node.parent.name.name;
 	return null;
 }
 /**
-* Test wether the tag name for the JSXAttribute is
-* something like <Foo.bar />
-* @param node - JSXAttribute being tested.
-* @returns result
+* Checks if the tag name has a dot (member expression)
+* @param node - JSXAttribute to check
+* @returns Whether the tag name has a dot
 */
 function tagNameHasDot(node) {
 	return !!(node.parent?.name && node.parent.name.type === "JSXMemberExpression");
 }
 /**
-* Get the standard name of the attribute.
-* @param name - Name of the attribute.
-* @param context - eslint context
-* @returns The standard name of the attribute, or undefined if no standard name was found.
+* Gets the standard name of an attribute
+* @param name - Attribute name
+* @param context - ESLint context
+* @returns Standard name or undefined
 */
 function getStandardName(name$2, context) {
 	if (has(DOM_ATTRIBUTE_NAMES, name$2)) return DOM_ATTRIBUTE_NAMES[name$2];
@@ -1680,6 +1703,35 @@ function getStandardName(name$2, context) {
 	const names = getDOMPropertyNames(context);
 	return names.find((element) => element.toLowerCase() === name$2.toLowerCase());
 }
+/**
+* Checks if an object has a property
+* @param obj - Object to check
+* @param key - Key to check for
+* @returns Whether the object has the property
+*/
+function has(obj, key) {
+	return Object.hasOwn(obj, key);
+}
+/**
+* Gets text of a node
+* @param context - ESLint context
+* @param node - Node to get text from
+* @returns Node's text
+*/
+function getText(context, node) {
+	return context.sourceCode.getText(node);
+}
+/**
+* Tests React version against a comparator
+* @param context - ESLint context
+* @param comparator - Comparison operator
+* @param version - Version to compare against
+* @returns Comparison result
+*/
+function testReactVersion(context, comparator, version$1) {
+	const { version: localVersion } = getSettingsFromContext(context);
+	return compare(localVersion, version$1, comparator);
+}
 const messages = {
 	dataLowercaseRequired: "React does not recognize data-* props with uppercase characters on a DOM element. Found '{{name}}', use '{{lowerCaseName}}' instead",
 	invalidPropOnTag: "Invalid property '{{name}}' found on tag '{{tagName}}', but it is only allowed on: {{allowedTags}}",
@@ -1711,11 +1763,24 @@ var no_unknown_property_default = createRule({
 	create: create$4,
 	defaultOptions: []
 });
+/**
+* Create function for the ESLint rule
+* @param context - ESLint rule context
+* @returns Rule listener
+*/
 function create$4(context) {
 	const report = Reporter.make(context);
+	/**
+	* Gets the ignore configuration from rule options
+	* @returns Array of attribute names to ignore
+	*/
 	function getIgnoreConfig() {
 		return context.options[0]?.ignore || DEFAULTS.ignore;
 	}
+	/**
+	* Gets the requireDataLowercase option from rule options
+	* @returns Whether data attributes must be lowercase
+	*/
 	function getRequireDataLowercase() {
 		return context.options[0] && typeof context.options[0].requireDataLowercase !== "undefined" ? !!context.options[0].requireDataLowercase : DEFAULTS.requireDataLowercase;
 	}
@@ -1754,8 +1819,8 @@ function create$4(context) {
 			return;
 		}
 		const standardName = getStandardName(name$2, context);
-		const hasStandardNameButIsNotUsed = standardName && standardName !== name$2;
-		const usesStandardName = standardName && standardName === name$2;
+		const hasStandardNameButIsNotUsed = !!standardName && standardName !== name$2;
+		const usesStandardName = !!standardName && standardName === name$2;
 		if (usesStandardName) return;
 		if (hasStandardNameButIsNotUsed) {
 			report.send({
@@ -1778,16 +1843,6 @@ function create$4(context) {
 		});
 	} };
 }
-function has(obj, key) {
-	return Object.hasOwn(obj, key);
-}
-function getText(context, node) {
-	return context.sourceCode.getText(node);
-}
-function testReactVersion(context, comparator, version$1) {
-	const { version: localVersion } = getSettingsFromContext(context);
-	return compare(localVersion, version$1, comparator);
-}
 
 //#endregion
 //#region src/rules/no-unsafe-iframe-sandbox.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-dom",
-  "version": "2.0.0-next.154",
+  "version": "2.0.0-next.156",
   "description": "ESLint React's ESLint plugin for React DOM related rules.",
   "keywords": [
     "react",
@@ -41,12 +41,12 @@
     "compare-versions": "^6.1.1",
     "string-ts": "^2.2.1",
     "ts-pattern": "^5.8.0",
-    "@eslint-react/ast": "2.0.0-next.154",
-    "@eslint-react/core": "2.0.0-next.154",
-    "@eslint-react/eff": "2.0.0-next.154",
-    "@eslint-react/shared": "2.0.0-next.154",
-    "@eslint-react/var": "2.0.0-next.154",
-    "@eslint-react/kit": "2.0.0-next.154"
+    "@eslint-react/ast": "2.0.0-next.156",
+    "@eslint-react/core": "2.0.0-next.156",
+    "@eslint-react/eff": "2.0.0-next.156",
+    "@eslint-react/shared": "2.0.0-next.156",
+    "@eslint-react/var": "2.0.0-next.156",
+    "@eslint-react/kit": "2.0.0-next.156"
   },
   "devDependencies": {
     "@types/react": "^19.1.12",