fix: Include children in public prop types (#1044)

packages/react/src/Accordion/Accordion.tsx

@@ -4,16 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import AccordionContext from './AccordionContext'
 import { AccordionSection } from './AccordionSection'
 import useFocusWithArrows from './useFocusWithArrows'

packages/react/src/Accordion/AccordionSection.tsx

@@ -5,19 +5,20 @@
 
 import { ChevronDownIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, useContext, useId, useState } from 'react'
+import { forwardRef, useContext, useId, useState } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import AccordionContext from './AccordionContext'
 import { getHeadingElement } from '../Heading/Heading'
 import { Icon } from '../Icon/Icon'
 
-export interface AccordionSectionProps extends HTMLAttributes<HTMLElement> {
+export interface AccordionSectionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
   label: string
   expanded?: boolean
 }
 
 export const AccordionSection = forwardRef(
   (
-    { label, expanded = false, children, className, ...otherProps }: PropsWithChildren<AccordionSectionProps>,
+    { label, expanded = false, children, className, ...otherProps }: AccordionSectionProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
     const { headingLevel, section } = useContext(AccordionContext)

packages/react/src/AspectRatio/AspectRatio.tsx

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide'
 

packages/react/src/Blockquote/Blockquote.tsx

@@ -4,9 +4,10 @@
  */
 
 import clsx from 'clsx'
-import { BlockquoteHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { BlockquoteHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
+export interface BlockquoteProps extends PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> {
   /**
    * De kleur van het citaat.
    * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
@@ -15,10 +16,7 @@ export interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteEleme
 }
 
 export const Blockquote = forwardRef(
-  (
-    { children, className, inverseColor, ...restProps }: PropsWithChildren<BlockquoteProps>,
-    ref: ForwardedRef<HTMLQuoteElement>,
-  ) => (
+  ({ children, className, inverseColor, ...restProps }: BlockquoteProps, ref: ForwardedRef<HTMLQuoteElement>) => (
     <blockquote
       {...restProps}
       ref={ref}

packages/react/src/Breadcrumb/Breadcrumb.tsx

@@ -1,13 +1,12 @@
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
-
-type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+
+export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 interface BreadcrumbComponent extends ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>> {
   Item: typeof BreadcrumbItem

packages/react/src/Breadcrumb/index.ts

@@ -1,2 +1,2 @@
 export { Breadcrumb } from './Breadcrumb'
-export type { BreadcrumbItemProps } from './Breadcrumb'
+export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb'

packages/react/src/Button/Button.tsx

@@ -6,9 +6,10 @@
 
 import { Button as CommunityButton } from '@utrecht/component-library-react'
 import clsx from 'clsx'
-import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
@@ -26,10 +27,7 @@ function getAppearance(variant: ButtonProps['variant']): CommunityButtonAppearan
 }
 
 export const Button = forwardRef(
-  (
-    { children, disabled, variant = 'primary', ...restProps }: PropsWithChildren<ButtonProps>,
-    ref: ForwardedRef<HTMLButtonElement>,
-  ) => {
+  ({ children, disabled, variant = 'primary', ...restProps }: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
     return (
       <CommunityButton
         {...restProps}

packages/react/src/Card/Card.tsx

@@ -4,10 +4,10 @@
  */
 
 import clsx from 'clsx'
-import {
+import { forwardRef } from 'react'
+import type {
   AnchorHTMLAttributes,
   ForwardedRef,
-  forwardRef,
   ForwardRefExoticComponent,
   HTMLAttributes,
   PropsWithChildren,

packages/react/src/Checkbox/Checkbox.tsx

@@ -4,25 +4,17 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  InputHTMLAttributes,
-  PropsWithChildren,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react'
+import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
 
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxProps extends PropsWithChildren<InputHTMLAttributes<HTMLInputElement>> {
   invalid?: boolean
   indeterminate?: boolean
 }
 
 export const Checkbox = forwardRef(
   (
-    { children, className, invalid, indeterminate, ...restProps }: PropsWithChildren<CheckboxProps>,
+    { children, className, invalid, indeterminate, ...restProps }: CheckboxProps,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const id = useId()

packages/react/src/Dialog/Dialog.tsx

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { DialogHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import type { DialogHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
 import { IconButton } from '../IconButton'
 
 export interface DialogProps extends PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> {

packages/react/src/Footer/Footer.tsx

@@ -4,14 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { Spotlight } from '../Spotlight/Spotlight'
 
 export const FooterTop = forwardRef(

packages/react/src/FormLabel/FormLabel.tsx

@@ -5,7 +5,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, LabelHTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, LabelHTMLAttributes, PropsWithChildren } from 'react'
 
 export const FormLabel = forwardRef(
   (

packages/react/src/Grid/Grid.tsx

@@ -4,14 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { GridCell } from './GridCell'
 
 export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

packages/react/src/Grid/GridCell.tsx

@@ -3,7 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import clsx from 'clsx'
-import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { GridColumnNumber, GridColumnNumbers } from './Grid'
 import { gridCellClasses } from './gridCellClasses'
 

packages/react/src/Header/Header.tsx

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
 import { Heading } from '../Heading'
 import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'

packages/react/src/Heading/Heading.tsx

@@ -5,12 +5,13 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type HeadingLevel = 1 | 2 | 3 | 4
 type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6'
 
-export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+export interface HeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> {
   /**
    * Het hiërarchische niveau van de titel.
    */
@@ -42,7 +43,7 @@ export function getHeadingElement(level: HeadingLevel) {
 
 export const Heading = forwardRef(
   (
-    { children, className, inverseColor, level = 1, size, ...restProps }: PropsWithChildren<HeadingProps>,
+    { children, className, inverseColor, level = 1, size, ...restProps }: HeadingProps,
     ref: ForwardedRef<HTMLHeadingElement>,
   ) => {
     const HeadingX = getHeadingElement(level)

packages/react/src/Icon/Icon.tsx

@@ -6,7 +6,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
 
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'

packages/react/src/IconButton/IconButton.tsx

@@ -5,7 +5,8 @@
 
 import { CloseIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { ButtonHTMLAttributes, ForwardedRef, forwardRef } from 'react'
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 

packages/react/src/Image/Image.tsx

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { type ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ImgHTMLAttributes } from 'react'
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   cover?: Boolean

packages/react/src/Image/index.ts

@@ -1 +1,2 @@
-export { Image, type ImageProps } from './Image'
+export { Image } from './Image'
+export type { ImageProps } from './Image'

packages/react/src/Link/Link.tsx

@@ -5,7 +5,8 @@
 
 import { ChevronRightIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { AnchorHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 import { Icon } from '../Icon/Icon'
 
 type LinkOnBackground = 'default' | 'light' | 'dark'
@@ -26,11 +27,11 @@ type ConditionalProps =
       icon?: Function
     }
 
-export type LinkProps = CommonProps & ConditionalProps
+export type LinkProps = PropsWithChildren<CommonProps & ConditionalProps>
 
 export const Link = forwardRef(
   (
-    { children, variant = 'standalone', icon, onBackground, className, ...otherProps }: PropsWithChildren<LinkProps>,
+    { children, variant = 'standalone', icon, onBackground, className, ...otherProps }: LinkProps,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => (
     <a

packages/react/src/Logo/Logo.tsx

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react'
 import {
   LogoAmsterdam,
   LogoGgdAmsterdam,

packages/react/src/Logo/brand/LogoAmsterdam.tsx

@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg

packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx

@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoGgdAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg

packages/react/src/Logo/brand/LogoStadsarchief.tsx

@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoStadsarchief = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg

packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx

@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoStadsbankVanLening = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg

packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx

@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoVgaVerzekeringen = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg

packages/react/src/Mark/Mark.tsx

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export interface MarkProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}