@unovis/react 1.7.1 → 1.8.0-vpd-beta.0

package/containers/single-container/index.js

@@ -19,14 +19,17 @@ function VisSingleContainerFC(props) {
       });
     }
   }), []);
-  const getConfig = () => ({
-    ...props,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    component: container.current?.querySelector("vis-component")?.__component__,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    tooltip: container.current?.querySelector("vis-tooltip")?.__component__,
-    annotations: container.current?.querySelector("vis-annotations")?.__component__
-  });
+  const getConfig = () => {
+    const { data, className, style, children, ...restProps } = props;
+    return {
+      ...restProps,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      component: container.current?.querySelector("vis-component")?.__component__,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      tooltip: container.current?.querySelector("vis-tooltip")?.__component__,
+      annotations: container.current?.querySelector("vis-annotations")?.__component__
+    };
+  };
   useEffect(() => {
     const c = new SingleContainer(container.current, getConfig(), props.data);
     chartRef.current = c;
@@ -47,7 +50,7 @@ function VisSingleContainerFC(props) {
   }, []);
   useEffect(() => {
     const preventRender = true;
-    if (props.data && props.data !== dataRef.current) {
+    if (props.data !== void 0 && props.data !== dataRef.current) {
       chartRef.current?.setData(props.data, preventRender);
       dataRef.current = props.data;
     }

package/containers/single-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useMemo, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer } from '@unovis/ts/containers/single-container'\nimport { SingleContainerConfigInterface } from '@unovis/ts/containers/single-container/config'\nimport { ComponentCore } from '@unovis/ts/core/component'\nimport { Tooltip } from '@unovis/ts/components/tooltip'\nimport { Annotations } from '@unovis/ts/components/annotations'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\nimport { VisContainerContext, VisContainerContextValue } from 'src/utils/container'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n  data?: Data;\n  className?: string;\n  style?: React.CSSProperties | Record<`--${string}`, string | number>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const prevPropsRef = useRef<PropsWithChildren<VisSingleContainerProps<Data>>>({})\n  const chartRef = useRef<SingleContainer<Data> | undefined>(undefined)\n  const dataRef = useRef<Data | undefined>(undefined)\n  const animationFrameRef = useRef<number | null>(null)\n  const renderRequestFrameRef = useRef<number | null>(null)\n\n  // Children ask for a re-render when their own config changes. We coalesce the requests into a single\n  // frame, and skip them when this container's props changed too, because the `updateContainer` call\n  // scheduled below renders on its own.\n  const containerContext = useMemo<VisContainerContextValue>(() => ({\n    requestRender: () => {\n      if (renderRequestFrameRef.current !== null) return\n      renderRequestFrameRef.current = requestAnimationFrame(() => {\n        renderRequestFrameRef.current = null\n        if (animationFrameRef.current !== null) return\n        chartRef.current?.render()\n      })\n    },\n  }), [])\n\n  const getConfig = (): SingleContainerConfigInterface<Data> => ({\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    annotations: container.current?.querySelector<VisComponentElement<Annotations>>('vis-annotations')?.__component__,\n  })\n\n  // On Mount\n  useEffect(() => {\n    const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    chartRef.current = c\n    prevPropsRef.current = props\n    dataRef.current = props.data\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n        animationFrameRef.current = null\n        prevPropsRef.current = {}\n      }\n      if (renderRequestFrameRef.current !== null) {\n        cancelAnimationFrame(renderRequestFrameRef.current)\n        renderRequestFrameRef.current = null\n      }\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== dataRef.current)) {\n      chartRef.current?.setData(props.data, preventRender)\n      dataRef.current = props.data\n    }\n\n    // Update and render\n    // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n    // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n    // the first render of its children (VisSankey, VisGraph, ...) meaning that their wrong instances (the ones\n    // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n    // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n    // components are available at `__component__`.\n    if (!arePropsEqual(prevPropsRef.current, props)) { // Checking whether the props have changed do avoid multiple renders\n      prevPropsRef.current = props\n      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = null\n        chartRef.current?.updateContainer(getConfig())\n      })\n    }\n  })\n\n  return (\n    <div ref={container} className={props.className} style={props.style}>\n      <VisContainerContext.Provider value={containerContext}>\n        {props.children}\n      </VisContainerContext.Provider>\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n  React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAsBA,SAAS,qBAA4B,OAAsE;AACzG,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,eAAe,OAAyD,EAAE;AAChF,QAAM,WAAW,OAA0C,MAAS;AACpE,QAAM,UAAU,OAAyB,MAAS;AAClD,QAAM,oBAAoB,OAAsB,IAAI;AACpD,QAAM,wBAAwB,OAAsB,IAAI;AAKxD,QAAM,mBAAmB,QAAkC,OAAO;AAAA,IAChE,eAAe,MAAM;AACnB,UAAI,sBAAsB,YAAY,KAAM;AAC5C,4BAAsB,UAAU,sBAAsB,MAAM;AAC1D,8BAAsB,UAAU;AAChC,YAAI,kBAAkB,YAAY,KAAM;AACxC,iBAAS,SAAS,OAAA;AAAA,MACpB,CAAC;AAAA,IACH;AAAA,EAAA,IACE,CAAA,CAAE;AAEN,QAAM,YAAY,OAA6C;AAAA,IAC7D,GAAG;AAAA;AAAA,IAEH,WAAW,UAAU,SAAS,cAAwD,eAAe,GAAG;AAAA;AAAA,IAExG,SAAS,UAAU,SAAS,cAA4C,aAAa,GAAG;AAAA,IACxF,aAAa,UAAU,SAAS,cAAgD,iBAAiB,GAAG;AAAA,EAAA;AAItG,YAAU,MAAM;AACd,UAAM,IAAI,IAAI,gBAAsB,UAAU,SAA2B,UAAA,GAAa,MAAM,IAAI;AAChG,aAAS,UAAU;AACnB,iBAAa,UAAU;AACvB,YAAQ,UAAU,MAAM;AAExB,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,6BAAqB,kBAAkB,OAAO;AAC9C,0BAAkB,UAAU;AAC5B,qBAAa,UAAU,CAAA;AAAA,MACzB;AACA,UAAI,sBAAsB,YAAY,MAAM;AAC1C,6BAAqB,sBAAsB,OAAO;AAClD,8BAAsB,UAAU;AAAA,MAClC;AACA,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,gBAAgB;AAGtB,QAAI,MAAM,QAAS,MAAM,SAAS,QAAQ,SAAU;AAClD,eAAS,SAAS,QAAQ,MAAM,MAAM,aAAa;AACnD,cAAQ,UAAU,MAAM;AAAA,IAC1B;AASA,QAAI,CAAC,cAAc,aAAa,SAAS,KAAK,GAAG;AAC/C,mBAAa,UAAU;AACvB,UAAI,kBAAkB,QAAS,sBAAqB,kBAAkB,OAAO;AAC7E,wBAAkB,UAAU,sBAAsB,MAAM;AACtD,0BAAkB,UAAU;AAC5B,iBAAS,SAAS,gBAAgB,WAAW;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,6CACG,OAAA,EAAI,KAAK,WAAW,WAAW,MAAM,WAAW,OAAO,MAAM,MAAA,GAC5D,sBAAA,cAAC,oBAAoB,UAApB,EAA6B,OAAO,iBAAA,GAClC,MAAM,QACT,CACF;AAEJ;AAIO,MAAM,qBACX,MAAM,KAAK,sBAAsB,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useMemo, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer } from '@unovis/ts/containers/single-container'\nimport { SingleContainerConfigInterface } from '@unovis/ts/containers/single-container/config'\nimport { ComponentCore } from '@unovis/ts/core/component'\nimport { Tooltip } from '@unovis/ts/components/tooltip'\nimport { Annotations } from '@unovis/ts/components/annotations'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\nimport { VisContainerContext, VisContainerContextValue } from 'src/utils/container'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n  data?: Data;\n  className?: string;\n  style?: React.CSSProperties | Record<`--${string}`, string | number>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const prevPropsRef = useRef<PropsWithChildren<VisSingleContainerProps<Data>>>({})\n  const chartRef = useRef<SingleContainer<Data> | undefined>(undefined)\n  const dataRef = useRef<Data | undefined>(undefined)\n  const animationFrameRef = useRef<number | null>(null)\n  const renderRequestFrameRef = useRef<number | null>(null)\n\n  // Children ask for a re-render when their own config changes. We coalesce the requests into a single\n  // frame, and skip them when this container's props changed too, because the `updateContainer` call\n  // scheduled below renders on its own.\n  const containerContext = useMemo<VisContainerContextValue>(() => ({\n    requestRender: () => {\n      if (renderRequestFrameRef.current !== null) return\n      renderRequestFrameRef.current = requestAnimationFrame(() => {\n        renderRequestFrameRef.current = null\n        if (animationFrameRef.current !== null) return\n        chartRef.current?.render()\n      })\n    },\n  }), [])\n\n  const getConfig = (): SingleContainerConfigInterface<Data> => {\n    // Strip the props that are not container config properties (deep-cloning the dataset\n    // or React elements into the config would be both wrong and expensive)\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { data, className, style, children, ...restProps } = props\n\n    return {\n      ...restProps,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n      annotations: container.current?.querySelector<VisComponentElement<Annotations>>('vis-annotations')?.__component__,\n    }\n  }\n\n  // On Mount\n  useEffect(() => {\n    const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n    chartRef.current = c\n    prevPropsRef.current = props\n    dataRef.current = props.data\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n        animationFrameRef.current = null\n        prevPropsRef.current = {}\n      }\n      if (renderRequestFrameRef.current !== null) {\n        cancelAnimationFrame(renderRequestFrameRef.current)\n        renderRequestFrameRef.current = null\n      }\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data !== undefined && (props.data !== dataRef.current)) {\n      chartRef.current?.setData(props.data, preventRender)\n      dataRef.current = props.data\n    }\n\n    // Update and render\n    // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n    // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n    // the first render of its children (VisSankey, VisGraph, ...) meaning that their wrong instances (the ones\n    // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n    // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n    // components are available at `__component__`.\n    if (!arePropsEqual(prevPropsRef.current, props)) { // Checking whether the props have changed do avoid multiple renders\n      prevPropsRef.current = props\n      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = null\n        chartRef.current?.updateContainer(getConfig())\n      })\n    }\n  })\n\n  return (\n    <div ref={container} className={props.className} style={props.style}>\n      <VisContainerContext.Provider value={containerContext}>\n        {props.children}\n      </VisContainerContext.Provider>\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n  React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAsBA,SAAS,qBAA4B,OAAsE;AACzG,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,eAAe,OAAyD,EAAE;AAChF,QAAM,WAAW,OAA0C,MAAS;AACpE,QAAM,UAAU,OAAyB,MAAS;AAClD,QAAM,oBAAoB,OAAsB,IAAI;AACpD,QAAM,wBAAwB,OAAsB,IAAI;AAKxD,QAAM,mBAAmB,QAAkC,OAAO;AAAA,IAChE,eAAe,MAAM;AACnB,UAAI,sBAAsB,YAAY,KAAM;AAC5C,4BAAsB,UAAU,sBAAsB,MAAM;AAC1D,8BAAsB,UAAU;AAChC,YAAI,kBAAkB,YAAY,KAAM;AACxC,iBAAS,SAAS,OAAA;AAAA,MACpB,CAAC;AAAA,IACH;AAAA,EAAA,IACE,CAAA,CAAE;AAEN,QAAM,YAAY,MAA4C;AAI5D,UAAM,EAAE,MAAM,WAAW,OAAO,UAAU,GAAG,cAAc;AAE3D,WAAO;AAAA,MACL,GAAG;AAAA;AAAA,MAEH,WAAW,UAAU,SAAS,cAAwD,eAAe,GAAG;AAAA;AAAA,MAExG,SAAS,UAAU,SAAS,cAA4C,aAAa,GAAG;AAAA,MACxF,aAAa,UAAU,SAAS,cAAgD,iBAAiB,GAAG;AAAA,IAAA;AAAA,EAExG;AAGA,YAAU,MAAM;AACd,UAAM,IAAI,IAAI,gBAAsB,UAAU,SAA2B,UAAA,GAAa,MAAM,IAAI;AAChG,aAAS,UAAU;AACnB,iBAAa,UAAU;AACvB,YAAQ,UAAU,MAAM;AAExB,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,6BAAqB,kBAAkB,OAAO;AAC9C,0BAAkB,UAAU;AAC5B,qBAAa,UAAU,CAAA;AAAA,MACzB;AACA,UAAI,sBAAsB,YAAY,MAAM;AAC1C,6BAAqB,sBAAsB,OAAO;AAClD,8BAAsB,UAAU;AAAA,MAClC;AACA,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,gBAAgB;AAGtB,QAAI,MAAM,SAAS,UAAc,MAAM,SAAS,QAAQ,SAAU;AAChE,eAAS,SAAS,QAAQ,MAAM,MAAM,aAAa;AACnD,cAAQ,UAAU,MAAM;AAAA,IAC1B;AASA,QAAI,CAAC,cAAc,aAAa,SAAS,KAAK,GAAG;AAC/C,mBAAa,UAAU;AACvB,UAAI,kBAAkB,QAAS,sBAAqB,kBAAkB,OAAO;AAC7E,wBAAkB,UAAU,sBAAsB,MAAM;AACtD,0BAAkB,UAAU;AAC5B,iBAAS,SAAS,gBAAgB,WAAW;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,6CACG,OAAA,EAAI,KAAK,WAAW,WAAW,MAAM,WAAW,OAAO,MAAM,MAAA,GAC5D,sBAAA,cAAC,oBAAoB,UAApB,EAA6B,OAAO,iBAAA,GAClC,MAAM,QACT,CACF;AAEJ;AAIO,MAAM,qBACX,MAAM,KAAK,sBAAsB,aAAa;"}

package/containers/xy-container/index.js

@@ -20,16 +20,19 @@ function VisXYContainerFC(props) {
       });
     }
   }), []);
