refactor: replace JSX.Element return types with React.ReactNode (#6926)

JSX.Element excludes null, strings, numbers, and fragments that
components legitimately return. Fixes all 340 react-doctor
no-jsx-element-type diagnostics.

createNavigationLucideIcon's factories declared `() => JSX.Element` as a
function type, which the rule does not flag but which blocked widening
the components they return, so those widened too.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: lkostrowski

src/attributes/components/AssignedAttributesCard/AssignedAttributesBulkDeleteButton.tsx

@@ -11,7 +11,7 @@ interface AssignedAttributesBulkDeleteButtonProps {
 export const AssignedAttributesBulkDeleteButton = ({
   onClick,
   label,
-}: AssignedAttributesBulkDeleteButtonProps): JSX.Element => (
+}: AssignedAttributesBulkDeleteButtonProps): React.ReactNode => (
   <Button
     data-test-id="bulk-delete-button"
     variant="tertiary"

src/attributes/components/AssignedAttributesCard/AssignedAttributesCard.tsx

@@ -78,7 +78,7 @@ export const AssignedAttributesCard = ({
   onAttributeCreate,
   onAttributeReorder,
   onAttributeUnassign,
-}: AssignedAttributesCardProps): JSX.Element => {
+}: AssignedAttributesCardProps): React.ReactNode => {
   const intl = useIntl();
   const { items: orderedAttributes, onSortEnd } = useOptimisticListReorder(
     attributes,

src/attributes/components/AttributeAssignedTypesCard/AttributeAssignedTypesCard.test.tsx

@@ -6,7 +6,7 @@ import { MemoryRouter } from "react-router-dom";
 
 import { AttributeAssignedTypesCard } from "./AttributeAssignedTypesCard";
 
-const RouterWrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+const RouterWrapper = ({ children }: { children: ReactNode }): React.ReactNode => (
   <MemoryRouter>
     <Wrapper>{children}</Wrapper>
   </MemoryRouter>

src/attributes/components/AttributeAssignedTypesCard/AttributeAssignedTypesCard.tsx

@@ -33,7 +33,7 @@ interface UsageTypeRowProps {
   roles?: AssignedTypeRole[];
 }
 
-const UsageTypeRow = ({ name, href, roles }: UsageTypeRowProps): JSX.Element => {
+const UsageTypeRow = ({ name, href, roles }: UsageTypeRowProps): React.ReactNode => {
   const intl = useIntl();
 
   return (
@@ -71,7 +71,7 @@ interface UsageListProps {
   showRoles: boolean;
 }
 
-const UsageList = ({ types, getTypeUrl, showRoles }: UsageListProps): JSX.Element => (
+const UsageList = ({ types, getTypeUrl, showRoles }: UsageListProps): React.ReactNode => (
   <Box as="ul" className={styles.list} data-test-id="attribute-usage-list">
     {types.map(type => (
       <UsageTypeRow
@@ -97,7 +97,7 @@ interface UsageCardSkeletonProps {
   showRolePills: boolean;
 }
 
-const UsageCardSkeleton = ({ showRolePills }: UsageCardSkeletonProps): JSX.Element => (
+const UsageCardSkeleton = ({ showRolePills }: UsageCardSkeletonProps): React.ReactNode => (
   <Box as="ul" className={styles.list} data-test-id="attribute-usage-card-skeleton">
     {USAGE_SKELETON_ROW_WIDTHS.map(width => (
       <Box as="li" key={width} className={styles.listItem}>
@@ -115,7 +115,7 @@ const UsageEmptyState = ({
   hintMessage,
   linkMessage,
   href,
-}: UsageEmptyStateProps): JSX.Element => (
+}: UsageEmptyStateProps): React.ReactNode => (
   <Box display="flex" flexDirection="column" gap={2}>
     <Text size={3} color="default2">
       <FormattedMessage {...message} />
@@ -142,7 +142,7 @@ export const AttributeAssignedTypesCard = ({
   variantTypes,
   modelTypes,
   modelTypesListHasMore = false,
-}: AttributeAssignedTypesCardProps): JSX.Element => {
+}: AttributeAssignedTypesCardProps): React.ReactNode => {
   const intl = useIntl();
   const isProductAttribute = attributeType === AttributeTypeEnum.PRODUCT_TYPE;
   const productUsage = mergeProductAssignedTypeUsage(productTypes, variantTypes);

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -68,7 +68,7 @@ interface AttributeDetailsProps
   variant?: "card" | "embedded";
 }
 
-const AttributeDetails = (props: AttributeDetailsProps): JSX.Element => {
+const AttributeDetails = (props: AttributeDetailsProps): React.ReactNode => {
   const {
     canChangeType,
     errors,

src/attributes/components/AttributeListTableSkeleton/AttributeListTableSkeleton.tsx

@@ -12,7 +12,7 @@ interface AttributeListTableSkeletonRowsProps {
 export const AttributeListTableSkeletonRows = ({
   rowCount = 3,
   variantColumn,
-}: AttributeListTableSkeletonRowsProps): JSX.Element => (
+}: AttributeListTableSkeletonRowsProps): React.ReactNode => (
   <>
     {Array.from({ length: rowCount }, (_, index) => (
       <TableRow key={index} className={tableStyles.row}>

src/attributes/components/AttributeOrganization/AttributeOrganization.tsx

@@ -41,7 +41,7 @@ const ClassTile = ({
   tileRef: (node: HTMLElement | null) => void;
   onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
   onSelect: (value: AttributeTypeEnum) => void;
-}): JSX.Element => {
+}): React.ReactNode => {
   const Icon = option.icon;
 
   return (
@@ -89,7 +89,7 @@ const AttributeOrganization = ({
   data,
   disabled,
   onChange,
-}: AttributeOrganizationProps): JSX.Element => {
+}: AttributeOrganizationProps): React.ReactNode => {
   const intl = useIntl();
   const tileRefs = useRef<Partial<Record<AttributeTypeEnum, HTMLElement | null>>>({});
   const value = data.type ?? AttributeTypeEnum.PRODUCT_TYPE;

src/attributes/components/AttributePage/AttributePage.topNav.test.tsx

@@ -31,7 +31,7 @@ const staffUser: UserFragment = {
   restrictedAccessToChannels: false,
 };
 
-const Wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+const Wrapper = ({ children }: { children: ReactNode }): React.ReactNode => (
   <MemoryRouter>
     <UserContext.Provider
       value={{

src/attributes/components/AttributePage/Title.test.tsx

@@ -40,7 +40,7 @@ const mockUser: UserFragment = {
   restrictedAccessToChannels: false,
 };
 
-const Wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+const Wrapper = ({ children }: { children: ReactNode }): React.ReactNode => (
   <MemoryRouter>
     <UserContext.Provider
       value={{

src/attributes/components/AttributeProperties/AttributeProperties.stories.tsx

@@ -19,7 +19,7 @@ const AttributePropertiesPlayground = ({
   initial,
 }: {
   initial: Partial<AttributePageFormData>;
-}): JSX.Element => {
+}): React.ReactNode => {
   const [data, setData] = useState<AttributePageFormData>({
     ...getAttributePageInitialForm(),
     ...initial,