victory-core 36.6.3 → 36.6.6

package/lib/victory-util/immutable.d.ts

@@ -1,4 +1,4 @@
-import type { Iterable, List, Map } from "immutable";
+import type { Iterable, List, Map } from "./immutable-types";
 export declare const IMMUTABLE_ITERABLE = "@@__IMMUTABLE_ITERABLE__@@";
 export declare const IMMUTABLE_RECORD = "@@__IMMUTABLE_RECORD__@@";
 export declare const IMMUTABLE_LIST = "@@__IMMUTABLE_LIST__@@";

package/lib/victory-util/index.d.ts

@@ -25,5 +25,4 @@ export { default as TimerContext } from "./timer-context";
 export * as Transitions from "./transitions";
 export * as UserProps from "./user-props";
 export * as Wrapper from "./wrapper";
-export * from "./with-container";
 //# sourceMappingURL=index.d.ts.map

package/lib/victory-util/index.js

@@ -159,20 +159,6 @@ var _Wrapper = _interopRequireWildcard(require("./wrapper"));
 
 exports.Wrapper = _Wrapper;
 
-var _withContainer = require("./with-container");
-
-Object.keys(_withContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _withContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _withContainer[key];
-    }
-  });
-});
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-core",
-  "version": "36.6.3",
+  "version": "36.6.6",
   "description": "Victory Core",
   "keywords": [
     "data visualization",
@@ -23,7 +23,7 @@
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.0",
-    "victory-vendor": "^36.6.3"
+    "victory-vendor": "^36.6.6"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

package/src/index.ts

@@ -15,4 +15,3 @@ export * from "./victory-primitives";
 export { Border as Box } from "./victory-primitives";
 export type { BorderProps as BoxProps } from "./victory-primitives";
 export * from "./victory-util";
-export * from "./victory-state";

package/src/types/callbacks.ts

@@ -51,5 +51,3 @@ export type PaddingOrCallback = number | BlockProps | VictoryPaddingCallback;
 export type OrientationOrCallback =
   | OrientationTypes
   | VictoryOrientationCallback;
-
-export type ValueOrCallback<TValue> = TValue | ((args: CallbackArgs) => TValue);

package/src/types/prop-types.ts

@@ -9,14 +9,14 @@ import {
   AnimationEasing,
   AnimationStyle,
 } from "../victory-animation/victory-animation";
-import { StringOrNumberOrCallback } from "./callbacks";
+import { CallbackArgs, StringOrNumberOrCallback } from "./callbacks";
 
 export type AxisType = "x" | "y";
 export type DatumValue = number | string | Date | null | undefined;
 export type Datum = any;
 export type ForAxes<T> = T | { x?: T; y?: T };
 export type ID = number | string;
-export type ValueOrAccessor<ValueType = unknown, PropsType = object> =
+export type ValueOrAccessor<ValueType, PropsType = CallbackArgs> =
   | ValueType
   | ((props: PropsType) => ValueType);
 export type Tuple<T> = [T, T];
@@ -137,7 +137,8 @@ export type CategoryPropType =
     };
 
 export type DataGetterPropType = ValueOrAccessor<
-  string | string[] | number | number[]
+  string | string[] | number | number[],
+  any // The arg will be the `datum`, which can have any type
 >;
 
 export type InterpolationPropType =

package/src/v37/clone.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+/**
+ * Syntax sugar for `React.cloneElement`, so that we can use JSX instead
+ *
+ * @example
+ *   // Before:
+ *   const children = React.cloneElement(props.groupComponent, { prop2 }, props.children);
+ *   return React.cloneElement(props.containerComponent, { prop1 }, children);
+ *
+ *   // After:
+ *   return (
+ *     <Clone element={props.containerComponent} prop1={prop1}>
+ *       <Clone element={props.groupComponent} prop2={prop2}>
+ *         {props.children}
+ *       </Clone>
+ *     </Clone>
+ *   );
+ */
+export const Clone = <TProps,>(
+  props: React.PropsWithChildren<
+    {
+      element: React.ReactElement<TProps>;
+      children?: React.ReactNode | React.ReactNode[];
+    } & TProps
+  >,
+) => {
+  const { children, element, ...rest } = props;
+  return React.cloneElement(element, rest as unknown as TProps, children);
+};

package/src/v37/index.tsx

@@ -0,0 +1,4 @@
+export * from "./victory-state";
+export * from "./clone";
+export * from "./with-normalized-props";
+export * from "./with-container";

package/src/{victory-state → v37/victory-state}/helpers/get-axis-data.ts