-  const getConfig = () => ({
-    components: Array.from(container.current?.querySelectorAll("vis-component") ?? []).map((c) => c.__component__).filter(Boolean),
-    tooltip: container.current?.querySelector("vis-tooltip")?.__component__,
-    crosshair: container.current?.querySelector("vis-crosshair")?.__component__,
-    annotations: container.current?.querySelector("vis-annotations")?.__component__,
-    xAxis: Array.from(container.current?.querySelectorAll("vis-axis") ?? []).map((c) => c.__component__).find((c) => c.config.type === AxisType.X),
-    yAxis: Array.from(container.current?.querySelectorAll("vis-axis") ?? []).map((c) => c.__component__).find((c) => c.config.type === AxisType.Y),
-    margin: { top: 5, left: 5, right: 5, bottom: 5 },
-    ...props
-  });
+  const getConfig = () => {
+    const { data, className, style, children, ...restProps } = props;
+    return {
+      components: Array.from(container.current?.querySelectorAll("vis-component") ?? []).map((c) => c.__component__).filter(Boolean),
+      tooltip: container.current?.querySelector("vis-tooltip")?.__component__,
+      crosshair: container.current?.querySelector("vis-crosshair")?.__component__,
+      annotations: container.current?.querySelector("vis-annotations")?.__component__,
+      xAxis: Array.from(container.current?.querySelectorAll("vis-axis") ?? []).map((c) => c.__component__).find((c) => c.config.type === AxisType.X),
+      yAxis: Array.from(container.current?.querySelectorAll("vis-axis") ?? []).map((c) => c.__component__).find((c) => c.config.type === AxisType.Y),
+      margin: { top: 5, left: 5, right: 5, bottom: 5 },
+      ...restProps
+    };
+  };
   useEffect(() => {
     const c = new XYContainer(container.current, getConfig(), props.data);
     chartRef.current = c;
@@ -50,7 +53,7 @@ function VisXYContainerFC(props) {
   }, []);
   useEffect(() => {
     const preventRender = true;
-    if (props.data && props.data !== dataRef.current) {
+    if (props.data !== void 0 && props.data !== dataRef.current) {
       chartRef.current?.setData(props.data, preventRender);
       dataRef.current = props.data;
     }

package/containers/xy-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useMemo, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer } from '@unovis/ts/containers/xy-container'\nimport { XYContainerConfigInterface } from '@unovis/ts/containers/xy-container/config'\nimport { XYComponentCore } from '@unovis/ts/core/xy-component'\nimport { Tooltip } from '@unovis/ts/components/tooltip'\nimport { Crosshair } from '@unovis/ts/components/crosshair'\nimport { Axis } from '@unovis/ts/components/axis'\nimport { AxisType } from '@unovis/ts/components/axis/types'\nimport { Annotations } from '@unovis/ts/components/annotations'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\nimport { VisContainerContext, VisContainerContextValue } from 'src/utils/container'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n  data?: Datum[];\n  className?: string;\n  style?: React.CSSProperties | Record<`--${string}`, string | number>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const prevPropsRef = useRef<PropsWithChildren<VisXYContainerProps<Datum>>>({})\n  const chartRef = useRef<XYContainer<Datum> | undefined>(undefined)\n  const dataRef = useRef<Datum[] | undefined>(undefined)\n  const animationFrameRef = useRef<number | null>(null)\n  const renderRequestFrameRef = useRef<number | null>(null)\n\n  // Children ask for a re-render when their own config changes. We coalesce the requests into a single\n  // frame, and skip them when this container's props changed too, because the `updateContainer` call\n  // scheduled below renders on its own.\n  const containerContext = useMemo<VisContainerContextValue>(() => ({\n    requestRender: () => {\n      if (renderRequestFrameRef.current !== null) return\n      renderRequestFrameRef.current = requestAnimationFrame(() => {\n        renderRequestFrameRef.current = null\n        if (animationFrameRef.current !== null) return\n        chartRef.current?.render()\n      })\n    },\n  }), [])\n\n  const getConfig = (): XYContainerConfigInterface<Datum> => ({\n    components: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n      .map(c => c.__component__)\n      .filter(Boolean) as XYComponentCore<Datum>[],\n    tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n    crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n    annotations: container.current?.querySelector<VisComponentElement<Annotations>>('vis-annotations')?.__component__,\n    xAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.X),\n    yAxis: Array\n      .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n      .map(c => c.__component__)\n      .find(c => c.config.type === AxisType.Y),\n    margin: { top: 5, left: 5, right: 5, bottom: 5 },\n    ...props,\n  })\n\n  // On Mount\n  useEffect(() => {\n    const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n    chartRef.current = c\n    prevPropsRef.current = props\n    dataRef.current = props.data\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n        animationFrameRef.current = null\n        prevPropsRef.current = {}\n      }\n      if (renderRequestFrameRef.current !== null) {\n        cancelAnimationFrame(renderRequestFrameRef.current)\n        renderRequestFrameRef.current = null\n      }\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data && (props.data !== dataRef.current)) {\n      chartRef.current?.setData(props.data, preventRender)\n      dataRef.current = props.data\n    }\n\n    // Update and render\n    // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n    // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n    // the first render of its children (VisLine, VisArea, ...) meaning that their wrong instances (the ones\n    // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n    // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n    // components are available at `__component__`.\n    if (!arePropsEqual(prevPropsRef.current, props)) { // Checking whether the props have changed do avoid multiple renders\n      prevPropsRef.current = props\n      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = null\n        chartRef.current?.updateContainer(getConfig())\n      })\n    }\n  })\n\n  return (\n    <div ref={container} className={props.className} style={props.style}>\n      <VisContainerContext.Provider value={containerContext}>\n        {props.children}\n      </VisContainerContext.Provider>\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n  React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;;AAyBO,SAAS,iBAAyB,OAAmE;AAC1G,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,eAAe,OAAsD,EAAE;AAC7E,QAAM,WAAW,OAAuC,MAAS;AACjE,QAAM,UAAU,OAA4B,MAAS;AACrD,QAAM,oBAAoB,OAAsB,IAAI;AACpD,QAAM,wBAAwB,OAAsB,IAAI;AAKxD,QAAM,mBAAmB,QAAkC,OAAO;AAAA,IAChE,eAAe,MAAM;AACnB,UAAI,sBAAsB,YAAY,KAAM;AAC5C,4BAAsB,UAAU,sBAAsB,MAAM;AAC1D,8BAAsB,UAAU;AAChC,YAAI,kBAAkB,YAAY,KAAM;AACxC,iBAAS,SAAS,OAAA;AAAA,MACpB,CAAC;AAAA,IACH;AAAA,EAAA,IACE,CAAA,CAAE;AAEN,QAAM,YAAY,OAA0C;AAAA,IAC1D,YAAY,MACT,KAAK,UAAU,SAAS,iBAA8D,eAAe,KAAK,CAAA,CAAE,EAC5G,IAAI,CAAA,MAAK,EAAE,aAAa,EACxB,OAAO,OAAO;AAAA,IACjB,SAAS,UAAU,SAAS,cAA4C,aAAa,GAAG;AAAA,IACxF,WAAW,UAAU,SAAS,cAAqD,eAAe,GAAG;AAAA,IACrG,aAAa,UAAU,SAAS,cAAgD,iBAAiB,GAAG;AAAA,IACpG,OAAO,MACJ,KAAK,UAAU,SAAS,iBAAmD,UAAU,KAAK,EAAE,EAC5F,IAAI,CAAA,MAAK,EAAE,aAAa,EACxB,KAAK,OAAK,EAAE,OAAO,SAAS,SAAS,CAAC;AAAA,IACzC,OAAO,MACJ,KAAK,UAAU,SAAS,iBAAmD,UAAU,KAAK,EAAE,EAC5F,IAAI,CAAA,MAAK,EAAE,aAAa,EACxB,KAAK,OAAK,EAAE,OAAO,SAAS,SAAS,CAAC;AAAA,IACzC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAA;AAAA,IAC7C,GAAG;AAAA,EAAA;AAIL,YAAU,MAAM;AACd,UAAM,IAAI,IAAI,YAAmB,UAAU,SAA2B,UAAA,GAAa,MAAM,IAAI;AAC7F,aAAS,UAAU;AACnB,iBAAa,UAAU;AACvB,YAAQ,UAAU,MAAM;AAExB,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,6BAAqB,kBAAkB,OAAO;AAC9C,0BAAkB,UAAU;AAC5B,qBAAa,UAAU,CAAA;AAAA,MACzB;AACA,UAAI,sBAAsB,YAAY,MAAM;AAC1C,6BAAqB,sBAAsB,OAAO;AAClD,8BAAsB,UAAU;AAAA,MAClC;AACA,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,gBAAgB;AAGtB,QAAI,MAAM,QAAS,MAAM,SAAS,QAAQ,SAAU;AAClD,eAAS,SAAS,QAAQ,MAAM,MAAM,aAAa;AACnD,cAAQ,UAAU,MAAM;AAAA,IAC1B;AASA,QAAI,CAAC,cAAc,aAAa,SAAS,KAAK,GAAG;AAC/C,mBAAa,UAAU;AACvB,UAAI,kBAAkB,QAAS,sBAAqB,kBAAkB,OAAO;AAC7E,wBAAkB,UAAU,sBAAsB,MAAM;AACtD,0BAAkB,UAAU;AAC5B,iBAAS,SAAS,gBAAgB,WAAW;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,6CACG,OAAA,EAAI,KAAK,WAAW,WAAW,MAAM,WAAW,OAAO,MAAM,MAAA,GAC5D,sBAAA,cAAC,oBAAoB,UAApB,EAA6B,OAAO,iBAAA,GAClC,MAAM,QACT,CACF;AAEJ;AAIO,MAAM,iBACX,MAAM,KAAK,kBAAkB,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useMemo, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer } from '@unovis/ts/containers/xy-container'\nimport { XYContainerConfigInterface } from '@unovis/ts/containers/xy-container/config'\nimport { XYComponentCore } from '@unovis/ts/core/xy-component'\nimport { Tooltip } from '@unovis/ts/components/tooltip'\nimport { Crosshair } from '@unovis/ts/components/crosshair'\nimport { Axis } from '@unovis/ts/components/axis'\nimport { AxisType } from '@unovis/ts/components/axis/types'\nimport { Annotations } from '@unovis/ts/components/annotations'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\nimport { VisContainerContext, VisContainerContextValue } from 'src/utils/container'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n  data?: Datum[];\n  className?: string;\n  style?: React.CSSProperties | Record<`--${string}`, string | number>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const prevPropsRef = useRef<PropsWithChildren<VisXYContainerProps<Datum>>>({})\n  const chartRef = useRef<XYContainer<Datum> | undefined>(undefined)\n  const dataRef = useRef<Datum[] | undefined>(undefined)\n  const animationFrameRef = useRef<number | null>(null)\n  const renderRequestFrameRef = useRef<number | null>(null)\n\n  // Children ask for a re-render when their own config changes. We coalesce the requests into a single\n  // frame, and skip them when this container's props changed too, because the `updateContainer` call\n  // scheduled below renders on its own.\n  const containerContext = useMemo<VisContainerContextValue>(() => ({\n    requestRender: () => {\n      if (renderRequestFrameRef.current !== null) return\n      renderRequestFrameRef.current = requestAnimationFrame(() => {\n        renderRequestFrameRef.current = null\n        if (animationFrameRef.current !== null) return\n        chartRef.current?.render()\n      })\n    },\n  }), [])\n\n  const getConfig = (): XYContainerConfigInterface<Datum> => {\n    // Strip the props that are not container config properties (deep-cloning the dataset\n    // or React elements into the config would be both wrong and expensive)\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { data, className, style, children, ...restProps } = props\n\n    return {\n      components: Array\n        .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n        .map(c => c.__component__)\n        .filter(Boolean) as XYComponentCore<Datum>[],\n      tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n      crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n      annotations: container.current?.querySelector<VisComponentElement<Annotations>>('vis-annotations')?.__component__,\n      xAxis: Array\n        .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n        .map(c => c.__component__)\n        .find(c => c.config.type === AxisType.X),\n      yAxis: Array\n        .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n        .map(c => c.__component__)\n        .find(c => c.config.type === AxisType.Y),\n      margin: { top: 5, left: 5, right: 5, bottom: 5 },\n      ...restProps,\n    }\n  }\n\n  // On Mount\n  useEffect(() => {\n    const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n    chartRef.current = c\n    prevPropsRef.current = props\n    dataRef.current = props.data\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n        animationFrameRef.current = null\n        prevPropsRef.current = {}\n      }\n      if (renderRequestFrameRef.current !== null) {\n        cancelAnimationFrame(renderRequestFrameRef.current)\n        renderRequestFrameRef.current = null\n      }\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const preventRender = true\n\n    // Set new Data without re-render\n    if (props.data !== undefined && (props.data !== dataRef.current)) {\n      chartRef.current?.setData(props.data, preventRender)\n      dataRef.current = props.data\n    }\n\n    // Update and render\n    // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n    // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n    // the first render of its children (VisLine, VisArea, ...) meaning that their wrong instances (the ones\n    // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n    // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n    // components are available at `__component__`.\n    if (!arePropsEqual(prevPropsRef.current, props)) { // Checking whether the props have changed do avoid multiple renders\n      prevPropsRef.current = props\n      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = null\n        chartRef.current?.updateContainer(getConfig())\n      })\n    }\n  })\n\n  return (\n    <div ref={container} className={props.className} style={props.style}>\n      <VisContainerContext.Provider value={containerContext}>\n        {props.children}\n      </VisContainerContext.Provider>\n    </div>\n  )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n  React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;;AAyBO,SAAS,iBAAyB,OAAmE;AAC1G,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,eAAe,OAAsD,EAAE;AAC7E,QAAM,WAAW,OAAuC,MAAS;AACjE,QAAM,UAAU,OAA4B,MAAS;AACrD,QAAM,oBAAoB,OAAsB,IAAI;AACpD,QAAM,wBAAwB,OAAsB,IAAI;AAKxD,QAAM,mBAAmB,QAAkC,OAAO;AAAA,IAChE,eAAe,MAAM;AACnB,UAAI,sBAAsB,YAAY,KAAM;AAC5C,4BAAsB,UAAU,sBAAsB,MAAM;AAC1D,8BAAsB,UAAU;AAChC,YAAI,kBAAkB,YAAY,KAAM;AACxC,iBAAS,SAAS,OAAA;AAAA,MACpB,CAAC;AAAA,IACH;AAAA,EAAA,IACE,CAAA,CAAE;AAEN,QAAM,YAAY,MAAyC;AAIzD,UAAM,EAAE,MAAM,WAAW,OAAO,UAAU,GAAG,cAAc;AAE3D,WAAO;AAAA,MACL,YAAY,MACT,KAAK,UAAU,SAAS,iBAA8D,eAAe,KAAK,CAAA,CAAE,EAC5G,IAAI,CAAA,MAAK,EAAE,aAAa,EACxB,OAAO,OAAO;AAAA,MACjB,SAAS,UAAU,SAAS,cAA4C,aAAa,GAAG;AAAA,MACxF,WAAW,UAAU,SAAS,cAAqD,eAAe,GAAG;AAAA,MACrG,aAAa,UAAU,SAAS,cAAgD,iBAAiB,GAAG;AAAA,MACpG,OAAO,MACJ,KAAK,UAAU,SAAS,iBAAmD,UAAU,KAAK,EAAE,EAC5F,IAAI,CAAA,MAAK,EAAE,aAAa,EACxB,KAAK,OAAK,EAAE,OAAO,SAAS,SAAS,CAAC;AAAA,MACzC,OAAO,MACJ,KAAK,UAAU,SAAS,iBAAmD,UAAU,KAAK,EAAE,EAC5F,IAAI,CAAA,MAAK,EAAE,aAAa,EACxB,KAAK,OAAK,EAAE,OAAO,SAAS,SAAS,CAAC;AAAA,MACzC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAA;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,EAEP;AAGA,YAAU,MAAM;AACd,UAAM,IAAI,IAAI,YAAmB,UAAU,SAA2B,UAAA,GAAa,MAAM,IAAI;AAC7F,aAAS,UAAU;AACnB,iBAAa,UAAU;AACvB,YAAQ,UAAU,MAAM;AAExB,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,6BAAqB,kBAAkB,OAAO;AAC9C,0BAAkB,UAAU;AAC5B,qBAAa,UAAU,CAAA;AAAA,MACzB;AACA,UAAI,sBAAsB,YAAY,MAAM;AAC1C,6BAAqB,sBAAsB,OAAO;AAClD,8BAAsB,UAAU;AAAA,MAClC;AACA,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,gBAAgB;AAGtB,QAAI,MAAM,SAAS,UAAc,MAAM,SAAS,QAAQ,SAAU;AAChE,eAAS,SAAS,QAAQ,MAAM,MAAM,aAAa;AACnD,cAAQ,UAAU,MAAM;AAAA,IAC1B;AASA,QAAI,CAAC,cAAc,aAAa,SAAS,KAAK,GAAG;AAC/C,mBAAa,UAAU;AACvB,UAAI,kBAAkB,QAAS,sBAAqB,kBAAkB,OAAO;AAC7E,wBAAkB,UAAU,sBAAsB,MAAM;AACtD,0BAAkB,UAAU;AAC5B,iBAAS,SAAS,gBAAgB,WAAW;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,6CACG,OAAA,EAAI,KAAK,WAAW,WAAW,MAAM,WAAW,OAAO,MAAM,MAAA,GAC5D,sBAAA,cAAC,oBAAoB,UAApB,EAA6B,OAAO,iBAAA,GAClC,MAAM,QACT,CACF;AAEJ;AAIO,MAAM,iBACX,MAAM,KAAK,kBAAkB,aAAa;"}

package/html-components/bullet-legend/index.js

@@ -5,9 +5,10 @@ const VisBulletLegendSelectors = BulletLegend.selectors;
 function VisBulletLegendFC(props, fRef) {
   const ref = useRef(null);
   const componentRef = useRef(void 0);
+  const { className, ...config } = props;
   useEffect(() => {
     const element = ref.current;
-    const c = new BulletLegend(ref.current, { ...props, renderIntoProvidedDomNode: true });
+    const c = new BulletLegend(ref.current, { ...config, renderIntoProvidedDomNode: true });
     componentRef.current = c;
     element.__component__ = c;
     return () => {
@@ -17,7 +18,7 @@ function VisBulletLegendFC(props, fRef) {
   }, []);
   useEffect(() => {
     const component = componentRef.current;
-    component?.setConfig(props);
+    component?.setConfig(config);
   });
   useImperativeHandle(fRef, () => ({ get component() {
     return componentRef.current;

package/html-components/bullet-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/bullet-legend/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { BulletLegend } from '@unovis/ts/components/bullet-legend'\nimport { BulletLegendConfigInterface } from '@unovis/ts/components/bullet-legend/config'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisBulletLegendRef = {\n  component?: BulletLegend;\n}\n\nexport type VisBulletLegendProps = BulletLegendConfigInterface & {\n  ref?: Ref<VisBulletLegendRef>;\n  className?: string;\n}\n\nexport const VisBulletLegendSelectors = BulletLegend.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisBulletLegendFC (props: VisBulletLegendProps, fRef: ForwardedRef<VisBulletLegendRef>): ReactElement {\n  const ref = useRef<VisComponentElement<BulletLegend, HTMLDivElement>>(null)\n  const componentRef = useRef<BulletLegend | undefined>(undefined)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<BulletLegend, HTMLDivElement>)\n\n    const c = new BulletLegend(ref.current as VisComponentElement<BulletLegend, HTMLDivElement>, { ...props, renderIntoProvidedDomNode: true })\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisBulletLegend: ((props: VisBulletLegendProps) => JSX.Element | null) = React.memo(React.forwardRef(VisBulletLegendFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAoBO,MAAM,2BAA2B,aAAa;AAGrD,SAAS,kBAAmB,OAA6B,MAAsD;AAC7G,QAAM,MAAM,OAA0D,IAAI;AAC1E,QAAM,eAAe,OAAiC,MAAS;AAG/D,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,aAAa,IAAI,SAA8D,EAAE,GAAG,OAAO,2BAA2B,MAAM;AAC1I,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAE/B,eAAW,UAAU,KAAK;AAAA,EAC5B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,kBAAyE,MAAM,KAAK,MAAM,WAAW,iBAAiB,GAAG,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/bullet-legend/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { BulletLegend } from '@unovis/ts/components/bullet-legend'\nimport { BulletLegendConfigInterface } from '@unovis/ts/components/bullet-legend/config'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisBulletLegendRef = {\n  component?: BulletLegend;\n}\n\nexport type VisBulletLegendProps = BulletLegendConfigInterface & {\n  ref?: Ref<VisBulletLegendRef>;\n  className?: string;\n}\n\nexport const VisBulletLegendSelectors = BulletLegend.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisBulletLegendFC (props: VisBulletLegendProps, fRef: ForwardedRef<VisBulletLegendRef>): ReactElement {\n  const ref = useRef<VisComponentElement<BulletLegend, HTMLDivElement>>(null)\n  const componentRef = useRef<BulletLegend | undefined>(undefined)\n  // Separate the config properties from the props that should not be passed to the component\n  const { className, ...config } = props\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<BulletLegend, HTMLDivElement>)\n\n    const c = new BulletLegend(ref.current as VisComponentElement<BulletLegend, HTMLDivElement>, { ...config, renderIntoProvidedDomNode: true })\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n\n    component?.setConfig(config)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisBulletLegend: ((props: VisBulletLegendProps) => JSX.Element | null) = React.memo(React.forwardRef(VisBulletLegendFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAoBO,MAAM,2BAA2B,aAAa;AAGrD,SAAS,kBAAmB,OAA6B,MAAsD;AAC7G,QAAM,MAAM,OAA0D,IAAI;AAC1E,QAAM,eAAe,OAAiC,MAAS;AAE/D,QAAM,EAAE,WAAW,GAAG,OAAA,IAAW;AAGjC,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,aAAa,IAAI,SAA8D,EAAE,GAAG,QAAQ,2BAA2B,MAAM;AAC3I,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAE/B,eAAW,UAAU,MAAM;AAAA,EAC7B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,kBAAyE,MAAM,KAAK,MAAM,WAAW,iBAAiB,GAAG,aAAa;"}

package/html-components/flow-legend/index.js

@@ -5,9 +5,10 @@ const VisFlowLegendSelectors = FlowLegend.selectors;
 function VisFlowLegendFC(props, fRef) {
   const ref = useRef(null);
   const componentRef = useRef(void 0);
+  const { className, ...config } = props;
   useEffect(() => {
     const element = ref.current;
-    const c = new FlowLegend(ref.current, { ...props, renderIntoProvidedDomNode: true });
+    const c = new FlowLegend(ref.current, { ...config, renderIntoProvidedDomNode: true });
     componentRef.current = c;
     element.__component__ = c;
     return () => {
@@ -17,7 +18,7 @@ function VisFlowLegendFC(props, fRef) {
   }, []);
   useEffect(() => {
     const component = componentRef.current;
-    component?.setConfig(props);
+    component?.setConfig(config);
   });
   useImperativeHandle(fRef, () => ({ get component() {
     return componentRef.current;

package/html-components/flow-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/flow-legend/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { FlowLegend } from '@unovis/ts/components/flow-legend'\nimport { FlowLegendConfigInterface } from '@unovis/ts/components/flow-legend/config'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisFlowLegendRef = {\n  component?: FlowLegend;\n}\n\nexport type VisFlowLegendProps = FlowLegendConfigInterface & {\n  ref?: Ref<VisFlowLegendRef>;\n  className?: string;\n}\n\nexport const VisFlowLegendSelectors = FlowLegend.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisFlowLegendFC (props: VisFlowLegendProps, fRef: ForwardedRef<VisFlowLegendRef>): ReactElement {\n  const ref = useRef<VisComponentElement<FlowLegend, HTMLDivElement>>(null)\n  const componentRef = useRef<FlowLegend | undefined>(undefined)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<FlowLegend, HTMLDivElement>)\n\n    const c = new FlowLegend(ref.current as VisComponentElement<FlowLegend, HTMLDivElement>, { ...props, renderIntoProvidedDomNode: true })\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisFlowLegend: ((props: VisFlowLegendProps) => JSX.Element | null) = React.memo(React.forwardRef(VisFlowLegendFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAoBO,MAAM,yBAAyB,WAAW;AAGjD,SAAS,gBAAiB,OAA2B,MAAoD;AACvG,QAAM,MAAM,OAAwD,IAAI;AACxE,QAAM,eAAe,OAA+B,MAAS;AAG7D,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,WAAW,IAAI,SAA4D,EAAE,GAAG,OAAO,2BAA2B,MAAM;AACtI,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAE/B,eAAW,UAAU,KAAK;AAAA,EAC5B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,gBAAqE,MAAM,KAAK,MAAM,WAAW,eAAe,GAAG,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/flow-legend/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { FlowLegend } from '@unovis/ts/components/flow-legend'\nimport { FlowLegendConfigInterface } from '@unovis/ts/components/flow-legend/config'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisFlowLegendRef = {\n  component?: FlowLegend;\n}\n\nexport type VisFlowLegendProps = FlowLegendConfigInterface & {\n  ref?: Ref<VisFlowLegendRef>;\n  className?: string;\n}\n\nexport const VisFlowLegendSelectors = FlowLegend.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisFlowLegendFC (props: VisFlowLegendProps, fRef: ForwardedRef<VisFlowLegendRef>): ReactElement {\n  const ref = useRef<VisComponentElement<FlowLegend, HTMLDivElement>>(null)\n  const componentRef = useRef<FlowLegend | undefined>(undefined)\n  // Separate the config properties from the props that should not be passed to the component\n  const { className, ...config } = props\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<FlowLegend, HTMLDivElement>)\n\n    const c = new FlowLegend(ref.current as VisComponentElement<FlowLegend, HTMLDivElement>, { ...config, renderIntoProvidedDomNode: true })\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n\n    component?.setConfig(config)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisFlowLegend: ((props: VisFlowLegendProps) => JSX.Element | null) = React.memo(React.forwardRef(VisFlowLegendFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAoBO,MAAM,yBAAyB,WAAW;AAGjD,SAAS,gBAAiB,OAA2B,MAAoD;AACvG,QAAM,MAAM,OAAwD,IAAI;AACxE,QAAM,eAAe,OAA+B,MAAS;AAE7D,QAAM,EAAE,WAAW,GAAG,OAAA,IAAW;AAGjC,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,WAAW,IAAI,SAA4D,EAAE,GAAG,QAAQ,2BAA2B,MAAM;AACvI,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAE/B,eAAW,UAAU,MAAM;AAAA,EAC7B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,gBAAqE,MAAM,KAAK,MAAM,WAAW,eAAe,GAAG,aAAa;"}

package/html-components/leaflet-flow-map/index.js

@@ -5,9 +5,10 @@ const VisLeafletFlowMapSelectors = LeafletFlowMap.selectors;
 function VisLeafletFlowMapFC(props, fRef) {
   const ref = useRef(null);
   const componentRef = useRef(void 0);
+  const { data, className, ...config } = props;
   useEffect(() => {
     const element = ref.current;
-    const c = new LeafletFlowMap(ref.current, props, props.data);
+    const c = new LeafletFlowMap(ref.current, config, data);
     componentRef.current = c;
     element.__component__ = c;
     return () => {
@@ -17,8 +18,8 @@ function VisLeafletFlowMapFC(props, fRef) {
   }, []);
   useEffect(() => {
     const component = componentRef.current;
-    if (props.data) component?.setData(props.data);
-    component?.setConfig(props);
+    if (data !== void 0) component?.setData(data);
+    component?.setConfig(config);
   });
   useImperativeHandle(fRef, () => ({ get component() {
     return componentRef.current;

package/html-components/leaflet-flow-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-flow-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { LeafletFlowMap } from '@unovis/ts/components/leaflet-flow-map'\nimport { LeafletFlowMapConfigInterface } from '@unovis/ts/components/leaflet-flow-map/config'\nimport { GenericDataRecord } from '@unovis/ts/types/data'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLeafletFlowMapRef<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> = {\n  component?: LeafletFlowMap<PointDatum, FlowDatum>;\n}\n\nexport type VisLeafletFlowMapProps<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {\n  data?: { points: PointDatum[]; flows?: FlowDatum[] };\n  ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;\n  className?: string;\n}\n\nexport const VisLeafletFlowMapSelectors = LeafletFlowMap.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLeafletFlowMapFC<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> (props: VisLeafletFlowMapProps<PointDatum, FlowDatum>, fRef: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>): ReactElement {\n  const ref = useRef<VisComponentElement<LeafletFlowMap<PointDatum, FlowDatum>, HTMLDivElement>>(null)\n  const componentRef = useRef<LeafletFlowMap<PointDatum, FlowDatum> | undefined>(undefined)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<LeafletFlowMap<PointDatum, FlowDatum>, HTMLDivElement>)\n\n    const c = new LeafletFlowMap<PointDatum, FlowDatum>(ref.current as VisComponentElement<LeafletFlowMap<PointDatum, FlowDatum>, HTMLDivElement>, props, props.data)\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletFlowMap: (<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAsBO,MAAM,6BAA6B,eAAe;AAGzD,SAAS,oBAAgG,OAAsD,MAA+E;AAC5O,QAAM,MAAM,OAAmF,IAAI;AACnG,QAAM,eAAe,OAA0D,MAAS;AAGxF,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,eAAsC,IAAI,SAAuF,OAAO,MAAM,IAAI;AAChK,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,MAAM,KAAM,YAAW,QAAQ,MAAM,IAAI;AAC7C,eAAW,UAAU,KAAK;AAAA,EAC5B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,oBAA+K,MAAM,KAAK,MAAM,WAAW,mBAAmB,GAAG,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-flow-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { LeafletFlowMap } from '@unovis/ts/components/leaflet-flow-map'\nimport { LeafletFlowMapConfigInterface } from '@unovis/ts/components/leaflet-flow-map/config'\nimport { GenericDataRecord } from '@unovis/ts/types/data'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLeafletFlowMapRef<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> = {\n  component?: LeafletFlowMap<PointDatum, FlowDatum>;\n}\n\nexport type VisLeafletFlowMapProps<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {\n  data?: { points: PointDatum[]; flows?: FlowDatum[] };\n  ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;\n  className?: string;\n}\n\nexport const VisLeafletFlowMapSelectors = LeafletFlowMap.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLeafletFlowMapFC<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> (props: VisLeafletFlowMapProps<PointDatum, FlowDatum>, fRef: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>): ReactElement {\n  const ref = useRef<VisComponentElement<LeafletFlowMap<PointDatum, FlowDatum>, HTMLDivElement>>(null)\n  const componentRef = useRef<LeafletFlowMap<PointDatum, FlowDatum> | undefined>(undefined)\n  // Separate the config properties from the props that should not be passed to the component\n  const { data, className, ...config } = props\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<LeafletFlowMap<PointDatum, FlowDatum>, HTMLDivElement>)\n\n    const c = new LeafletFlowMap<PointDatum, FlowDatum>(ref.current as VisComponentElement<LeafletFlowMap<PointDatum, FlowDatum>, HTMLDivElement>, config, data)\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n    if (data !== undefined) component?.setData(data)\n    component?.setConfig(config)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletFlowMap: (<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAsBO,MAAM,6BAA6B,eAAe;AAGzD,SAAS,oBAAgG,OAAsD,MAA+E;AAC5O,QAAM,MAAM,OAAmF,IAAI;AACnG,QAAM,eAAe,OAA0D,MAAS;AAExF,QAAM,EAAE,MAAM,WAAW,GAAG,WAAW;AAGvC,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,eAAsC,IAAI,SAAuF,QAAQ,IAAI;AAC3J,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,SAAS,OAAW,YAAW,QAAQ,IAAI;AAC/C,eAAW,UAAU,MAAM;AAAA,EAC7B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,oBAA+K,MAAM,KAAK,MAAM,WAAW,mBAAmB,GAAG,aAAa;"}

package/html-components/leaflet-map/index.js

@@ -5,9 +5,10 @@ const VisLeafletMapSelectors = LeafletMap.selectors;
 function VisLeafletMapFC(props, fRef) {
   const ref = useRef(null);
   const componentRef = useRef(void 0);
+  const { data, className, ...config } = props;
   useEffect(() => {
     const element = ref.current;
-    const c = new LeafletMap(ref.current, props, props.data);
+    const c = new LeafletMap(ref.current, config, data);
     componentRef.current = c;
     element.__component__ = c;
     return () => {
@@ -17,8 +18,8 @@ function VisLeafletMapFC(props, fRef) {
   }, []);
   useEffect(() => {
     const component = componentRef.current;
-    if (props.data) component?.setData(props.data);
-    component?.setConfig(props);
+    if (data !== void 0) component?.setData(data);
+    component?.setConfig(config);
   });
   useImperativeHandle(fRef, () => ({ get component() {
     return componentRef.current;

package/html-components/leaflet-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { LeafletMap } from '@unovis/ts/components/leaflet-map'\nimport { LeafletMapConfigInterface } from '@unovis/ts/components/leaflet-map/config'\nimport { GenericDataRecord } from '@unovis/ts/types/data'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLeafletMapRef<Datum extends GenericDataRecord> = {\n  component?: LeafletMap<Datum>;\n}\n\nexport type VisLeafletMapProps<Datum extends GenericDataRecord> = LeafletMapConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLeafletMapRef<Datum>>;\n  className?: string;\n}\n\nexport const VisLeafletMapSelectors = LeafletMap.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLeafletMapFC<Datum extends GenericDataRecord> (props: VisLeafletMapProps<Datum>, fRef: ForwardedRef<VisLeafletMapRef<Datum>>): ReactElement {\n  const ref = useRef<VisComponentElement<LeafletMap<Datum>, HTMLDivElement>>(null)\n  const componentRef = useRef<LeafletMap<Datum> | undefined>(undefined)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<LeafletMap<Datum>, HTMLDivElement>)\n\n    const c = new LeafletMap<Datum>(ref.current as VisComponentElement<LeafletMap<Datum>, HTMLDivElement>, props, props.data)\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletMap: (<Datum extends GenericDataRecord>(props: VisLeafletMapProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAsBO,MAAM,yBAAyB,WAAW;AAGjD,SAAS,gBAAkD,OAAkC,MAA2D;AACtJ,QAAM,MAAM,OAA+D,IAAI;AAC/E,QAAM,eAAe,OAAsC,MAAS;AAGpE,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,WAAkB,IAAI,SAAmE,OAAO,MAAM,IAAI;AACxH,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,MAAM,KAAM,YAAW,QAAQ,MAAM,IAAI;AAC7C,eAAW,UAAU,KAAK;AAAA,EAC5B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,gBAA6G,MAAM,KAAK,MAAM,WAAW,eAAe,GAAG,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { LeafletMap } from '@unovis/ts/components/leaflet-map'\nimport { LeafletMapConfigInterface } from '@unovis/ts/components/leaflet-map/config'\nimport { GenericDataRecord } from '@unovis/ts/types/data'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLeafletMapRef<Datum extends GenericDataRecord> = {\n  component?: LeafletMap<Datum>;\n}\n\nexport type VisLeafletMapProps<Datum extends GenericDataRecord> = LeafletMapConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLeafletMapRef<Datum>>;\n  className?: string;\n}\n\nexport const VisLeafletMapSelectors = LeafletMap.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLeafletMapFC<Datum extends GenericDataRecord> (props: VisLeafletMapProps<Datum>, fRef: ForwardedRef<VisLeafletMapRef<Datum>>): ReactElement {\n  const ref = useRef<VisComponentElement<LeafletMap<Datum>, HTMLDivElement>>(null)\n  const componentRef = useRef<LeafletMap<Datum> | undefined>(undefined)\n  // Separate the config properties from the props that should not be passed to the component\n  const { data, className, ...config } = props\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<LeafletMap<Datum>, HTMLDivElement>)\n\n    const c = new LeafletMap<Datum>(ref.current as VisComponentElement<LeafletMap<Datum>, HTMLDivElement>, config, data)\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n    if (data !== undefined) component?.setData(data)\n    component?.setConfig(config)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletMap: (<Datum extends GenericDataRecord>(props: VisLeafletMapProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAsBO,MAAM,yBAAyB,WAAW;AAGjD,SAAS,gBAAkD,OAAkC,MAA2D;AACtJ,QAAM,MAAM,OAA+D,IAAI;AAC/E,QAAM,eAAe,OAAsC,MAAS;AAEpE,QAAM,EAAE,MAAM,WAAW,GAAG,WAAW;AAGvC,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,WAAkB,IAAI,SAAmE,QAAQ,IAAI;AACnH,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,SAAS,OAAW,YAAW,QAAQ,IAAI;AAC/C,eAAW,UAAU,MAAM;AAAA,EAC7B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,gBAA6G,MAAM,KAAK,MAAM,WAAW,eAAe,GAAG,aAAa;"}

package/html-components/rolling-pin-legend/index.js

@@ -5,9 +5,10 @@ const VisRollingPinLegendSelectors = RollingPinLegend.selectors;
 function VisRollingPinLegendFC(props, fRef) {
   const ref = useRef(null);
   const componentRef = useRef(void 0);
+  const { className, ...config } = props;
   useEffect(() => {
     const element = ref.current;
-    const c = new RollingPinLegend(ref.current, props);
+    const c = new RollingPinLegend(ref.current, config);
     componentRef.current = c;
     element.__component__ = c;
     return () => {
@@ -17,7 +18,7 @@ function VisRollingPinLegendFC(props, fRef) {
   }, []);
   useEffect(() => {
     const component = componentRef.current;
-    component?.setConfig(props);
+    component?.setConfig(config);
   });
   useImperativeHandle(fRef, () => ({ get component() {
     return componentRef.current;

package/html-components/rolling-pin-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/html-components/rolling-pin-legend/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { RollingPinLegend } from '@unovis/ts/components/rolling-pin-legend'\nimport { RollingPinLegendConfigInterface } from '@unovis/ts/components/rolling-pin-legend/config'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisRollingPinLegendRef = {\n  component?: RollingPinLegend;\n}\n\nexport type VisRollingPinLegendProps = RollingPinLegendConfigInterface & {\n  ref?: Ref<VisRollingPinLegendRef>;\n  className?: string;\n}\n\nexport const VisRollingPinLegendSelectors = RollingPinLegend.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisRollingPinLegendFC (props: VisRollingPinLegendProps, fRef: ForwardedRef<VisRollingPinLegendRef>): ReactElement {\n  const ref = useRef<VisComponentElement<RollingPinLegend, HTMLDivElement>>(null)\n  const componentRef = useRef<RollingPinLegend | undefined>(undefined)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<RollingPinLegend, HTMLDivElement>)\n\n    const c = new RollingPinLegend(ref.current as VisComponentElement<RollingPinLegend, HTMLDivElement>, props)\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisRollingPinLegend: ((props: VisRollingPinLegendProps) => JSX.Element | null) = React.memo(React.forwardRef(VisRollingPinLegendFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAoBO,MAAM,+BAA+B,iBAAiB;AAG7D,SAAS,sBAAuB,OAAiC,MAA0D;AACzH,QAAM,MAAM,OAA8D,IAAI;AAC9E,QAAM,eAAe,OAAqC,MAAS;AAGnE,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,iBAAiB,IAAI,SAAkE,KAAK;AAC1G,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAE/B,eAAW,UAAU,KAAK;AAAA,EAC5B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,sBAAiF,MAAM,KAAK,MAAM,WAAW,qBAAqB,GAAG,aAAa;"}
+{"version":3,"file":"index.js","sources":["../../../src/html-components/rolling-pin-legend/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, ReactElement, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { RollingPinLegend } from '@unovis/ts/components/rolling-pin-legend'\nimport { RollingPinLegendConfigInterface } from '@unovis/ts/components/rolling-pin-legend/config'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisRollingPinLegendRef = {\n  component?: RollingPinLegend;\n}\n\nexport type VisRollingPinLegendProps = RollingPinLegendConfigInterface & {\n  ref?: Ref<VisRollingPinLegendRef>;\n  className?: string;\n}\n\nexport const VisRollingPinLegendSelectors = RollingPinLegend.selectors\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisRollingPinLegendFC (props: VisRollingPinLegendProps, fRef: ForwardedRef<VisRollingPinLegendRef>): ReactElement {\n  const ref = useRef<VisComponentElement<RollingPinLegend, HTMLDivElement>>(null)\n  const componentRef = useRef<RollingPinLegend | undefined>(undefined)\n  // Separate the config properties from the props that should not be passed to the component\n  const { className, ...config } = props\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<RollingPinLegend, HTMLDivElement>)\n\n    const c = new RollingPinLegend(ref.current as VisComponentElement<RollingPinLegend, HTMLDivElement>, config)\n    componentRef.current = c\n    element.__component__ = c\n\n    return () => {\n      componentRef.current = undefined\n      c.destroy()\n    }\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = componentRef.current\n\n    component?.setConfig(config)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return componentRef.current } }), [])\n  return <div className={props.className} ref={ref} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n//  and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisRollingPinLegend: ((props: VisRollingPinLegendProps) => JSX.Element | null) = React.memo(React.forwardRef(VisRollingPinLegendFC), arePropsEqual)\n"],"names":[],"mappings":";;;AAoBO,MAAM,+BAA+B,iBAAiB;AAG7D,SAAS,sBAAuB,OAAiC,MAA0D;AACzH,QAAM,MAAM,OAA8D,IAAI;AAC9E,QAAM,eAAe,OAAqC,MAAS;AAEnE,QAAM,EAAE,WAAW,GAAG,OAAA,IAAW;AAGjC,YAAU,MAAM;AACd,UAAM,UAAW,IAAI;AAErB,UAAM,IAAI,IAAI,iBAAiB,IAAI,SAAkE,MAAM;AAC3G,iBAAa,UAAU;AACvB,YAAQ,gBAAgB;AAExB,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,QAAE,QAAA;AAAA,IACJ;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAE/B,eAAW,UAAU,MAAM;AAAA,EAC7B,CAAC;AAED,sBAAoB,MAAM,OAAO,EAAE,IAAI,YAAa;AAAE,WAAO,aAAa;AAAA,EAAQ,EAAA,IAAM,EAAE;AAC1F,SAAO,sBAAA,cAAC,OAAA,EAAI,WAAW,MAAM,WAAW,KAAU;AACpD;AAIO,MAAM,sBAAiF,MAAM,KAAK,MAAM,WAAW,qBAAqB,GAAG,aAAa;"}

package/index.js

@@ -17,6 +17,7 @@ import { VisBoxplot, VisBoxplotSelectors } from "./components/boxplot/index.js";
 import { VisBrush, VisBrushSelectors } from "./components/brush/index.js";
 import { VisBulletLegend, VisBulletLegendSelectors } from "./html-components/bullet-legend/index.js";
 import { VisChordDiagram, VisChordDiagramSelectors } from "./components/chord-diagram/index.js";
+import { VisCircularBar, VisCircularBarSelectors } from "./components/circular-bar/index.js";
 import { VisCrosshair, VisCrosshairSelectors } from "./components/crosshair/index.js";
 import { VisDonut, VisDonutSelectors } from "./components/donut/index.js";
 import { VisFlowLegend, VisFlowLegendSelectors } from "./html-components/flow-legend/index.js";
@@ -58,6 +59,8 @@ export {
   VisBulletLegendSelectors,
   VisChordDiagram,
   VisChordDiagramSelectors,
+  VisCircularBar,
+  VisCircularBarSelectors,
   VisCrosshair,
   VisCrosshairSelectors,
   VisDonut,

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/react",
   "description": "Modular data visualization framework for React, Angular, Svelte, Vue, Solid, and vanilla TypeScript or JavaScript",
-  "version": "1.7.1",
+  "version": "1.8.0-vpd-beta.0",
   "packageManager": "pnpm@10.23.0",
   "repository": {
     "type": "git",
@@ -35,13 +35,12 @@
   ],
   "scripts": {
     "build": "vite build; rm -rf dist/.cache; cp LICENSE README.md package.json ./dist",
-    "tsc": "tsc",
     "generate": "tsx ./autogen/index.ts",
     "publish:dist": "cd ./dist; npm publish",
     "license:check": "pnpm license-report --config=../../lic-report-config.json > licences.md"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.7.1",
+    "@unovis/ts": "1.8.0-vpd-beta.0",
     "react": ">=16.8.0 || ^17 || ^18 || ^19",
     "react-dom": ">=16.8.0 || ^17 || ^18 || ^19"
   },

package/utils/react.js

@@ -1,5 +1,17 @@
 import { Children } from "react";
 import { isEqual } from "@unovis/ts/utils/data";
+function arePropValuesEqual(prevProps, nextProps) {
+  const propKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(prevProps ?? {}), ...Object.keys(nextProps ?? {})]));
+  for (const key of propKeys) {
+    if (key === "children") continue;
+    if (key === "data") {
+      if (prevProps?.[key] !== nextProps?.[key]) return false;
+      continue;
+    }
+    if (!isEqual(prevProps?.[key], nextProps?.[key])) return false;
+  }
+  return true;
+}
 function arePropsEqual(prevProps, nextProps) {
   if (typeof prevProps.children !== typeof nextProps.children) return false;
   if (prevProps.children && nextProps.children) {
@@ -7,16 +19,10 @@ function arePropsEqual(prevProps, nextProps) {
     const nextChildren = Children.toArray(nextProps.children);
     if (prevChildren.length !== nextChildren.length) return false;
     for (let i = 0; i < nextChildren.length; i += 1) {
-      if (!isEqual(prevChildren[i]?.props, nextChildren[i]?.props)) return false;
-      if (!isEqual(prevChildren[i].props, nextChildren[i].props)) return false;
+      if (!arePropValuesEqual(prevChildren[i]?.props, nextChildren[i]?.props)) return false;
     }
   }
-  const propKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]));
-  for (const key of propKeys) {
-    if (key === "children") continue;
-    if (!isEqual(prevProps[key], nextProps[key])) return false;
-  }
-  return true;
+  return arePropValuesEqual(prevProps, nextProps);
 }
 export {
   arePropsEqual

package/utils/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":["../../src/utils/react.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode } from 'react'\nimport { isEqual } from '@unovis/ts/utils/data'\n\nexport function arePropsEqual<PropTypes extends { children?: ReactNode }> (prevProps: PropTypes, nextProps: PropTypes): boolean {\n  if (typeof prevProps.children !== typeof nextProps.children) return false\n\n  if (prevProps.children && nextProps.children) {\n    const prevChildren = Children.toArray(prevProps.children) as ReactElement[]\n    const nextChildren = Children.toArray(nextProps.children) as ReactElement[]\n    if (prevChildren.length !== nextChildren.length) return false\n\n    for (let i = 0; i < nextChildren.length; i += 1) {\n      if (!isEqual(prevChildren[i]?.props, nextChildren[i]?.props)) return false\n      if (!isEqual(prevChildren[i].props, nextChildren[i].props)) return false\n    }\n  }\n\n  const propKeys = Array.from(new Set([...Object.keys(prevProps), ...Object.keys(nextProps)])) as (keyof PropTypes)[]\n  for (const key of propKeys) {\n    if (key === 'children') continue\n    if (!(isEqual(prevProps[key], nextProps[key]))) return false\n  }\n\n  return true\n}\n"],"names":[],"mappings":";;AAGO,SAAS,cAA2D,WAAsB,WAA+B;AAC9H,MAAI,OAAO,UAAU,aAAa,OAAO,UAAU,SAAU,QAAO;AAEpE,MAAI,UAAU,YAAY,UAAU,UAAU;AAC5C,UAAM,eAAe,SAAS,QAAQ,UAAU,QAAQ;AACxD,UAAM,eAAe,SAAS,QAAQ,UAAU,QAAQ;AACxD,QAAI,aAAa,WAAW,aAAa,OAAQ,QAAO;AAExD,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAI,CAAC,QAAQ,aAAa,CAAC,GAAG,OAAO,aAAa,CAAC,GAAG,KAAK,EAAG,QAAO;AACrE,UAAI,CAAC,QAAQ,aAAa,CAAC,EAAE,OAAO,aAAa,CAAC,EAAE,KAAK,EAAG,QAAO;AAAA,IACrE;AAAA,EACF;AAEA,QAAM,WAAW,MAAM,KAAK,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAK,SAAS,GAAG,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC;AAC3F,aAAW,OAAO,UAAU;AAC1B,QAAI,QAAQ,WAAY;AACxB,QAAI,CAAE,QAAQ,UAAU,GAAG,GAAG,UAAU,GAAG,CAAC,EAAI,QAAO;AAAA,EACzD;AAEA,SAAO;AACT;"}
+{"version":3,"file":"react.js","sources":["../../src/utils/react.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode } from 'react'\nimport { isEqual } from '@unovis/ts/utils/data'\n\n// Compares two prop objects, skipping `children` and comparing `data` by reference:\n// datasets can be large, so deep-comparing them on every render is too expensive\nfunction arePropValuesEqual<PropTypes> (prevProps: PropTypes, nextProps: PropTypes): boolean {\n  const propKeys = Array.from(new Set([...Object.keys(prevProps ?? {}), ...Object.keys(nextProps ?? {})])) as (keyof PropTypes)[]\n  for (const key of propKeys) {\n    if (key === 'children') continue\n    if (key === 'data') {\n      if (prevProps?.[key] !== nextProps?.[key]) return false\n      continue\n    }\n    if (!(isEqual(prevProps?.[key], nextProps?.[key]))) return false\n  }\n\n  return true\n}\n\nexport function arePropsEqual<PropTypes extends { children?: ReactNode }> (prevProps: PropTypes, nextProps: PropTypes): boolean {\n  if (typeof prevProps.children !== typeof nextProps.children) return false\n\n  if (prevProps.children && nextProps.children) {\n    const prevChildren = Children.toArray(prevProps.children) as ReactElement[]\n    const nextChildren = Children.toArray(nextProps.children) as ReactElement[]\n    if (prevChildren.length !== nextChildren.length) return false\n\n    for (let i = 0; i < nextChildren.length; i += 1) {\n      if (!arePropValuesEqual(prevChildren[i]?.props, nextChildren[i]?.props)) return false\n    }\n  }\n\n  return arePropValuesEqual(prevProps, nextProps)\n}\n"],"names":[],"mappings":";;AAKA,SAAS,mBAA+B,WAAsB,WAA+B;AAC3F,QAAM,WAAW,MAAM,KAAK,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAK,aAAa,CAAA,CAAE,GAAG,GAAG,OAAO,KAAK,aAAa,CAAA,CAAE,CAAC,CAAC,CAAC;AACvG,aAAW,OAAO,UAAU;AAC1B,QAAI,QAAQ,WAAY;AACxB,QAAI,QAAQ,QAAQ;AAClB,UAAI,YAAY,GAAG,MAAM,YAAY,GAAG,EAAG,QAAO;AAClD;AAAA,IACF;AACA,QAAI,CAAE,QAAQ,YAAY,GAAG,GAAG,YAAY,GAAG,CAAC,EAAI,QAAO;AAAA,EAC7D;AAEA,SAAO;AACT;AAEO,SAAS,cAA2D,WAAsB,WAA+B;AAC9H,MAAI,OAAO,UAAU,aAAa,OAAO,UAAU,SAAU,QAAO;AAEpE,MAAI,UAAU,YAAY,UAAU,UAAU;AAC5C,UAAM,eAAe,SAAS,QAAQ,UAAU,QAAQ;AACxD,UAAM,eAAe,SAAS,QAAQ,UAAU,QAAQ;AACxD,QAAI,aAAa,WAAW,aAAa,OAAQ,QAAO;AAExD,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAI,CAAC,mBAAmB,aAAa,CAAC,GAAG,OAAO,aAAa,CAAC,GAAG,KAAK,EAAG,QAAO;AAAA,IAClF;AAAA,EACF;AAEA,SAAO,mBAAmB,WAAW,SAAS;AAChD;"}