[victory] Add 'VictoryClipContainer' and 'Flyout' types and fixing theme types (#40717)

* [victory] Add missing types and fixing theme types

* [victory] Pull request adjustments
reusing types, using more specific types and fixing JSDoc typo

types/victory/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Victory 33.0
+// Type definitions for Victory 33.1
 // Project: https://github.com/FormidableLabs/victory, https://formidable.com/open-source/victory
 // Definitions by: Alexey Svetliakov <https://github.com/asvetliakov>
 //                 snerks <https://github.com/snerks>
@@ -327,6 +327,107 @@ declare module 'victory' {
         y: number;
     };
 
+    export interface VictoryClipContainerProps {
+        /**
+         * `VictoryClipContainer` renders a single child, or an array of children in group element.
+         */
+        children?: React.ReactElement | React.ReactElement[];
+        /**
+         * The `circleComponent` specifies the element to use when a `VictoryClipContainer` renders
+         * a circular clip path. By default, `VictoryClipContainer` uses the `Circle` component.
+         * @default circleComponent={<Circle/>}
+         */
+        circleComponent?: React.ReactElement;
+        /**
+         * The `className` prop specifies a class name that will be applied to the rendered element.
+         * @example: className="myClipPath"
+         */
+        className?: string;
+        /**
+         * The `clipHeight` prop determines the base height of the rectangular clip path. This prop should be
+         * given as a number. If this prop is not given, it will be calculated based on the height and padding
+         * of the parent chart.
+         */
+        clipHeight?: number;
+        /**
+         * The `clipId` prop may be used to set a deterministic id for the container.
+         * When a `clipId` is not manually set, a unique id will be generated.
+         * It is usually necessary to set deterministic ids for automated testing.
+         */
+        clipId?: number | string;
+        /**
+         * The `clipPadding` prop is used when the clipped area should be larger than the range of a chart.
+         * This prop should be given as an object with `top`, `bottom`, `left`, and `right` properties. Set
+         * the `clipPadding` prop is useful for extending the visible area of a chart in some dimension so
+         * that data or labels are not cut off.
+         */
+        clipPadding?: BlockProps;
+        /**
+         * The `clipPathComponent` prop specifies the clip path to apply to the rendered group when appropriate.
+         * By default, `VictoryClipContainer` uses the `ClipPath` component.
+         * @default clipPathComponent={<ClipPath/>}
+         */
+        clipPathComponent?: React.ReactElement;
+        /**
+         * The `clipWidth` prop determines the base width of the rectangular clip path. This prop should be
+         * given as a number. If this prop is not given, it will be calculated based on the width and padding
+         * of the parent chart.
+         */
+        clipWidth?: number;
+        /**
+         * The `events` prop attaches arbitrary event handlers to the group element.
+         * This prop should be given as an object of event names and corresponding event handlers.
+         * When events are provided via Victory's event system, event handlers will be called with
+         * the event, the props of the component it is attached to, and an `eventKey` when applicable.
+         * @example events={{onClick: (evt) => alert("x: " + evt.clientX)}}
+         */
+        events?: React.DOMAttributes<any>;
+        /**
+         * `VictoryClipContainer` uses the standard `groupComponent` prop.
+         * @default groupComponent={<g/>}
+         */
+        groupComponent?: React.ReactElement;
+        /**
+         * Victory components will pass an `origin` prop is to define the center point in svg coordinates for polar charts.
+         * **This prop should not be set manually.**
+         */
+        origin?: {
+            x?: number;
+            y?: number;
+        };
+        /**
+         * Victory components can pass a boolean `polar` prop to specify whether a label is part of a polar chart.
+         * **This prop should not be set manually.**
+         */
+        polar?: boolean;
+        /**
+         * The `radius` prop determines the radius of the circular clip path used for polar charts. This prop should be
+         * given as a number. If this prop is not given, it will be calculated based on the dimensions and padding
+         * of the parent chart.
+         */
+        radius?: number;
+        /**
+         * The `rectComponent` specifies the element to use when a `VictoryClipContainer` renders a rectangular clip path.
+         * By default, `VictoryClipContainer` uses the `Rect` component.
+         * @default rectComponent={<Rect/>}
+         */
+        rectComponent?: React.ReactElement;
+        /**
+         * The `translateX` prop determines the offset of the clip path from the base x coordinate. This prop
+         * should be given as a number. If this prop is not given, it will be calculated based on the padding
+         * of the parent chart.
+         */
+        translateX?: number;
+        /**
+         * The `translateY` prop determines the offset of the clip path from the base y coordinate. This prop
+         * should be given as a number. If this prop is not given, it will be calculated based on the padding
+         * of the parent chart.
+         */
+        translateY?: number;
+    }
+
+    export class VictoryClipContainer extends React.Component<VictoryClipContainerProps, any> {}
+
     export interface VictoryCursorContainerProps extends VictoryContainerProps {
         /**
          * The cursorComponent prop takes a component instance which will be used to render a cursor element.
@@ -639,8 +740,8 @@ declare module 'victory' {
     export interface VictoryThemeDefinition {
         area?: {
             style?: {
-                data?: VictoryStyleInterface;
-                labels?: VictoryStyleInterface;
+                data?: React.CSSProperties;
+                labels?: React.CSSProperties;
             };
         } & ThemeBaseProps;
         axis?: {
@@ -697,7 +798,9 @@ declare module 'victory' {
             orientation?: 'vertical' | 'horizontal';
             titleOrientation?: OrientationTypes;
             style?: {
-                data?: React.CSSProperties;
+                data?: React.CSSProperties & {
+                    type?: ScatterSymbolType;
+                };
                 labels?: React.CSSProperties;
                 title?: React.CSSProperties;
             };
@@ -883,6 +986,115 @@ declare module 'victory' {
         y?: number;
     }
 
+    export interface FlyoutProps extends VictoryCommonProps {
+        /**
+         * a flag signifying whether the component is active
+         */
+        active?: boolean;
+        /**
+         * the center coordinates of the flyout
+         */
+        center?: {
+          x?: number;
+          y?: number;
+        };
+        /**
+         * the class name that will be applied to the rendered element
+         */
+        className?: string;
+        /**
+         * the corner radius of the flyout
+         */
+        cornerRadius?: number;
+        /**
+         * the entire dataset if applicable
+         */
+        data?: any[];
+        /**
+         * the data point corresponding to this flyout if applicable
+         */
+        datum?: object;
+        /**
+         * offset in the x dimension.
+         */
+        dx?: number;
+        /**
+         * offset in the y dimension.
+         */
+        dy?: number;
+        /**
+         * events to attach to the rendered element
+         */
+        events?: object;
+        /**
+         * the height of the flyout
+         */
+        height?: number;
+        /**
+         * an id to apply to the rendered component
+         */
+        id?: string | number;
+        /**
+         * the index of this flyout within the dataset
+         */
+        index?: number;
+        orientation?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+         * the svg coordinates of the center point of a polar chart
+         */
+        origin?: object;
+        /**
+         * the rendered path element
+         * @default pathComponent={<Path/>}
+         */
+        pathComponent?: React.ReactElement;
+        /**
+         * the length of the triangular pointer
+         */
+        pointerLength?: number;
+        /**
+         * the width of the base of the triangular pointer
+         */
+        pointerWidth?: number;
+        /**
+         * a flag specifying whether the component is part of a polar chart
+         */
+        polar?: boolean;
+        /**
+         * the aria role to assign to the element
+         */
+        role?: string;
+        /**
+         * the shape rendering attribute to apply to the rendered elements
+         */
+        shapeRendering?: string;
+        /**
+         * the styles to apply to the rendered element
+         */
+        style?: VictoryStyleObject;
+        /**
+         * a transform that will be supplied to elements this component renders
+         */
+        transform?: string;
+        /**
+         * the width of the flyout
+         */
+        width?: number;
+        /**
+         * the x coordinate of data point associated with this flyout
+         */
+        x?: number;
+        /**
+         * the y coordinate of data point associated with this flyout
+         */
+        y?: number;
+    }
+
+    /**
+     * `VictoryTooltip` uses `Flyout` to render a flyout style path around text. `Flyout` renders `<Path>` element.
+     */
+    export class Flyout extends React.Component<FlyoutProps, any> {}
+
     /**
      * VictoryTooltip renders a tooltip component with a set of default events. When VictoryTooltip is used as a label
      * component for any Victory component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered.

types/victory/victory-tests.tsx

@@ -20,7 +20,10 @@ import {
     createContainer,
     VictoryZoomContainerProps,
     VictoryBrushContainerProps,
-    VictoryPortal,
+    ScatterSymbolType,
+    Flyout,
+    VictoryClipContainer,
+    VictoryPortal
 } from 'victory';
 
 const commonData1 = [
@@ -53,6 +56,74 @@ let test = (
     </VictoryAnimation>
 );
 
+// VictoryClipContainer test
+test = (
+    <VictoryClipContainer
+        circleComponent={<circle/>}
+        className="container-class"
+        clipHeight={100}
+        clipId={10}
+        clipPadding={{
+            top: 10,
+            bottom: 20,
+            left: 30,
+            right: 40
+        }}
+        clipPathComponent={<clipPath/>}
+        clipWidth={300}
+        events={{onClick: () => {}}}
+        groupComponent={<g/>}
+        origin={{x: 0, y: 30}}
+        polar={true}
+        radius={45}
+        rectComponent={<rect/>}
+        translateX={50}
+        translateY={70}
+    >
+        {[
+            <span>child a</span>,
+            <span>child b</span>
+        ]}
+    </VictoryClipContainer>
+);
+
+// Flyout test
+test = (
+    <Flyout
+        active={true}
+        center={{x: 0, y: 2}}
+        className="flyout-class"
+        cornerRadius={3}
+        data={[]}
+        datum={{x: -3, y: 3}}
+        dx={-6}
+        dy={30}
+        events={{
+            onClick: () => {}
+        }}
+        height={50}
+        id="ab"
+        index={0}
+        orientation="top"
+        origin={{x: 0, y: 0}}
+        pathComponent={<rect/>}
+        pointerLength={5}
+        pointerWidth={10}
+        polar={false}
+        role="button"
+        shapeRendering="crispEdges"
+        style={{
+            fill: 'blue',
+        }}
+        transform="rotate(0 10 100)"
+        width={200}
+        x={0}
+        y={0}
+    >
+        {'Flyout child!'}
+    </Flyout>
+);
+
 // VictoryLabel test
 test = (
     <VictoryLabel
@@ -744,6 +815,7 @@ type RecursiveRequired<T> = {
 // tslint:disable-next-line: no-object-literal-type-assertion
 const cssProps: Required<React.CSSProperties> = {} as Required<React.CSSProperties>;
 const colorScale: string[] = ['blue'];
+const scatterSymbolType: {type: ScatterSymbolType} = { type: 'square' };
 const victoryStyle: RecursiveRequired<Required<VictoryStyleInterface>> = {
     parent: cssProps,
     data: cssProps,
@@ -752,8 +824,8 @@ const victoryStyle: RecursiveRequired<Required<VictoryStyleInterface>> = {
 const fullTheme: RecursiveRequired<Required<VictoryThemeDefinition>> = {
     area: {
         style: {
-            data: victoryStyle,
-            labels: victoryStyle,
+            data: cssProps,
+            labels: cssProps,
         },
         colorScale,
         height: 0,
@@ -826,7 +898,7 @@ const fullTheme: RecursiveRequired<Required<VictoryThemeDefinition>> = {
         width: 0,
     },
     legend: {
-        style: { data: cssProps, labels: cssProps, title: cssProps },
+        style: { data: {...cssProps, ...scatterSymbolType}, labels: cssProps, title: cssProps },
         colorScale,
         gutter: 0,
         height: 0,