fix: ReactNodeを返していた部分をTypeScript 5.1<向けに修正 (#1480)

* Add Element type to abstract ReactNode and JSX.Element

* Fix to use Element type to return React component

* Add change log

.changeset/spotty-carpets-perform.md

@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+fix: ReactNodeを返していた部分をTypeScript 5.1<向けに修正

packages/for-ui/src/button/Button.tsx

@@ -1,15 +1,15 @@
-import { Children, ElementType, FC, forwardRef, MouseEvent, MouseEventHandler, ReactNode, useMemo } from 'react';
+import { Children, ElementType, forwardRef, MouseEvent, MouseEventHandler, ReactNode, useMemo } from 'react';
 import MuiButton, { ButtonUnstyledProps as MuiButtonProps } from '@mui/base/ButtonUnstyled';
 import { LoadingButtonProps } from '@mui/lab/LoadingButton';
 import { Loader } from '../loader';
+import { ComponentPropsWithAs, Element, Ref } from '../system/componentType';
 import { fsx } from '../system/fsx';
-import { ComponentProps, Ref } from '../system/polyComponent';
 import { walkChildren } from '../system/walkChildren';
 
 // Iterable<ReactNode> seems to contain string but cannot be excluded, so added as sum type.
 type Child = Exclude<ReactNode, Iterable<ReactNode>> | string;
 
-export type ButtonProps<As extends ElementType = 'button'> = ComponentProps<
+export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithAs<
   Omit<MuiButtonProps<As>, 'href' | 'children' | 'onClick'> & {
     /**
      * 種類を指定
@@ -123,7 +123,7 @@ const structures = ['text', 'icon', 'text-icon', 'icon-text'] as const;
 
 type Structure = (typeof structures)[number];
 
-type ButtonComponent = <As extends ElementType = 'button'>(props: ButtonProps<As>) => ReturnType<FC>;
+type ButtonComponent = <As extends ElementType = 'button'>(props: ButtonProps<As>) => Element;
 
 export const Button: ButtonComponent = forwardRef(
   <As extends ElementType = 'button'>(
@@ -142,7 +142,7 @@ export const Button: ButtonComponent = forwardRef(
       ...rest
     }: ButtonProps<As>,
     ref?: Ref<As>,
-  ): JSX.Element => {
+  ): Element => {
     const component = as || 'button';
     const childTexts = useMemo(() => Children.map(children, extractText) || [], [children]);
     const structure: Structure = useMemo(() => {

packages/for-ui/src/chip/Chip.tsx

@@ -1,9 +1,9 @@
 import { ElementType, forwardRef, MouseEvent, ReactNode } from 'react';
-import { ComponentProps, ElementTypeToHTMLElement, Ref } from '../system/polyComponent';
+import { ComponentPropsWithAs, Element, ElementTypeToHTMLElement, Ref } from '../system/componentType';
 import { FullChip } from './FullChip';
 import { LimitedChip } from './LimitedChip';
 
-export type ChipProps<As extends ElementType = 'button'> = ComponentProps<
+export type ChipProps<As extends ElementType = 'button'> = ComponentPropsWithAs<
   {
     /**
      * ユーザーに提示したい意図 (e.g. エラーならばnegative) を指定
@@ -46,7 +46,7 @@ export type ChipProps<As extends ElementType = 'button'> = ComponentProps<
   As
 >;
 
-type ChipComponent = <As extends ElementType = 'button'>(props: ChipProps<As>) => ReactNode;
+type ChipComponent = <As extends ElementType = 'button'>(props: ChipProps<As>) => Element;
 
 export const Chip: ChipComponent = forwardRef(
   <As extends ElementType = 'button'>({ clickableArea = 'full', ...props }: ChipProps<As>, ref?: Ref<As>) =>

packages/for-ui/src/chip/FullChip.tsx

@@ -1,15 +1,15 @@
-import { ElementType, forwardRef, ReactNode } from 'react';
+import { ElementType, forwardRef } from 'react';
+import { Element, Ref } from '../system/componentType';
 import { fsx } from '../system/fsx';
-import { Ref } from '../system/polyComponent';
 import { Text } from '../text';
 import { ChipProps } from './Chip';
 
 type FullChipProps<As extends ElementType = 'button'> = Omit<ChipProps<As>, 'clickableArea'>;
 
-type FullChipComponent = <As extends ElementType = 'button'>(props: FullChipProps<As>) => ReactNode;
+type FullChipComponent = <As extends ElementType = 'button'>(props: FullChipProps<As>) => Element;
 
 export const FullChip: FullChipComponent = forwardRef(
-  <As extends ElementType = 'button'>(props: FullChipProps<As>, ref: Ref<As>): JSX.Element => {
+  <As extends ElementType = 'button'>(props: FullChipProps<As>, ref: Ref<As>) => {
     const { as, label, icon, intention = 'shade', className, ...rest } = props;
     const Component: ElementType = as || 'button';
     return (

packages/for-ui/src/chip/LimitedChip.tsx

@@ -1,16 +1,16 @@
-import { ElementType, forwardRef, ReactNode } from 'react';
+import { ElementType, forwardRef } from 'react';
 import { MdClose } from 'react-icons/md';
+import { Element, Ref } from '../system/componentType';
 import { fsx } from '../system/fsx';
-import { Ref } from '../system/polyComponent';
 import { Text } from '../text';
 import { ChipProps } from './Chip';
 
 type LimitedChipProps<As extends ElementType = 'span'> = Omit<ChipProps<As>, 'clickableArea'>;
 
-type LimitedChipComponent = <As extends ElementType = 'span'>(props: LimitedChipProps<As>) => ReactNode;
+type LimitedChipComponent = <As extends ElementType = 'span'>(props: LimitedChipProps<As>) => Element;
 
 export const LimitedChip: LimitedChipComponent = forwardRef(
-  <As extends ElementType = 'span'>(props: LimitedChipProps<As>, ref: Ref<As>): JSX.Element => {
+  <As extends ElementType = 'span'>(props: LimitedChipProps<As>, ref: Ref<As>) => {
     const { as, label, icon = <MdClose />, intention = 'shade', onClick, className, ...rest } = props;
     const Component: ElementType = as || 'button';
 

packages/for-ui/src/system/polyComponent.ts → packages/for-ui/src/system/componentType.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC } from 'react';
 import { PreservedOmit } from './preservedOmit';
 
 export type Ref<As extends ElementType> = ComponentPropsWithRef<As>['ref'];
@@ -12,11 +12,13 @@ export type AsProps<As extends ElementType> = {
   as?: As;
 };
 
-export type ComponentProps<Props extends object, As extends ElementType> = AsProps<As> &
+export type ComponentPropsWithAs<Props extends object, As extends ElementType> = AsProps<As> &
   Props &
   RefProps<As> &
   PreservedOmit<ComponentPropsWithoutRef<As>, keyof (Props & AsProps<As> & RefProps<As>)>;
 
 export type ElementTypeToHTMLElement<Element extends ElementType> = Element extends keyof HTMLElementTagNameMap
   ? HTMLElementTagNameMap[Element]
   : Element;
+
+export type Element = ReturnType<FC>;

packages/for-ui/src/table/TableCell.tsx

@@ -1,10 +1,10 @@
 import { FC, forwardRef, HTMLAttributes, ReactNode } from 'react';
 import { MdArrowDownward, MdArrowUpward } from 'react-icons/md';
+import { ComponentPropsWithAs, Element, Ref } from '../system/componentType';
 import { fsx } from '../system/fsx';
-import { ComponentProps, Ref } from '../system/polyComponent';
 import { Text } from '../text';
 
-export type TableCellProps<As extends 'th' | 'td' = 'td'> = ComponentProps<
+export type TableCellProps<As extends 'th' | 'td' = 'td'> = ComponentPropsWithAs<
   {
     /**
      * @deprecated `as` propを使ってください
@@ -16,7 +16,7 @@ export type TableCellProps<As extends 'th' | 'td' = 'td'> = ComponentProps<
   As
 >;
 
-type TableCellComponent = <As extends 'th' | 'td' = 'td'>(props: TableCellProps<As>) => ReactNode;
+type TableCellComponent = <As extends 'th' | 'td' = 'td'>(props: TableCellProps<As>) => Element;
 
 export const TableCell: TableCellComponent = forwardRef(
   <As extends 'th' | 'td' = 'td'>({ component = 'td', as, className, ...rest }: TableCellProps<As>, ref?: Ref<As>) => {

packages/for-ui/src/text/Text.tsx

@@ -1,6 +1,6 @@
 import { ElementType, FC, forwardRef, ReactNode } from 'react';
+import { ComponentPropsWithAs, Ref } from '../system/componentType';
 import { fsx } from '../system/fsx';
-import { ComponentProps, Ref } from '../system/polyComponent';
 
 type WithInherit<T> = T | 'inherit';
 
@@ -34,7 +34,7 @@ const style = (size: WithInherit<Size>, weight: WithInherit<Weight>, typeface: W
   );
 };
 
-export type TextProps<As extends ElementType = 'span'> = ComponentProps<
+export type TextProps<As extends ElementType = 'span'> = ComponentPropsWithAs<
   {
     /**
      * テキストのサイズを指定