@@ -1,5 +1,5 @@
-import { AxisType, Datum, DomainValue } from "../../types/prop-types";
-import { isKeyValueObject } from "../../victory-util/type-helpers";
+import { AxisType, Datum, DomainValue } from "../../../types/prop-types";
+import { isKeyValueObject } from "../../../victory-util/type-helpers";
 
 export function getAxisData(data: Datum[], axis: AxisType) {
   return data.reduce((acc, datum) => {

package/src/{victory-state → v37/victory-state}/helpers/get-data.ts

@@ -1,7 +1,7 @@
-import { get, isNil, orderBy } from "lodash";
 import * as React from "react";
-import { Datum, DatumValue } from "../../types/prop-types";
-import { isKeyValueObject } from "../../victory-util/type-helpers";
+import { get, isNil, orderBy } from "lodash";
+import { Datum, DatumValue } from "../../../types/prop-types";
+import { isKeyValueObject } from "../../../victory-util/type-helpers";
 import { VictoryProviderProps } from "../types";
 
 type DataProps = Pick<

package/src/{victory-state → v37/victory-state}/helpers/get-domain.ts

@@ -4,14 +4,14 @@ import {
   getValueForAxis,
   isDate,
   isTuple,
-} from "../../victory-util/type-helpers";
+} from "../../../victory-util/type-helpers";
 import { VictoryProviderProps } from "../types";
 import {
   Tuple,
   AxisType,
   DomainTuple,
   DomainValue,
-} from "../../types/prop-types";
+} from "../../../types/prop-types";
 
 type DomainProps = Pick<
   VictoryProviderProps,

package/src/{victory-state → v37/victory-state}/helpers/get-range.ts

@@ -1,6 +1,6 @@
-import { AxisType, Padding, RangeTuple } from "../../types/prop-types";
-import { getPadding } from "../../victory-util/helpers";
-import { getValueForAxis, isTuple } from "../../victory-util/type-helpers";
+import { AxisType, Padding, RangeTuple } from "../../../types/prop-types";
+import { getPadding } from "../../../victory-util/helpers";
+import { getValueForAxis, isTuple } from "../../../victory-util/type-helpers";
 import { VictoryProviderProps } from "../types";
 
 type RangeProps = Pick<

package/src/{victory-state → v37/victory-state}/helpers/get-scale.ts

@@ -4,9 +4,12 @@ import {
   scaleLog,
   scaleSqrt,
 } from "victory-vendor/d3-scale";
-import { AxisType, D3ScaleFn, ScalePropType } from "../../types/prop-types";
-import * as Collection from "../../victory-util/collection";
-import { getValueForAxis, isFunction } from "../../victory-util/type-helpers";
+import { AxisType, D3ScaleFn, ScalePropType } from "../../../types/prop-types";
+import * as Collection from "../../../victory-util/collection";
+import {
+  getValueForAxis,
+  isFunction,
+} from "../../../victory-util/type-helpers";
 import { VictoryProviderProps } from "../types";
 import { getAxisData } from "./get-axis-data";
 

package/src/{victory-state → v37/victory-state}/index.ts

@@ -1,2 +1,3 @@
 export * from "./victory-provider";
 export * from "./types";
+export * from "./with-victory-provider";

package/src/{victory-state → v37/victory-state}/types.ts

@@ -5,8 +5,8 @@ import {
   RangeTuple,
   ScalePropType,
   ValueOrAxes,
-} from "../types/prop-types";
-import { PaddingProps } from "../victory-theme/types";
+} from "../../types/prop-types";
+import { PaddingProps } from "../../victory-theme/types";
 
 // These are all the props that are used to calculate data, domain, range, and scale
 export interface VictoryCalculatedStateProps {

package/src/{victory-state → v37/victory-state}/victory-provider.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createContext, useContext } from "react";
-import { D3ScaleFn, DomainTuple, ForAxes } from "../types/prop-types";
+import { D3ScaleFn, DomainTuple, ForAxes } from "../../types/prop-types";
 import { FormattedDatum, getData } from "./helpers/get-data";
 import { getDomain } from "./helpers/get-domain";
 import { getRange } from "./helpers/get-range";
@@ -14,27 +14,42 @@ export interface ContextType {
   data: FormattedDatum[];
   scale: ScaleType;
   domain: DomainType;
-  setChildProps: (id: string, props: VictoryProviderProps) => void;
+  updateChildProps: (id: symbol, props: VictoryProviderProps | null) => void;
 }
 
 const VictoryContext = createContext<ContextType | null>(null);
 
