diff --git a/.changeset/spotty-carpets-perform.md b/.changeset/spotty-carpets-perform.md new file mode 100644 index 00000000..556bb692 --- /dev/null +++ b/.changeset/spotty-carpets-perform.md @@ -0,0 +1,5 @@ +--- +"@4design/for-ui": patch +--- + +fix: ReactNodeを返していた部分をTypeScript 5.1<向けに修正 diff --git a/packages/for-ui/src/button/Button.tsx b/packages/for-ui/src/button/Button.tsx index 9db901df..bd1f965e 100644 --- a/packages/for-ui/src/button/Button.tsx +++ b/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 seems to contain string but cannot be excluded, so added as sum type. type Child = Exclude> | string; -export type ButtonProps = ComponentProps< +export type ButtonProps = ComponentPropsWithAs< Omit, 'href' | 'children' | 'onClick'> & { /** * 種類を指定 @@ -123,7 +123,7 @@ const structures = ['text', 'icon', 'text-icon', 'icon-text'] as const; type Structure = (typeof structures)[number]; -type ButtonComponent = (props: ButtonProps) => ReturnType; +type ButtonComponent = (props: ButtonProps) => Element; export const Button: ButtonComponent = forwardRef( ( @@ -142,7 +142,7 @@ export const Button: ButtonComponent = forwardRef( ...rest }: ButtonProps, ref?: Ref, - ): JSX.Element => { + ): Element => { const component = as || 'button'; const childTexts = useMemo(() => Children.map(children, extractText) || [], [children]); const structure: Structure = useMemo(() => { diff --git a/packages/for-ui/src/chip/Chip.tsx b/packages/for-ui/src/chip/Chip.tsx index cbfb5ac7..4f80065b 100644 --- a/packages/for-ui/src/chip/Chip.tsx +++ b/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 = ComponentProps< +export type ChipProps = ComponentPropsWithAs< { /** * ユーザーに提示したい意図 (e.g. エラーならばnegative) を指定 @@ -46,7 +46,7 @@ export type ChipProps = ComponentProps< As >; -type ChipComponent = (props: ChipProps) => ReactNode; +type ChipComponent = (props: ChipProps) => Element; export const Chip: ChipComponent = forwardRef( ({ clickableArea = 'full', ...props }: ChipProps, ref?: Ref) => diff --git a/packages/for-ui/src/chip/FullChip.tsx b/packages/for-ui/src/chip/FullChip.tsx index e84e2bc2..0fea7c63 100644 --- a/packages/for-ui/src/chip/FullChip.tsx +++ b/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 = Omit, 'clickableArea'>; -type FullChipComponent = (props: FullChipProps) => ReactNode; +type FullChipComponent = (props: FullChipProps) => Element; export const FullChip: FullChipComponent = forwardRef( - (props: FullChipProps, ref: Ref): JSX.Element => { + (props: FullChipProps, ref: Ref) => { const { as, label, icon, intention = 'shade', className, ...rest } = props; const Component: ElementType = as || 'button'; return ( diff --git a/packages/for-ui/src/chip/LimitedChip.tsx b/packages/for-ui/src/chip/LimitedChip.tsx index a3bf3f75..a90fc8b9 100644 --- a/packages/for-ui/src/chip/LimitedChip.tsx +++ b/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 = Omit, 'clickableArea'>; -type LimitedChipComponent = (props: LimitedChipProps) => ReactNode; +type LimitedChipComponent = (props: LimitedChipProps) => Element; export const LimitedChip: LimitedChipComponent = forwardRef( - (props: LimitedChipProps, ref: Ref): JSX.Element => { + (props: LimitedChipProps, ref: Ref) => { const { as, label, icon = , intention = 'shade', onClick, className, ...rest } = props; const Component: ElementType = as || 'button'; diff --git a/packages/for-ui/src/system/polyComponent.ts b/packages/for-ui/src/system/componentType.ts similarity index 81% rename from packages/for-ui/src/system/polyComponent.ts rename to packages/for-ui/src/system/componentType.ts index 40f883dc..906c7dda 100644 --- a/packages/for-ui/src/system/polyComponent.ts +++ b/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 = ComponentPropsWithRef['ref']; @@ -12,7 +12,7 @@ export type AsProps = { as?: As; }; -export type ComponentProps = AsProps & +export type ComponentPropsWithAs = AsProps & Props & RefProps & PreservedOmit, keyof (Props & AsProps & RefProps)>; @@ -20,3 +20,5 @@ export type ComponentProps = AsPro export type ElementTypeToHTMLElement = Element extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Element] : Element; + +export type Element = ReturnType; diff --git a/packages/for-ui/src/table/TableCell.tsx b/packages/for-ui/src/table/TableCell.tsx index c386c223..f00e08a3 100644 --- a/packages/for-ui/src/table/TableCell.tsx +++ b/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 = ComponentProps< +export type TableCellProps = ComponentPropsWithAs< { /** * @deprecated `as` propを使ってください @@ -16,7 +16,7 @@ export type TableCellProps = ComponentProps< As >; -type TableCellComponent = (props: TableCellProps) => ReactNode; +type TableCellComponent = (props: TableCellProps) => Element; export const TableCell: TableCellComponent = forwardRef( ({ component = 'td', as, className, ...rest }: TableCellProps, ref?: Ref) => { diff --git a/packages/for-ui/src/text/Text.tsx b/packages/for-ui/src/text/Text.tsx index 94f75d76..defb8a51 100644 --- a/packages/for-ui/src/text/Text.tsx +++ b/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 | 'inherit'; @@ -34,7 +34,7 @@ const style = (size: WithInherit, weight: WithInherit, typeface: W ); }; -export type TextProps = ComponentProps< +export type TextProps = ComponentPropsWithAs< { /** * テキストのサイズを指定