victory-area 36.4.1 → 36.5.2

package/lib/index.js

@@ -3,21 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Area", {
-  enumerable: true,
-  get: function () {
-    return _area.default;
-  }
-});
-Object.defineProperty(exports, "VictoryArea", {
-  enumerable: true,
-  get: function () {
-    return _victoryArea.default;
-  }
-});
 
-var _victoryArea = _interopRequireDefault(require("./victory-area"));
+var _victoryArea = require("./victory-area");
 
-var _area = _interopRequireDefault(require("./area"));
+Object.keys(_victoryArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _victoryArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _victoryArea[key];
+    }
+  });
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _area = require("./area");
+
+Object.keys(_area).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _area[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _area[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/lib/victory-area.d.ts

@@ -0,0 +1,150 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Data, Domain, EventPropTypeInterface, InterpolationPropType, StringOrNumberOrCallback, VictoryCommonProps, VictoryDatableProps, VictoryMultiLabelableProps, VictoryStyleInterface, EventsMixinClass } from "victory-core";
+export declare type VictoryAreaTTargetType = "data" | "labels" | "parent";
+export interface VictoryAreaProps extends VictoryCommonProps, VictoryDatableProps, VictoryMultiLabelableProps {
+    eventKey?: string[] | number[] | StringOrNumberOrCallback;
+    events?: EventPropTypeInterface<VictoryAreaTTargetType, string | number>[];
+    interpolation?: InterpolationPropType | Function;
+    samples?: number;
+    style?: VictoryStyleInterface;
+}
+interface VictoryAreaBase extends EventsMixinClass<VictoryAreaProps> {
+}
+/**
+ * Draw area charts with React. VictoryArea is a composable component, so it doesn't include axes.
+ * Add VictoryArea as a child of VictoryChart for a complete chart.
+ */
+declare class VictoryAreaBase extends React.Component<VictoryAreaProps> {
+    static animationWhitelist: string[];
+    static propTypes: {
+        interpolation: PropTypes.Requireable<string | ((...args: any[]) => any)>;
+        label: PropTypes.Validator<string | null | undefined>;
+        categories?: React.Validator<import("victory-core").CategoryPropType | null | undefined> | undefined;
+        data?: React.Validator<readonly any[] | null | undefined> | undefined;
+        dataComponent?: React.Validator<React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined> | undefined;
+        domain?: React.Validator<import("victory-core").ForAxes<import("victory-core").DomainTuple> | null | undefined> | undefined;
+        domainPadding?: React.Validator<import("victory-core").ForAxes<import("victory-core").PaddingType> | null | undefined> | undefined;
+        samples?: React.Validator<number | null | undefined> | undefined;
+        sortKey?: React.Validator<import("victory-core").DataGetterPropType | null | undefined> | undefined;
+        sortOrder?: React.Validator<import("victory-core").SortOrderPropType | null | undefined> | undefined;
+        x?: React.Validator<import("victory-core").DataGetterPropType | null | undefined> | undefined;
+        y?: React.Validator<import("victory-core").DataGetterPropType | null | undefined> | undefined;
+        y0?: React.Validator<import("victory-core").DataGetterPropType | null | undefined> | undefined;
+        theme?: React.Validator<import("victory-core").VictoryThemeDefinition | null | undefined> | undefined;
+        animate?: React.Validator<boolean | import("victory-core").AnimatePropTypeInterface | null | undefined> | undefined;
+        colorScale?: React.Validator<import("victory-core").ColorScalePropType | null | undefined> | undefined;
+        containerComponent?: React.Validator<React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined> | undefined;
+        externalEventMutations?: React.Validator<import("victory-core").EventCallbackInterface<string | string[], import("victory-core").StringOrNumberOrList>[] | null | undefined> | undefined;
+        groupComponent?: React.Validator<React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined> | undefined;
+        height?: React.Validator<number | null | undefined> | undefined;
+        horizontal?: React.Validator<boolean | null | undefined> | undefined;
+        maxDomain?: React.Validator<number | {
+            x?: number | undefined;
+            y?: number | undefined;
+        } | null | undefined> | undefined;
+        minDomain?: React.Validator<number | {
+            x?: number | undefined;
+            y?: number | undefined;
+        } | null | undefined> | undefined;
+        name?: React.Validator<string | null | undefined> | undefined;
+        origin?: React.Validator<import("victory-core").OriginType | null | undefined> | undefined;
+        padding?: React.Validator<import("victory-core").PaddingProps | null | undefined> | undefined;
+        polar?: React.Validator<boolean | null | undefined> | undefined;
+        range?: React.Validator<import("victory-core").ForAxes<import("victory-core").RangeTuple> | null | undefined> | undefined;
+        scale?: React.Validator<import("victory-core").D3Scale<any> | import("victory-core").ScaleName | {
+            x?: import("victory-core").D3Scale<any> | import("victory-core").ScaleName | undefined;
+            y?: import("victory-core").D3Scale<any> | import("victory-core").ScaleName | undefined;
+        } | null | undefined> | undefined;
+        sharedEvents?: React.Validator<{
+            events: any[];
+            getEventState: Function;
+        } | null | undefined> | undefined;
+        singleQuadrantDomainPadding?: React.Validator<boolean | {
+            x?: boolean | undefined;
+            y?: boolean | undefined;
+        } | null | undefined> | undefined;
+        standalone?: React.Validator<boolean | null | undefined> | undefined;
+        width?: React.Validator<number | null | undefined> | undefined;
+    };
+    static defaultProps: {
+        containerComponent: JSX.Element;
+        dataComponent: JSX.Element;
+        groupComponent: JSX.Element;
+        labelComponent: JSX.Element;
+        samples: number;
+        sortKey: string;
+        sortOrder: string;
+        standalone: boolean;
+        theme: import("victory-core").VictoryThemeDefinition;
+    };
+    static displayName: string;
+    static role: string;
+    static continuous: boolean;
+    static defaultTransitions: import("victory-core").AnimatePropTypeInterface;
+    static defaultPolarTransitions: import("victory-core").AnimatePropTypeInterface;
+    static getDomain: typeof Domain.getDomainWithZero;
+    static getData: typeof Data.getData;
+    static getBaseProps: (props: any) => any;
+    static expectedComponents: string[];
+    shouldAnimate(): boolean;
+    render(): any;
+}
+export declare const VictoryArea: {
+    new (props: import("victory-core").EventMixinCommonProps): {
+        state: {};
+        getEventState: (eventKey: string | number, namespace: string, childType?: string | undefined) => any;
+        getScopedEvents: (events: any, namespace: any, childType: any, baseProps: any) => {};
+        getEvents: (p: any, target: any, eventKey: any) => any;
+        externalMutations: {} | undefined;
+        calculatedState: {};
+        globalEvents: {};
+        prevGlobalEventKeys: string[];
+        boundGlobalEvents: {};
+        shouldComponentUpdate(nextProps: import("victory-core").EventMixinCommonProps): boolean;
+        componentDidMount(): void;
+        componentDidUpdate(prevProps: any): void;
+        componentWillUnmount(): void;
+        addGlobalListener(key: any): void;
+        removeGlobalListener(key: any): void;
+        getStateChanges(props: any): {};
+        applyExternalMutations(props: any, externalMutations: any): void;
+        getCalculatedValues(props: any): import("victory-core").EventMixinCalculatedValues;
+        getExternalMutations(props: import("victory-core").EventMixinCommonProps): {} | undefined;
+        cacheValues(obj: any): void;
+        getBaseProps(props: any, getSharedEventState: any): Record<string, object>;
+        getAllEvents(props: any): any;
+        getComponentProps(component: any, type: any, index: any): any;
+        renderContainer(component: any, children: any): React.DetailedReactHTMLElement<any, HTMLElement>;
+        animateComponent(props: import("victory-core").EventMixinCommonProps, defaultAnimationWhitelist: string[]): JSX.Element;
+        renderContinuousData(props: import("victory-core").EventMixinCommonProps): React.DetailedReactHTMLElement<any, HTMLElement>;
+        renderData(props: any, shouldRenderDatum?: ((datum: any) => boolean) | undefined): React.DetailedReactHTMLElement<any, HTMLElement>;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("victory-core").EventMixinCommonProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        render(): React.ReactNode;
+        readonly props: Readonly<import("victory-core").EventMixinCommonProps>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("victory-core").EventMixinCommonProps>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentEvents: import("victory-core/lib/victory-util/events").ComponentEvent[];
+        getSharedEventState: (key: string, value: string) => unknown;
+        baseProps: Record<string, object>;
+        dataKeys: string[];
+        hasEvents: unknown;
+        events: unknown;
+    };
+    getBaseProps?(props: import("victory-core").EventMixinCommonProps): Record<string, object>;
+    role?: string | undefined;
+    expectedComponents?: string[] | undefined;
+} & typeof VictoryAreaBase;
+export {};
+//# sourceMappingURL=victory-area.d.ts.map

package/lib/victory-area.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VictoryArea = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helperMethods = require("./helper-methods");
 
-var _area = _interopRequireDefault(require("./area"));
+var _area = require("./area");
 
 var _victoryCore = require("victory-core");
 
@@ -21,6 +21,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -29,7 +31,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -39,9 +41,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var fallbackProps = {
   width: 450,
@@ -61,18 +61,22 @@ var options = {
   }]
 };
 