-export function VictoryProvider({
-  children,
-  ...initialProps
-}: VictoryProviderProps) {
-  // We need to store the props in state so they can be overwritten by child components
-  const [props, setProps] = React.useState(initialProps);
+type CollectedProps = { [id: symbol]: VictoryCalculatedStateProps };
 
-  const setChildProps = React.useCallback(
-    (id: string, newProps: VictoryCalculatedStateProps) => {
-      setProps((prevProps) => {
-        return { ...prevProps, ...newProps };
+function useNormalizedProps(): ContextType {
+  const [collectedProps, setCollectedProps] = React.useState<CollectedProps>(
+    {},
+  );
+
+  const updateChildProps = React.useCallback(
+    (id: symbol, newProps: VictoryCalculatedStateProps | null) => {
+      setCollectedProps((prev) => {
+        const result = { ...prev };
+        if (newProps === null) {
+          delete result[id];
+        } else {
+          result[id] = newProps;
+        }
+        return result;
       });
     },
     [],
   );
 
+  // TEMP: combine all props into a single result:
+  // TODO: instead, we should intelligently aggregate all these props
+  const props = Object.values(
+    collectedProps,
+  ).reduce<VictoryCalculatedStateProps>(
+    (result, childProps) => Object.assign(result, childProps),
+    {},
+  );
+
   const data = React.useMemo(() => {
     return getData(props);
   }, [props]);
@@ -69,18 +84,39 @@ export function VictoryProvider({
     };
   }, [props, domain, range]);
 
-  const value = {
-    scale,
-    data,
-    domain,
-    setChildProps,
-  };
+  const normalizedProps = React.useMemo(
+    () => ({
+      scale,
+      data,
+      domain,
+      updateChildProps,
+    }),
+    [scale, data, domain, updateChildProps],
+  );
+
+  return normalizedProps;
+}
+
+export function VictoryProvider({
+  children,
+  ...providerProps
+}: VictoryProviderProps) {
+  const value = useNormalizedProps();
+
+  // TODO: sync the providerProps
 
   return (
     <VictoryContext.Provider value={value}>{children}</VictoryContext.Provider>
   );
 }
 
+export function useVictoryContextMaybe<T>(
+  selector: (value: ContextType | null) => T,
+): T {
+  const context = useContext(VictoryContext);
+  return selector(context);
+}
+
 export function useVictoryContext<T>(selector: (value: ContextType) => T): T {
   const context = useContext(VictoryContext);
   if (!context) {
@@ -102,15 +138,13 @@ export function useDomain() {
 }
 
 // This function keeps props in sync betwen the VictoryProvider and child components
-export function useVictoryProviderSync(
-  id: string,
-  props: VictoryCalculatedStateProps,
-) {
-  const setChildProps = useVictoryContext((value) => value.setChildProps);
+export function useVictoryProviderSync(props: VictoryCalculatedStateProps) {
+  const updateChildProps = useVictoryContext((value) => value.updateChildProps);
+  const [myId] = React.useState(() =>
+    Symbol("UniqueIdFor(VictoryProviderChild)"),
+  );
 
   React.useEffect(() => {
-    setChildProps(id, props);
-  }, []);
-
-  return props;
+    updateChildProps(myId, props);
+  }, [updateChildProps, props]);
 }

package/src/v37/victory-state/with-victory-provider.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { useVictoryContextMaybe, VictoryProvider } from "./victory-provider";
+import { VictoryCommonProps } from "../../victory-util/common-props";
+import { Clone } from "../clone";
+import { VictoryProviderProps } from "./types";
+
+/* eslint-disable react/prop-types */
+
+/**
+ * Ensures the component is wrapped by a VictoryProvider, if not already.
+ */
+export function withVictoryProvider<
+  TComp extends React.FC<TProps>,
+  TProps extends React.PropsWithChildren<VictoryCommonProps>,
+>(Comp: TComp): TComp {
+  const WithVictoryProvider = React.memo((props: TProps) => {
+    const updateChildProps = useVictoryContextMaybe(
+      (value) => value?.updateChildProps,
+    );
+    const hasParentProvider = !!updateChildProps;
+
+    React.useEffect(() => {
+      if (!hasParentProvider) return;
+
+      const id = Symbol("WithVictoryProvider");
+      updateChildProps(id, props as VictoryProviderProps);
+      // eslint-disable-next-line consistent-return
+      return () => updateChildProps(id, null);
+    });
+
+    // @ts-expect-error "TProps not assignable to LibraryManagedAttributes"
+    let result = <Comp {...props}>{props.children}</Comp>;
+
+    if (!hasParentProvider) {
+      // Wrap with a parent Provider:
+      result = (
+        <VictoryProvider>
+          <Clone element={props.containerComponent} {...props}>
+            {result}
+          </Clone>
+        </VictoryProvider>
+      );
+    }
+    return result;
+  });
+  const name = Comp.displayName || Comp.name;
+  WithVictoryProvider.displayName = name
+    ? `WithVictoryProvider(${name})`
+    : "WithVictoryProvider";
+
+  // @ts-expect-error "WithVictoryProvider does not overlap with TComp"
+  return WithVictoryProvider as TComp;
+}

package/src/{victory-util → v37}/with-container.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { VictoryProvider, VictoryProviderProps } from "../victory-state";
+import { VictoryProvider, VictoryProviderProps } from "./victory-state";
 import { VictoryContainer } from "../victory-container/victory-container";
-import { VictoryCommonProps } from "./common-props";
+import { VictoryCommonProps } from "../victory-util/common-props";
 
 const defaultProviderProps = {
   width: 450,

package/src/v37/with-normalized-props.tsx

@@ -0,0 +1,43 @@
+import { VictoryCommonProps } from "../victory-util/common-props";
+import React from "react";
+import {
+  useVictoryContext,
+  VictoryProviderProps,
+  withVictoryProvider,
+} from "./victory-state";
+
+type FC<TProps> = (props: TProps) => JSX.Element;
+
+export function withNormalizedProps<
+  TProps extends React.PropsWithChildren<VictoryCommonProps>,
+  TDefaultPropKeys extends keyof TProps,
+>(
+  config: {
+    displayName: string;
+    propTypes?: React.WeakValidationMap<Omit<TProps, keyof VictoryCommonProps>>;
+    defaultProps: Pick<TProps, TDefaultPropKeys>;
+    /** @deprecated */
+    initialProviderProps?: Partial<VictoryProviderProps>;
+  },
+  WrappedComponent: React.FC<TProps>,
+) {
+  WrappedComponent.displayName = config.displayName;
+  const WithNormalizedProps: FC<TProps> = withVictoryProvider<
+    FC<TProps>,
+    TProps
+  >((props: TProps) => {
+    const normalizedProps = useVictoryContext((v) => v);
+
+    return (
+      <WrappedComponent {...props} {...normalizedProps}>
+        {props.children}
+      </WrappedComponent>
+    );
+  });
+
+  return Object.assign(WithNormalizedProps, {
+    displayName: `WithNormalizedProps(${config.displayName}`,
+    defaultProps: config.defaultProps,
+    propTypes: config.propTypes,
+  });
+}

package/src/victory-label/victory-label.tsx

@@ -17,8 +17,8 @@ import {
   NumberOrCallback,
   StringOrCallback,
   StringOrNumberOrCallback,
-  ValueOrCallback,
 } from "../types/callbacks";
+import { ValueOrAccessor } from "../types/prop-types";
 import {
   PaddingProps,
   VerticalAnchorType,
@@ -56,11 +56,11 @@ export interface VictoryLabelProps {
   tabIndex?: NumberOrCallback;
   text?: string[] | StringOrNumberOrCallback;
   textComponent?: React.ReactElement;
-  textAnchor?: ValueOrCallback<TextAnchorType>;
+  textAnchor?: ValueOrAccessor<TextAnchorType>;
   title?: string;
-  transform?: ValueOrCallback<string | object>;
+  transform?: ValueOrAccessor<string | object>;
   tspanComponent?: React.ReactElement;
-  verticalAnchor?: ValueOrCallback<VerticalAnchorType>;
+  verticalAnchor?: ValueOrAccessor<VerticalAnchorType>;
   x?: number;
   y?: number;
   dx?: StringOrNumberOrCallback;

package/src/victory-util/data.ts

@@ -33,7 +33,7 @@ function parseDatum(datum) {
     : datum;
 }
 
-function getLength(data) {
+function getLength(data: unknown[]) {
   return Immutable.isIterable(data) ? data.size : data.length;
 }
 

package/src/victory-util/helpers.ts

@@ -1,7 +1,8 @@
 /* eslint-disable no-use-before-define */
 import React from "react";
 import { defaults, isFunction, property, pick, assign, keys } from "lodash";
-import { CallbackArgs, ValueOrCallback } from "../types/callbacks";
+import { CallbackArgs } from "../types/callbacks";
+import { ValueOrAccessor } from "../types/prop-types";
 
 // Private Functions
 
@@ -128,7 +129,7 @@ export function getStyles(style, defaultStyles) {
 }
 
 export function evaluateProp<TValue>(
-  prop: ValueOrCallback<TValue>,
+  prop: ValueOrAccessor<TValue, CallbackArgs>,
   props: CallbackArgs,
 ): TValue {
   return isFunction(prop) ? prop(props) : prop;