@atlaskit/eslint-plugin-design-system 13.8.0 → 13.10.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.10.0
+
+### Minor Changes
+
+- [#145568](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145568)
+  [`43180d95604d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/43180d95604d6) -
+  Add rule to encourage use of the DS heading component over native HTML headings.
+
+## 13.9.0
+
+### Minor Changes
+
+- [#145662](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145662)
+  [`acf5f6979c85f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/acf5f6979c85f) -
+  Add rule to encourage use of the DS select component over native HTML selects.
+
 ## 13.8.0
 
 ### Minor Changes

package/README.md

@@ -69,8 +69,10 @@ module.exports = {
 | <a href="./src/rules/no-html-anchor/README.md">no-html-anchor</a>                                                           | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="./src/rules/no-html-button/README.md">no-html-button</a>                                                           | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |
 | <a href="./src/rules/no-html-checkbox/README.md">no-html-checkbox</a>                                                       | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component.                                                                                                                                                                                                       | Yes         |         | Yes         |
+| <a href="./src/rules/no-html-heading/README.md">no-html-heading</a>                                                         | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.                                                                                                                                                                                                            | Yes         |         | Yes         |
 | <a href="./src/rules/no-html-image/README.md">no-html-image</a>                                                             | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component.                                                                                                                                                                                                             | Yes         |         | Yes         |
 | <a href="./src/rules/no-html-range/README.md">no-html-range</a>                                                             | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component.                                                                                                                                                                                                             | Yes         |         | Yes         |
+| <a href="./src/rules/no-html-select/README.md">no-html-select</a>                                                           | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.                                                                                                                                                                                                           | Yes         |         | Yes         |
 | <a href="./src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>                                                   | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="./src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a>         | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
 | <a href="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a>                                                         | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             | Yes     | Yes         |

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cadedc68c5a8a92d8134b8aa5239937f>>
+ * @codegen <<SignedSource::aa1526cdf8f7bbdd8e89e584da433397>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -30,8 +30,10 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-html-anchor': 'warn',
     '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-html-checkbox': 'warn',
+    '@atlaskit/design-system/no-html-heading': 'warn',
     '@atlaskit/design-system/no-html-image': 'warn',
     '@atlaskit/design-system/no-html-range': 'warn',
+    '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::340bf9f79ec1de1340a89df9d626b929>>
+ * @codegen <<SignedSource::ec47b97e20d77ba1f43c2211aeeed2f6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -29,8 +29,10 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-html-anchor': 'warn',
     '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-html-checkbox': 'warn',
+    '@atlaskit/design-system/no-html-heading': 'warn',
     '@atlaskit/design-system/no-html-image': 'warn',
     '@atlaskit/design-system/no-html-range': 'warn',
+    '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],

package/dist/cjs/presets/recommended-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c264ea60cc6348c4292744c1260543d8>>
+ * @codegen <<SignedSource::4ad986601bfd6f0081e3bc6909694979>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -25,8 +25,10 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-html-anchor': 'warn',
     '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-html-checkbox': 'warn',
+    '@atlaskit/design-system/no-html-heading': 'warn',
     '@atlaskit/design-system/no-html-image': 'warn',
     '@atlaskit/design-system/no-html-range': 'warn',
+    '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0158deb3db6cafbdeae2aeb18673ebc2>>
+ * @codegen <<SignedSource::18dcf6fce30892e43fb5fb76339c261e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -24,8 +24,10 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-html-anchor': 'warn',
     '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-html-checkbox': 'warn',
+    '@atlaskit/design-system/no-html-heading': 'warn',
     '@atlaskit/design-system/no-html-image': 'warn',
     '@atlaskit/design-system/no-html-range': 'warn',
+    '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],

package/dist/cjs/rules/index.codegen.js

@@ -25,8 +25,10 @@ var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyfram
 var _noHtmlAnchor = _interopRequireDefault(require("./no-html-anchor"));
 var _noHtmlButton = _interopRequireDefault(require("./no-html-button"));
 var _noHtmlCheckbox = _interopRequireDefault(require("./no-html-checkbox"));
+var _noHtmlHeading = _interopRequireDefault(require("./no-html-heading"));
 var _noHtmlImage = _interopRequireDefault(require("./no-html-image"));
 var _noHtmlRange = _interopRequireDefault(require("./no-html-range"));
+var _noHtmlSelect = _interopRequireDefault(require("./no-html-select"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
 var _noLegacyIcons = _interopRequireDefault(require("./no-legacy-icons"));
@@ -61,7 +63,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5945e51ebc0b2c3553b51162f07dbd63>>
+ * @codegen <<SignedSource::19fc297469c40b1fa9fd64c9f9313ba7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -86,8 +88,10 @@ var rules = exports.rules = {
   'no-html-anchor': _noHtmlAnchor.default,
   'no-html-button': _noHtmlButton.default,
   'no-html-checkbox': _noHtmlCheckbox.default,
+  'no-html-heading': _noHtmlHeading.default,
   'no-html-image': _noHtmlImage.default,
   'no-html-range': _noHtmlRange.default,
+  'no-html-select': _noHtmlSelect.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
   'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
   'no-legacy-icons': _noLegacyIcons.default,

package/dist/cjs/rules/no-html-heading/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _nodeTypes = require("./node-types");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-html-heading',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlHeading: "This <{{ name }}> should be replaced with a heading component from the Atlassian Design System. ADS headings include ensure accessible implementations and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<heading>(...) usages
+      CallExpression: function CallExpression(node) {
+        _nodeTypes.StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <heading css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _nodeTypes.JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-html-heading/node-types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "JSXElement", {
+  enumerable: true,
+  get: function get() {
+    return _jsxElement.JSXElement;
+  }
+});
+Object.defineProperty(exports, "StyledComponent", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponent.StyledComponent;
+  }
+});
+var _styledComponent = require("./styled-component");
+var _jsxElement = require("./jsx-element");

package/dist/cjs/rules/no-html-heading/node-types/jsx-element/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSXElement = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
+var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
+var _supported = require("../supported");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function isImportDeclaration(node) {
+  return node.type === 'ImportDeclaration';
+}
+var JSXElement = exports.JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!(0, _supported.isSupportedForLint)(node)) {
+      return;
+    }
+    var nodeName = ast.JSXElement.getName(node);
+    var sourceCode = (0, _contextCompat.getSourceCode)(context);
+    var importDeclarations = sourceCode.ast.body.filter(isImportDeclaration);
+    var existingHeadingName = null;
+    var usedNames = new Set();
+
+    // Check for existing imports
+    var _iterator = _createForOfIteratorHelper(importDeclarations),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var declaration = _step.value;
+        var _iterator2 = _createForOfIteratorHelper(declaration.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var specifier = _step2.value;
+            usedNames.add(specifier.local.name);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        if (declaration.source.value === '@atlaskit/heading') {
+          var defaultSpecifier = declaration.specifiers.find(function (specifier) {
+            return specifier.type === 'ImportDefaultSpecifier';
+          });
+          if (defaultSpecifier) {
+            existingHeadingName = defaultSpecifier.local.name;
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    var generateUniqueName = function generateUniqueName(baseName) {
+      var index = 1;
+      var newName = baseName;
+      while (usedNames.has(newName)) {
+        newName = "".concat(baseName).concat(index);
+        index++;
+      }
+      return newName;
+    };
+    var headingName = existingHeadingName || generateUniqueName('Heading');
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlHeading',
+      data: {
+        name: nodeName
+      },
+      suggest: [{
+        desc: 'Replace with Heading component from @atlaskit/heading',
+        fix: function fix(fixer) {
+          var _node$closingElement;
+          var openingTagRange = node.openingElement.range;
+          var closingTagRange = (_node$closingElement = node.closingElement) === null || _node$closingElement === void 0 ? void 0 : _node$closingElement.range;
+          var elementName = (0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier') ? node.openingElement.name.name : '';
+          var attributesText = node.openingElement.attributes
+          // Don't bring in the "role" or the "aria-level" because it's not needed
+          .filter(function (attr) {
+            return !(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') || typeof attr.name.name === 'string' && !['role', 'aria-level'].includes(attr.name.name);
+          }).map(function (attr) {
+            return sourceCode.getText(attr);
+          }).join(' ');
+
+          // Get the heading level
+          var headingLevel = '';
+          var ariaLevel = node.openingElement.attributes.find(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && attr.name.name === 'aria-level';
+          });
+          if (ariaLevel && (0, _eslintCodemodUtils.isNodeOfType)(ariaLevel, 'JSXAttribute')) {
+            var _ariaLevel$value, _ariaLevel$value2;
+            // If it's a string
+            if (((_ariaLevel$value = ariaLevel.value) === null || _ariaLevel$value === void 0 ? void 0 : _ariaLevel$value.type) === 'Literal' && ariaLevel.value.value) {
+              headingLevel = "h".concat(ariaLevel.value.value);
+              // If it's a number or some other literal in an expression container
+            } else if (((_ariaLevel$value2 = ariaLevel.value) === null || _ariaLevel$value2 === void 0 ? void 0 : _ariaLevel$value2.type) === 'JSXExpressionContainer' && ariaLevel.value.expression.type === 'Literal' && ariaLevel.value.expression.value) {
+              headingLevel = "h".concat(ariaLevel.value.expression.value);
+            }
+          } else if (elementName.match(/h[1-6]/)) {
+            headingLevel = elementName;
+          }
+          var fixers = [];
+
+          // Replace <a> with <Heading> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(headingName).concat(headingLevel ? " as=\"".concat(headingLevel, "\"") : '').concat(attributesText ? " ".concat(attributesText) : '', " /")));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(headingName).concat(headingLevel ? " as=\"".concat(headingLevel, "\"") : '').concat(attributesText ? " ".concat(attributesText) : '')));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], headingName));
+          }
+
+          // Add import if not present
+          if (!existingHeadingName) {
+            var importStatement = "import ".concat(headingName, " from '@atlaskit/heading';\n");
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }]
+    });
+  }
+};

package/dist/cjs/rules/no-html-heading/node-types/styled-component/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComponent = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
+var _getJsxElementByName2 = require("../../../utils/get-jsx-element-by-name");
+var _getStyledComponentCall = require("../../../utils/get-styled-component-call");
+var _supported = require("../supported");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var StyledComponent = exports.StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'MemberExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = (0, _getStyledComponentCall.getStyledComponentCall)(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !(0, _eslintCodemodUtils.isNodeOfType)(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = (0, _getJsxElementByName2.getJsxElementByName)(styles.id.name, (0, _contextCompat.getScope)(context, node))) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (!jsxElement) {
+      // If there's no JSX element, we can't determine if it's being used as an heading or not
+      return;
+    }
+    if (jsxElement && !(0, _supported.isSupportedForLint)(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlHeading',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/cjs/rules/no-html-heading/node-types/supported.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSupportedForLint = isSupportedForLint;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var supportedElements = [{
+  name: 'h1'
+}, {
+  name: 'h2'
+}, {
+  name: 'h3'
+}, {
+  name: 'h4'
+}, {
+  name: 'h5'
+}, {
+  name: 'h6'
+}, {
+  name: '*',
+  attributes: [{
+    name: 'role',
+    values: ['heading']
+  }]
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+function isSupportedForLint(jsxNode, elementName) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/cjs/rules/no-html-select/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _nodeTypes = require("./node-types");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-html-select',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlSelect: "This <{{ name }}> should be replaced with the select component from the Atlassian Design System. ADS select components have event tracking, ensure accessible implementations, and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<anchor>(...) usages
+      CallExpression: function CallExpression(node) {
+        _nodeTypes.StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <anchor css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _nodeTypes.JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-html-select/node-types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "JSXElement", {
+  enumerable: true,
+  get: function get() {
+    return _jsxElement.JSXElement;
+  }
+});
+Object.defineProperty(exports, "StyledComponent", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponent.StyledComponent;
+  }
+});
+var _styledComponent = require("./styled-component");
+var _jsxElement = require("./jsx-element");

package/dist/cjs/rules/no-html-select/node-types/jsx-element/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSXElement = void 0;
+var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
+var _supported = require("../supported");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var JSXElement = exports.JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!(0, _supported.isSupportedForLint)(node)) {
+      return;
+    }
+    var nodeName = ast.JSXElement.getName(node);
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlSelect',
+      data: {
+        name: nodeName
+      }
+    });
+  }
+};

package/dist/cjs/rules/no-html-select/node-types/styled-component/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComponent = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
+var _getJsxElementByName2 = require("../../../utils/get-jsx-element-by-name");
+var _getStyledComponentCall = require("../../../utils/get-styled-component-call");
+var _supported = require("../supported");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var StyledComponent = exports.StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'MemberExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = (0, _getStyledComponentCall.getStyledComponentCall)(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !(0, _eslintCodemodUtils.isNodeOfType)(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = (0, _getJsxElementByName2.getJsxElementByName)(styles.id.name, (0, _contextCompat.getScope)(context, node))) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (!jsxElement) {
+      // If there's no JSX element, we can't determine if it's being used as an select or not
+      return;
+    }
+    if (jsxElement && !(0, _supported.isSupportedForLint)(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlSelect',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};