@atlaskit/eslint-plugin-design-system 13.27.1 → 13.29.0

package/dist/es2019/rules/use-character-counter-field/index.js

@@ -0,0 +1,131 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+const TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+const TEXTAREA_PACKAGE = '@atlaskit/textarea';
+const FORM_PACKAGE = '@atlaskit/form';
+export const message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)';
+export const ruleName = __dirname.split('/').slice(-1)[0];
+
+/**
+ * Check if a node is inside a Form component or Field component
+ */
+function isInsideFormOrField(node, formComponentNames) {
+  let current = node;
+
+  // Traverse up the AST to find parent JSX elements
+  while (current) {
+    const parent = current.parent;
+    if (!parent) {
+      break;
+    }
+
+    // Check if parent is a JSXElement with a name we're tracking
+    if (isNodeOfType(parent, 'JSXElement') && isNodeOfType(parent.openingElement.name, 'JSXIdentifier')) {
+      const parentName = parent.openingElement.name.name;
+
+      // Check if this is a Form component or Field component
+      if (formComponentNames.has(parentName)) {
+        return true;
+      }
+    }
+
+    // Check if parent is inside a JSXExpressionContainer (render prop pattern)
+    // This handles: <Field>{({ fieldProps }) => <Textfield {...fieldProps} />}</Field>
+    if (isNodeOfType(parent, 'JSXExpressionContainer')) {
+      // Continue traversing up to find the Field/Form
+      current = parent;
+      continue;
+    }
+
+    // Check if parent is an arrow function (render prop)
+    if (isNodeOfType(parent, 'ArrowFunctionExpression')) {
+      current = parent;
+      continue;
+    }
+    current = parent;
+  }
+  return false;
+}
+const rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    docs: {
+      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCharacterCounterField: message
+    }
+  },
+  create(context) {
+    // Track imported component names
+    const importedComponents = new Map();
+    const formComponentNames = new Set();
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+
+        // Track Form package imports (Form, Field, etc.)
+        if (source === FORM_PACKAGE) {
+          node.specifiers.forEach(spec => {
+            if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
+              // Default import: import Form from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            } else if (isNodeOfType(spec, 'ImportSpecifier')) {
+              // Named import: import { Form, Field } from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            }
+          });
+          return;
+        }
+
+        // Track Textfield and Textarea imports
+        if (source === TEXTFIELD_PACKAGE || source === TEXTAREA_PACKAGE) {
+          const defaultImport = node.specifiers.find(spec => isNodeOfType(spec, 'ImportDefaultSpecifier'));
+          if (defaultImport && isNodeOfType(defaultImport, 'ImportDefaultSpecifier')) {
+            const localName = defaultImport.local.name;
+            importedComponents.set(localName, {
+              localName,
+              package: source
+            });
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const elementName = node.openingElement.name.name;
+
+        // Check if this element is one of our tracked components
+        const componentInfo = importedComponents.get(elementName);
+        if (!componentInfo) {
+          return;
+        }
+
+        // Check if the component has maxLength or minLength props
+        const hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
+        const hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
+        if (hasMaxLength || hasMinLength) {
+          // Only warn if inside a Form or Field component
+          if (isInsideFormOrField(node, formComponentNames)) {
+            context.report({
+              node,
+              messageId: 'useCharacterCounterField'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-field-message-wrapper/index.js

@@ -0,0 +1,115 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const FORM_PACKAGE = '@atlaskit/form';
+const MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-field-message-wrapper',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage use of message wrapper component when using form message components.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useMessageWrapper: `All ADS form messaging components within a field should be wrapped by the \`MessageWrapper\` component from the form package. Consider also using the [simplified field implementation](https://atlassian.design/components/form/examples#simple-implementation-1) to handle styling and accessible messaging directly.`
+    }
+  },
+  create(context) {
+    let fieldImport;
+    let messageWrapperImport;
+    let messageImports = [];
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+
+        // Ignore anomalies
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+
+        // If it's not from our package, ignore.
+        if (source !== FORM_PACKAGE) {
+          return;
+        }
+        const namedImportSpecifiers = node.specifiers.filter(spec => isNodeOfType(spec, 'ImportSpecifier'));
+        namedImportSpecifiers.forEach(spec => {
+          if (spec.type === 'ImportSpecifier' && 'name' in spec.imported) {
+            const name = spec.imported.name;
+            const local = spec.local;
+            if (MESSAGE_COMPONENTS.includes(name)) {
+              messageImports.push(local);
+            } else if (name === 'Field') {
+              fieldImport = local;
+            } else if (name === 'MessageWrapper') {
+              messageWrapperImport = local;
+            }
+          }
+        });
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+
+        // if it's not a message component, skip
+        if (messageImports.length === 0 || !messageImports.find(imp => imp.name === name)) {
+          return;
+        }
+
+        // if no field import exists, skip. It needs to be within our field
+        if (!fieldImport) {
+          return;
+        }
+
+        // If no message wrapper import exists, then it's definitely an error
+        if (!messageWrapperImport) {
+          return context.report({
+            node: node,
+            messageId: 'useMessageWrapper'
+          });
+        }
+
+        // check for if field and message wrapper are parents
+        let _node = node;
+        let hasParentField = false;
+        let hasParentMessageWrapper = false;
+        while (isNodeOfType(_node, 'JSXElement') && isNodeOfType(_node.openingElement.name, 'JSXIdentifier') && !hasParentField) {
+          const name = _node.openingElement.name.name;
+          hasParentField = hasParentField || name === fieldImport.name;
+          hasParentMessageWrapper = hasParentMessageWrapper || name === messageWrapperImport.name;
+          _node = _node.parent;
+          // Skip up until a JSXElement is reached
+          if (isNodeOfType(_node, 'JSXFragment') || isNodeOfType(_node, 'ArrowFunctionExpression') || isNodeOfType(_node, 'JSXExpressionContainer')) {
+            while (_node && !isNodeOfType(_node, 'JSXElement') && !isNodeOfType(_node, 'Program')) {
+              _node = _node.parent;
+            }
+          }
+        }
+
+        // if not field, skip because this doesn't matter
+        if (!hasParentField) {
+          return;
+        }
+
+        // if it has a message wrapper, skip
+        if (hasParentMessageWrapper) {
+          return;
+        }
+        context.report({
+          node: node,
+          messageId: 'useMessageWrapper'
+        });
+      }
+    };
+  }
+});
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -56,10 +56,12 @@ var rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -55,10 +55,12 @@ var rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -39,10 +39,12 @@ var rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,10 +38,12 @@ var rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -53,10 +53,12 @@ import noUnusedCssMap from './no-unused-css-map';
 import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+import useCharacterCounterField from './use-character-counter-field';
 import useCorrectField from './use-correct-field';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
 import useDrawerLabel from './use-drawer-label';
+import useFieldMessageWrapper from './use-field-message-wrapper';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -125,10 +127,12 @@ export var rules = {
   'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-character-counter-field': useCharacterCounterField,
   'use-correct-field': useCorrectField,
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,
+  'use-field-message-wrapper': useFieldMessageWrapper,
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/esm/rules/use-character-counter-field/index.js

@@ -0,0 +1,133 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+var TEXTAREA_PACKAGE = '@atlaskit/textarea';
+var FORM_PACKAGE = '@atlaskit/form';
+export var message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)';
+export var ruleName = __dirname.split('/').slice(-1)[0];
+
+/**
+ * Check if a node is inside a Form component or Field component
+ */
+function isInsideFormOrField(node, formComponentNames) {
+  var current = node;
+
+  // Traverse up the AST to find parent JSX elements
+  while (current) {
+    var parent = current.parent;
+    if (!parent) {
+      break;
+    }
+
+    // Check if parent is a JSXElement with a name we're tracking
+    if (isNodeOfType(parent, 'JSXElement') && isNodeOfType(parent.openingElement.name, 'JSXIdentifier')) {
+      var parentName = parent.openingElement.name.name;
+
+      // Check if this is a Form component or Field component
+      if (formComponentNames.has(parentName)) {
+        return true;
+      }
+    }
+
+    // Check if parent is inside a JSXExpressionContainer (render prop pattern)
+    // This handles: <Field>{({ fieldProps }) => <Textfield {...fieldProps} />}</Field>
+    if (isNodeOfType(parent, 'JSXExpressionContainer')) {
+      // Continue traversing up to find the Field/Form
+      current = parent;
+      continue;
+    }
+
+    // Check if parent is an arrow function (render prop)
+    if (isNodeOfType(parent, 'ArrowFunctionExpression')) {
+      current = parent;
+      continue;
+    }
+    current = parent;
+  }
+  return false;
+}
+var rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    docs: {
+      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCharacterCounterField: message
+    }
+  },
+  create: function create(context) {
+    // Track imported component names
+    var importedComponents = new Map();
+    var formComponentNames = new Set();
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+
+        // Track Form package imports (Form, Field, etc.)
+        if (source === FORM_PACKAGE) {
+          node.specifiers.forEach(function (spec) {
+            if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
+              // Default import: import Form from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            } else if (isNodeOfType(spec, 'ImportSpecifier')) {
+              // Named import: import { Form, Field } from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            }
+          });
+          return;
+        }
+
+        // Track Textfield and Textarea imports
+        if (source === TEXTFIELD_PACKAGE || source === TEXTAREA_PACKAGE) {
+          var defaultImport = node.specifiers.find(function (spec) {
+            return isNodeOfType(spec, 'ImportDefaultSpecifier');
+          });
+          if (defaultImport && isNodeOfType(defaultImport, 'ImportDefaultSpecifier')) {
+            var localName = defaultImport.local.name;
+            importedComponents.set(localName, {
+              localName: localName,
+              package: source
+            });
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var elementName = node.openingElement.name.name;
+
+        // Check if this element is one of our tracked components
+        var componentInfo = importedComponents.get(elementName);
+        if (!componentInfo) {
+          return;
+        }
+
+        // Check if the component has maxLength or minLength props
+        var hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
+        var hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
+        if (hasMaxLength || hasMinLength) {
+          // Only warn if inside a Form or Field component
+          if (isInsideFormOrField(node, formComponentNames)) {
+            context.report({
+              node: node,
+              messageId: 'useCharacterCounterField'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-field-message-wrapper/index.js

@@ -0,0 +1,119 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var FORM_PACKAGE = '@atlaskit/form';
+var MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-field-message-wrapper',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage use of message wrapper component when using form message components.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useMessageWrapper: "All ADS form messaging components within a field should be wrapped by the `MessageWrapper` component from the form package. Consider also using the [simplified field implementation](https://atlassian.design/components/form/examples#simple-implementation-1) to handle styling and accessible messaging directly."
+    }
+  },
+  create: function create(context) {
+    var fieldImport;
+    var messageWrapperImport;
+    var messageImports = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+
+        // Ignore anomalies
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+
+        // If it's not from our package, ignore.
+        if (source !== FORM_PACKAGE) {
+          return;
+        }
+        var namedImportSpecifiers = node.specifiers.filter(function (spec) {
+          return isNodeOfType(spec, 'ImportSpecifier');
+        });
+        namedImportSpecifiers.forEach(function (spec) {
+          if (spec.type === 'ImportSpecifier' && 'name' in spec.imported) {
+            var name = spec.imported.name;
+            var local = spec.local;
+            if (MESSAGE_COMPONENTS.includes(name)) {
+              messageImports.push(local);
+            } else if (name === 'Field') {
+              fieldImport = local;
+            } else if (name === 'MessageWrapper') {
+              messageWrapperImport = local;
+            }
+          }
+        });
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+
+        // if it's not a message component, skip
+        if (messageImports.length === 0 || !messageImports.find(function (imp) {
+          return imp.name === name;
+        })) {
+          return;
+        }
+
+        // if no field import exists, skip. It needs to be within our field
+        if (!fieldImport) {
+          return;
+        }
+
+        // If no message wrapper import exists, then it's definitely an error
+        if (!messageWrapperImport) {
+          return context.report({
+            node: node,
+            messageId: 'useMessageWrapper'
+          });
+        }
+
+        // check for if field and message wrapper are parents
+        var _node = node;
+        var hasParentField = false;
+        var hasParentMessageWrapper = false;
+        while (isNodeOfType(_node, 'JSXElement') && isNodeOfType(_node.openingElement.name, 'JSXIdentifier') && !hasParentField) {
+          var _name = _node.openingElement.name.name;
+          hasParentField = hasParentField || _name === fieldImport.name;
+          hasParentMessageWrapper = hasParentMessageWrapper || _name === messageWrapperImport.name;
+          _node = _node.parent;
+          // Skip up until a JSXElement is reached
+          if (isNodeOfType(_node, 'JSXFragment') || isNodeOfType(_node, 'ArrowFunctionExpression') || isNodeOfType(_node, 'JSXExpressionContainer')) {
+            while (_node && !isNodeOfType(_node, 'JSXElement') && !isNodeOfType(_node, 'Program')) {
+              _node = _node.parent;
+            }
+          }
+        }
+
+        // if not field, skip because this doesn't matter
+        if (!hasParentField) {
+          return;
+        }
+
+        // if it has a message wrapper, skip
+        if (hasParentMessageWrapper) {
+          return;
+        }
+        context.report({
+          node: node,
+          messageId: 'useMessageWrapper'
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/types/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/presets/recommended-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/rules/index.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types/rules/use-character-counter-field/index.d.ts

@@ -0,0 +1,5 @@
+import type { Rule } from 'eslint';
+export declare const message = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)";
+export declare const ruleName: string;
+declare const rule: Rule.RuleModule;
+export default rule;