fix: Chart component children type (#2071)

nickofthyme · web-flow · commit 525c782829a3 · 2023-06-20T09:01:16.000-07:00
`react@18` no longer has implicit `children` for the `Component` props.
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -480,7 +480,6 @@ export interface Cell {
     yIndex: number;
 }
 
-// Warning: (ae-forgotten-export) The symbol "ChartProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "ChartState" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -493,7 +492,7 @@ export class Chart extends React_2.Component<ChartProps, ChartState> {
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
-    static defaultProps: ChartProps;
+    static defaultProps: Pick<ChartProps, OptionalKeys<ChartProps>>;
     // (undocumented)
     dispatchExternalPointerEvent(event: PointerEvent_2): void;
     // (undocumented)
@@ -509,6 +508,23 @@ export class Chart extends React_2.Component<ChartProps, ChartState> {
     render(): JSX.Element;
 }
 
+// @public (undocumented)
+export interface ChartProps {
+    // (undocumented)
+    children?: ReactNode;
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    description?: string;
+    // (undocumented)
+    id?: string;
+    renderer?: 'svg' | 'canvas';
+    // (undocumented)
+    size?: ChartSize;
+    // (undocumented)
+    title?: string;
+}
+
 // @public (undocumented)
 export type ChartSize = number | string | ChartSizeArray | ChartSizeObject;
 
diff --git a/packages/charts/src/chart_types/specs.ts b/packages/charts/src/chart_types/specs.ts
@@ -27,6 +27,10 @@ export {
 
 export * from './xy_chart/utils/specs';
 
+export * from './wordcloud/specs';
+
+export * from './goal_chart/specs';
+
 export { Partition } from './partition_chart/specs';
 
 export { Heatmap, HeatmapSpec, RasterTimeScale, TimeScale, LinearScale, OrdinalScale } from './heatmap/specs';
diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx
@@ -7,9 +7,10 @@
  */
 
 import classNames from 'classnames';
-import React, { CSSProperties, createRef } from 'react';
+import React, { CSSProperties, ReactNode, createRef } from 'react';
 import { Provider } from 'react-redux';
 import { createStore, Store, Unsubscribe, StoreEnhancer, applyMiddleware, Middleware } from 'redux';
+import { OptionalKeys } from 'utility-types';
 import { v4 as uuidv4 } from 'uuid';
 
 import { ChartBackground } from './chart_background';
@@ -33,7 +34,8 @@ import { ChartSize, getChartSize } from '../utils/chart_size';
 import { LayoutDirection } from '../utils/common';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 
-interface ChartProps {
+/** @public */
+export interface ChartProps {
   /**
    * The type of rendered
    * @defaultValue `canvas`
@@ -44,6 +46,7 @@ interface ChartProps {
   id?: string;
   title?: string;
   description?: string;
+  children?: ReactNode;
 }
 
 interface ChartState {
@@ -70,7 +73,7 @@ const getMiddlware = (id: string): StoreEnhancer => {
 
 /** @public */
 export class Chart extends React.Component<ChartProps, ChartState> {
-  static defaultProps: ChartProps = {
+  static defaultProps: Pick<ChartProps, OptionalKeys<ChartProps>> = {
     renderer: 'canvas',
   };
 
diff --git a/packages/charts/src/components/index.ts b/packages/charts/src/components/index.ts
@@ -6,5 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { Chart } from './chart';
+export * from './chart';
 export { Placement, TooltipPortalSettings } from './portal';
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
@@ -48,8 +48,6 @@ export { CategoryKey, CategoryLabel } from './common/category';
 export { Layer as PartitionLayer, PartitionProps } from './chart_types/partition_chart/specs/index';
 export { FillLabelConfig as PartitionFillLabel, PartitionStyle } from './utils/themes/partition';
 export { PartitionLayout } from './chart_types/partition_chart/layout/types/config_types';
-export * from './chart_types/goal_chart/specs/index';
-export * from './chart_types/wordcloud/specs/index';
 
 export {
   Accessor,
diff --git a/storybook/stories/annotations/rects/4_styling.story.tsx b/storybook/stories/annotations/rects/4_styling.story.tsx
@@ -8,13 +8,14 @@
 
 import { action } from '@storybook/addon-actions';
 import { array, boolean, color, number } from '@storybook/addon-knobs';
-import React, { memo, useEffect, useMemo, useState, ComponentProps } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 
 import {
   AnnotationAnimationConfig,
   AnnotationDomainType,
   Axis,
   Chart,
+  ChartProps,
   LineAnnotation,
   LineAnnotationDatum,
   RectAnnotation,
@@ -33,11 +34,8 @@ import { customKnobs } from '../../utils/knobs';
 
 const rng = getRandomNumberGenerator();
 const randomArray = new Array(100).fill(0).map(() => rng(0, 10, 2));
-const ExampleChart = memo(
-  ({
-    animationOptions,
-    ...chartProps
-  }: { animationOptions: AnnotationAnimationConfig['options'] } & ComponentProps<typeof Chart>) => {
+const ExampleChart = memo<{ animationOptions: AnnotationAnimationConfig['options'] } & ChartProps>(
+  ({ animationOptions, ...chartProps }) => {
     const debug = boolean('debug', false);
     const [SeriesType] = customKnobs.enum.xySeries(undefined, 'line');
     const xScaleType = customKnobs.enum.scaleType('Scale type', ScaleType.Linear, { include: ['Linear', 'Ordinal'] });