-var VictoryArea = /*#__PURE__*/function (_React$Component) {
-  _inherits(VictoryArea, _React$Component);
+/**
+ * Draw area charts with React. VictoryArea is a composable component, so it doesn't include axes.
+ * Add VictoryArea as a child of VictoryChart for a complete chart.
+ */
+var VictoryAreaBase = /*#__PURE__*/function (_React$Component) {
+  _inherits(VictoryAreaBase, _React$Component);
 
-  var _super = _createSuper(VictoryArea);
+  var _super = _createSuper(VictoryAreaBase);
 
-  function VictoryArea() {
-    _classCallCheck(this, VictoryArea);
+  function VictoryAreaBase() {
+    _classCallCheck(this, VictoryAreaBase);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(VictoryArea, [{
+  _createClass(VictoryAreaBase, [{
     key: "shouldAnimate",
     value: // Overridden in native versions
     function shouldAnimate() {
@@ -81,8 +85,8 @@ var VictoryArea = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var animationWhitelist = VictoryArea.animationWhitelist,
-          role = VictoryArea.role;
+      var animationWhitelist = VictoryAreaBase.animationWhitelist,
+          role = VictoryAreaBase.role;
 
       var props = _victoryCore.Helpers.modifyProps(this.props, fallbackProps, role);
 
@@ -96,19 +100,17 @@ var VictoryArea = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return VictoryArea;
+  return VictoryAreaBase;
 }(_react.default.Component);
 
-_defineProperty(VictoryArea, "animationWhitelist", ["data", "domain", "height", "padding", "style", "width"]);
-
-_defineProperty(VictoryArea, "propTypes", _objectSpread(_objectSpread(_objectSpread({}, _victoryCore.CommonProps.baseProps), _victoryCore.CommonProps.dataProps), {}, {
+VictoryAreaBase.animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
+VictoryAreaBase.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _victoryCore.CommonProps.baseProps), _victoryCore.CommonProps.dataProps), {}, {
   interpolation: _propTypes.default.oneOfType([_propTypes.default.oneOf(["basis", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore"]), _propTypes.default.func]),
   label: _victoryCore.PropTypes.deprecated(_propTypes.default.string, "Use `labels` instead for individual data labels")
-}));
-
-_defineProperty(VictoryArea, "defaultProps", {
+});
+VictoryAreaBase.defaultProps = {
   containerComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, null),
-  dataComponent: /*#__PURE__*/_react.default.createElement(_area.default, null),
+  dataComponent: /*#__PURE__*/_react.default.createElement(_area.Area, null),
   groupComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryClipContainer, null),
   labelComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryLabel, {
     renderInPortal: true
@@ -118,28 +120,20 @@ _defineProperty(VictoryArea, "defaultProps", {
   sortOrder: "ascending",
   standalone: true,
   theme: _victoryCore.VictoryTheme.grayscale
-});
-
-_defineProperty(VictoryArea, "displayName", "VictoryArea");
-
-_defineProperty(VictoryArea, "role", "area");
-
-_defineProperty(VictoryArea, "continuous", true);
-
-_defineProperty(VictoryArea, "defaultTransitions", _victoryCore.DefaultTransitions.continuousTransitions());
-
-_defineProperty(VictoryArea, "defaultPolarTransitions", _victoryCore.DefaultTransitions.continuousPolarTransitions());
-
-_defineProperty(VictoryArea, "getDomain", _victoryCore.Domain.getDomainWithZero);
-
-_defineProperty(VictoryArea, "getData", _victoryCore.Data.getData);
-
-_defineProperty(VictoryArea, "getBaseProps", function (props) {
+};
+VictoryAreaBase.displayName = "VictoryArea";
+VictoryAreaBase.role = "area";
+VictoryAreaBase.continuous = true;
+VictoryAreaBase.defaultTransitions = _victoryCore.DefaultTransitions.continuousTransitions();
+VictoryAreaBase.defaultPolarTransitions = _victoryCore.DefaultTransitions.continuousPolarTransitions();
+VictoryAreaBase.getDomain = _victoryCore.Domain.getDomainWithZero;
+VictoryAreaBase.getData = _victoryCore.Data.getData;
+
+VictoryAreaBase.getBaseProps = function (props) {
   return (0, _helperMethods.getBaseProps)(props, fallbackProps);
-});
-
-_defineProperty(VictoryArea, "expectedComponents", ["dataComponent", "labelComponent", "groupComponent", "containerComponent"]);
-
-var _default = (0, _victoryCore.addEvents)(VictoryArea, options);
+};
 
-exports.default = _default;
+VictoryAreaBase.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
+var VictoryArea = (0, _victoryCore.addEvents)(VictoryAreaBase, options);
+exports.VictoryArea = VictoryArea;
+//# sourceMappingURL=victory-area.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-area",
-  "version": "36.4.1",
+  "version": "36.5.2",
   "description": "Area Component for Victory",
   "keywords": [
     "data visualization",
@@ -21,15 +21,15 @@
   "dependencies": {
     "lodash": "^4.17.19",
     "prop-types": "^15.8.1",
-    "victory-core": "^36.4.1",
-    "victory-vendor": "^36.4.0"
+    "victory-core": "^36.5.2",
+    "victory-vendor": "^36.5.1"
   },
   "peerDependencies": {
-    "react": "^16.6.0 || ^17.0.0"
+    "react": ">=16.6.0"
   },
   "scripts": {
     "version": "yarn run nps build-libs && nps build-dists"
   },
   "sideEffects": false,
-  "gitHead": "aa44a22e5a93989773a560f765f83ac151f44c46"
+  "gitHead": "def218e9749ecafc159ef458dd03a8b92e227666"
 }

package/src/{area.js → area.tsx}

@@ -3,7 +3,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { assign } from "lodash";
 import * as d3Shape from "victory-vendor/d3-shape";
-import { Helpers, CommonProps, Path, UserProps } from "victory-core";
+import {
+  Helpers,
+  CommonProps,
+  Path,
+  UserProps,
+  VictoryCommonPrimitiveProps,
+  LineHelpers,
+  VictoryCommonThemeProps,
+} from "victory-core";
 
 const defined = (d) => {
   const y = d._y1 !== undefined ? d._y1 : d._y;
@@ -29,74 +37,41 @@ const getAngleAccessor = (scale) => {
   };
 };
 
-const toNewName = (interpolation) => {
-  // d3 shape changed the naming scheme for interpolators from "basis" -> "curveBasis" etc.
-  const capitalize = (s) => s && s[0].toUpperCase() + s.slice(1);
-  return `curve${capitalize(interpolation)}`;
-};
-
-const getLineFunction = (props) => {
-  const { polar, scale, horizontal } = props;
-  const interpolationFunction =
-    typeof props.interpolation === "function" && props.interpolation;
-  const interpolationName =
-    typeof props.interpolation === "string" && toNewName(props.interpolation);
-  return polar
-    ? d3Shape
-        .lineRadial()
-        .defined(defined)
-        .curve(interpolationFunction || d3Shape[`${interpolationName}Closed`])
-        .angle(getAngleAccessor(scale))
-        .radius(getYAccessor(scale))
-    : d3Shape
-        .line()
-        .defined(defined)
-        .curve(interpolationFunction || d3Shape[interpolationName])
-        .x(horizontal ? getYAccessor(scale) : getXAccessor(scale))
-        .y(horizontal ? getXAccessor(scale) : getYAccessor(scale));
-};
-
-const getCartesianArea = (props, interpolation) => {
+const getCartesianArea = (props: AreaProps) => {
   const { horizontal, scale } = props;
-  const interpolationFunction =
-    typeof interpolation === "function" && interpolation;
-  const interpolationName = typeof interpolation === "string" && interpolation;
+  const interpolationFunction = LineHelpers.getInterpolationFunction(props);
   return horizontal
     ? d3Shape
         .area()
         .defined(defined)
-        .curve(interpolationFunction || d3Shape[interpolationName])
+        .curve(interpolationFunction)
         .x0(getY0Accessor(scale))
         .x1(getYAccessor(scale))
         .y(getXAccessor(scale))
     : d3Shape
         .area()
         .defined(defined)
-        .curve(interpolationFunction || d3Shape[interpolationName])
+        .curve(interpolationFunction)
         .x(getXAccessor(scale))
         .y1(getYAccessor(scale))
         .y0(getY0Accessor(scale));
 };
 
-const getAreaFunction = (props) => {
+const getAreaFunction = (props: AreaProps) => {
   const { polar, scale } = props;
-  const interpolationFunction =
-    typeof props.interpolation === "function" && props.interpolation;
-  const interpolationName =
-    typeof props.interpolation === "string" && toNewName(props.interpolation);
-  const interpolation = interpolationFunction || interpolationName;
+  const interpolationFunction = LineHelpers.getInterpolationFunction(props);
   return polar
     ? d3Shape
         .radialArea()
         .defined(defined)
-        .curve(interpolationFunction || d3Shape[`${interpolationName}Closed`])
+        .curve(interpolationFunction)
         .angle(getAngleAccessor(scale))
         .outerRadius(getYAccessor(scale))
         .innerRadius(getY0Accessor(scale))
-    : getCartesianArea(props, interpolation);
+    : getCartesianArea(props);
 };
 
-const evaluateProps = (props) => {
+const evaluateProps = (props: AreaProps) => {
   /**
    * Potential evaluated props are:
    * `ariaLabel`
@@ -110,14 +85,17 @@ const evaluateProps = (props) => {
   const id = Helpers.evaluateProp(props.id, props);
   const style = Helpers.evaluateStyle(
     assign({ fill: "black" }, props.style),
-    props
+    props,
   );
   const tabIndex = Helpers.evaluateProp(props.tabIndex, props);
 
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const Area = (props) => {
+/**
+ * The area primitive used by VictoryArea
+ */
+export const Area: React.FC<AreaProps> = (props) => {
   props = evaluateProps(props);
   const {
     ariaLabel,
@@ -134,7 +112,7 @@ const Area = (props) => {
     id,
     style,
     desc,
-    tabIndex
+    tabIndex,
   } = props;
   const userProps = UserProps.getSafeUserProps(props);
   const defaultTransform =
@@ -143,7 +121,7 @@ const Area = (props) => {
   const renderLine =
     style.stroke && style.stroke !== "none" && style.stroke !== "transparent";
   const areaFunction = getAreaFunction(props);
-  const lineFunction = renderLine && getLineFunction(props);
+  const lineFunction = renderLine && LineHelpers.getLineFunction(props);
 
   const areaStroke = style.stroke ? "none" : style.fill;
 
@@ -155,40 +133,40 @@ const Area = (props) => {
     transform,
     ...events,
     clipPath,
-    tabIndex
+    tabIndex,
   };
 
   const area = React.cloneElement(
-    pathComponent,
+    pathComponent!,
     assign(
       {
         key: `${id}-area`,
         style: assign({}, style, { stroke: areaStroke }),
         d: areaFunction(data),
         desc,
-        tabIndex
+        tabIndex,
       },
       sharedProps,
-      userProps
-    )
+      userProps,
+    ),
   );
 
   const line = renderLine
     ? React.cloneElement(
-        pathComponent,
+        pathComponent!,
         assign(
           {
             key: `${id}-area-stroke`,
             style: assign({}, style, { fill: "none" }),
-            d: lineFunction(data)
+            d: lineFunction(data),
           },
-          sharedProps
-        )
+          sharedProps,
+        ),
       )
     : null;
 
   return renderLine
-    ? React.cloneElement(groupComponent, userProps, [area, line])
+    ? React.cloneElement(groupComponent!, userProps, [area, line])
     : area;
 };
 
@@ -196,14 +174,20 @@ Area.propTypes = {
   ...CommonProps.primitiveProps,
   groupComponent: PropTypes.element,
   interpolation: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  pathComponent: PropTypes.element
+  pathComponent: PropTypes.element,
 };
 
 Area.defaultProps = {
   groupComponent: <g />,
   pathComponent: <Path />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
 
-export default Area;
+export interface AreaProps extends VictoryCommonPrimitiveProps {
+  horizontal?: VictoryCommonThemeProps["horizontal"];
+  groupComponent?: React.ReactElement;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  interpolation?: string | Function;
+  pathComponent?: React.ReactElement;
+}

package/src/{helper-methods.js → helper-methods.tsx}

@@ -5,7 +5,7 @@ import {
   Data,
   Domain,
   Scale,
-  Collection
+  Collection,
 } from "victory-core";
 
 export const getDataWithBaseline = (props, scale) => {
@@ -19,7 +19,7 @@ export const getDataWithBaseline = (props, scale) => {
     const domain = scale[axis].domain();
     const minY = Collection.getMinValue(domain);
     const maxY = Collection.getMaxValue(domain);
-    let defaultMin = defaultZero;
+    let defaultMin: typeof minY = defaultZero;
     if (minY < 0 && maxY <= 0) {
       defaultMin = maxY;
     } else if (minY >= 0 && maxY > 0) {
@@ -43,11 +43,11 @@ const getCalculatedValues = (props) => {
   const style = Helpers.getStyles(props.style, defaultStyles);
   const range = {
     x: Helpers.getRange(props, "x"),
-    y: Helpers.getRange(props, "y")
+    y: Helpers.getRange(props, "y"),
   };
   const domain = {
     x: Domain.getDomainWithZero(props, "x"),
-    y: Domain.getDomainWithZero(props, "y")
+    y: Domain.getDomainWithZero(props, "y"),
   };
   const scale = {
     x: Scale.getBaseScale(props, "x")
@@ -55,7 +55,7 @@ const getCalculatedValues = (props) => {
       .range(props.horizontal ? range.y : range.x),
     y: Scale.getBaseScale(props, "y")
       .domain(domain.y)
-      .range(props.horizontal ? range.x : range.y)
+      .range(props.horizontal ? range.x : range.y),
   };
   const origin = polar
     ? props.origin || Helpers.getPolarOrigin(props)
@@ -86,7 +86,7 @@ export const getBaseProps = (props, fallbackProps) => {
     width,
     labels,
     name,
-    disableInlineStyles
+    disableInlineStyles,
   } = props;
   const initialChildProps = {
     parent: {
@@ -102,7 +102,7 @@ export const getBaseProps = (props, fallbackProps) => {
       origin,
       padding,
       name,
-      horizontal
+      horizontal,
     },
     all: {
       data: {
@@ -114,9 +114,9 @@ export const getBaseProps = (props, fallbackProps) => {
         interpolation,
         groupComponent,
         style: disableInlineStyles ? {} : style.data,
-        disableInlineStyles
-      }
-    }
+        disableInlineStyles,
+      },
+    },
   };
   return data.reduce((childProps, datum, index) => {
     const text = LabelHelpers.getText(props, datum, index);

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./victory-area";
+export * from "./area";