@unovis/react 1.0.0-beta.2 → 1.0.0-beta.4

package/components/grouped-bar/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { GroupedBar } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisGroupedBarFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new GroupedBar(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new GroupedBar(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisGroupedBar = React.memo(React.forwardRef(VisGroupedBarFC), arePropsEqual);

package/components/grouped-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/grouped-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { GroupedBar, GroupedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisGroupedBarRef<Datum> = {\n  component: GroupedBar<Datum>;\n}\n\nexport type VisGroupedBarProps<Datum> = GroupedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisGroupedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisGroupedBarFC<Datum> (props: VisGroupedBarProps<Datum>, fRef: ForwardedRef<VisGroupedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<GroupedBar<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<GroupedBar<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new GroupedBar(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<GroupedBar<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<GroupedBar<Datum>>).__component__ }))\n  return <vis-component 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 VisGroupedBar: (<Datum>(props: VisGroupedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisGroupedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AACvE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAA;KAE9C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAkD,CAAC,aAAa,CAAA;QACvF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAkD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACvH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/grouped-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { GroupedBar, GroupedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisGroupedBarRef<Datum> = {\n  component?: GroupedBar<Datum>;\n}\n\nexport type VisGroupedBarProps<Datum> = GroupedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisGroupedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisGroupedBarFC<Datum> (props: VisGroupedBarProps<Datum>, fRef: ForwardedRef<VisGroupedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<GroupedBar<Datum>>>(null)\n  const [component, setComponent] = useState<GroupedBar<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<GroupedBar<Datum>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new GroupedBar<Datum>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisGroupedBar: (<Datum>(props: VisGroupedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisGroupedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AAKvE,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,UAAU,CAAQ,KAAK,CAAC,CAAA;QAC/D,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

package/components/line/index.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
-import { Line, LineConfigInterface } from '@unovis/ts';
-export declare type VisLineRef<Datum> = {
-    component: Line<Datum>;
-};
-export declare type VisLineProps<Datum> = LineConfigInterface<Datum> & {
-    data?: Datum[];
-    ref?: Ref<VisLineRef<Datum>>;
-};
-export declare const VisLine: (<Datum>(props: VisLineProps<Datum>) => JSX.Element | null);
+import { Ref } from 'react';
+import { Line, LineConfigInterface } from '@unovis/ts';
+export declare type VisLineRef<Datum> = {
+    component?: Line<Datum>;
+};
+export declare type VisLineProps<Datum> = LineConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisLineRef<Datum>>;
+};
+export declare const VisLine: (<Datum>(props: VisLineProps<Datum>) => JSX.Element | null);

package/components/line/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Line } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisLineFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new Line(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new Line(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisLine = React.memo(React.forwardRef(VisLineFC), arePropsEqual);

package/components/line/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/line/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Line, LineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLineRef<Datum> = {\n  component: Line<Datum>;\n}\n\nexport type VisLineProps<Datum> = LineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLineFC<Datum> (props: VisLineProps<Datum>, fRef: ForwardedRef<VisLineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Line<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Line<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Line(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Line<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Line<Datum>>).__component__ }))\n  return <vis-component 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 VisLine: (<Datum>(props: VisLineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;IAG1D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA4C,CAAA;AACjE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;KAExC,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA4C,CAAC,aAAa,CAAA;QACjF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA4C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACjH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/line/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Line, LineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisLineRef<Datum> = {\n  component?: Line<Datum>;\n}\n\nexport type VisLineProps<Datum> = LineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisLineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisLineFC<Datum> (props: VisLineProps<Datum>, fRef: ForwardedRef<VisLineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Line<Datum>>>(null)\n  const [component, setComponent] = useState<Line<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Line<Datum>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new Line<Datum>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisLine: (<Datum>(props: VisLineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisLineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,SAAS,CAAS,KAA0B,EAAE,IAAqC,EAAA;AAC1F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAA;IAC1D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAe,CAAA;IAGzD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA4C,CAAA;AAKjE,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,IAAI,CAAQ,KAAK,CAAC,CAAA;QACzD,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,OAAO,GAAgE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,aAAa;;;;"}

package/components/sankey/index.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
-import { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts';
-export declare type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {
-    component: Sankey<N, L>;
-};
-export declare type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {
-    data?: any;
-    ref?: Ref<VisSankeyRef<N, L>>;
-};
-export declare const VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null);
+import { Ref } from 'react';
+import { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts';
+export declare type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {
+    component?: Sankey<N, L>;
+};
+export declare type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {
+    data?: any;
+    ref?: Ref<VisSankeyRef<N, L>>;
+};
+export declare const VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null);

package/components/sankey/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Sankey } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisSankeyFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new Sankey(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new Sankey(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisSankey = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual);

package/components/sankey/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/sankey/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {\n  component: Sankey<N, L>;\n}\n\nexport type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisSankeyRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSankeyFC<N extends SankeyInputNode, L extends SankeyInputLink> (props: VisSankeyProps<N, L>, fRef: ForwardedRef<VisSankeyRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Sankey<N, L>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Sankey<N, L>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Sankey(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Sankey<N, L>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Sankey<N, L>>).__component__ }))\n  return <vis-component 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 VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,WAAW,CAAwD,KAA2B,EAAE,IAAsC,EAAA;AAC7I,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;IAG3D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA6C,CAAA;AAClE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAA;KAE1C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA6C,CAAC,aAAa,CAAA;QAClF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA6C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AAClH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,SAAS,GAAgH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/sankey/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Sankey, SankeyConfigInterface, SankeyInputNode, SankeyInputLink } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSankeyRef<N extends SankeyInputNode, L extends SankeyInputLink> = {\n  component?: Sankey<N, L>;\n}\n\nexport type VisSankeyProps<N extends SankeyInputNode, L extends SankeyInputLink> = SankeyConfigInterface<N, L> & {\n  data?: any;\n  ref?: Ref<VisSankeyRef<N, L>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSankeyFC<N extends SankeyInputNode, L extends SankeyInputLink> (props: VisSankeyProps<N, L>, fRef: ForwardedRef<VisSankeyRef<N, L>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Sankey<N, L>>>(null)\n  const [component, setComponent] = useState<Sankey<N, L>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Sankey<N, L>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new Sankey<N, L>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisSankey: (<N extends SankeyInputNode, L extends SankeyInputLink>(props: VisSankeyProps<N, L>) => JSX.Element | null) = React.memo(React.forwardRef(VisSankeyFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,WAAW,CAAwD,KAA2B,EAAE,IAAsC,EAAA;AAC7I,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAA;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgB,CAAA;IAG1D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA6C,CAAA;AAKlE,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,MAAM,CAAO,KAAK,CAAC,CAAA;QAC1D,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,SAAS,GAAgH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa;;;;"}

package/components/scatter/index.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
-import { Scatter, ScatterConfigInterface } from '@unovis/ts';
-export declare type VisScatterRef<Datum> = {
-    component: Scatter<Datum>;
-};
-export declare type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {
-    data?: Datum[];
-    ref?: Ref<VisScatterRef<Datum>>;
-};
-export declare const VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null);
+import { Ref } from 'react';
+import { Scatter, ScatterConfigInterface } from '@unovis/ts';
+export declare type VisScatterRef<Datum> = {
+    component?: Scatter<Datum>;
+};
+export declare type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisScatterRef<Datum>>;
+};
+export declare const VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null);

package/components/scatter/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Scatter } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisScatterFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new Scatter(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new Scatter(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisScatter = React.memo(React.forwardRef(VisScatterFC), arePropsEqual);

package/components/scatter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Scatter, ScatterConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisScatterRef<Datum> = {\n  component: Scatter<Datum>;\n}\n\nexport type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisScatterRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisScatterFC<Datum> (props: VisScatterProps<Datum>, fRef: ForwardedRef<VisScatterRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Scatter<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Scatter<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Scatter(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Scatter<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Scatter<Datum>>).__component__ }))\n  return <vis-component 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 VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisScatterFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAS,KAA6B,EAAE,IAAwC,EAAA;AACnG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAsC,IAAI,CAAC,CAAA;IAG7D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA+C,CAAA;AACpE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;KAE3C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA+C,CAAC,aAAa,CAAA;QACpF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA+C,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACpH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,UAAU,GAAmE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Scatter, ScatterConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisScatterRef<Datum> = {\n  component?: Scatter<Datum>;\n}\n\nexport type VisScatterProps<Datum> = ScatterConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisScatterRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisScatterFC<Datum> (props: VisScatterProps<Datum>, fRef: ForwardedRef<VisScatterRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Scatter<Datum>>>(null)\n  const [component, setComponent] = useState<Scatter<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Scatter<Datum>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new Scatter<Datum>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisScatter: (<Datum>(props: VisScatterProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisScatterFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAS,KAA6B,EAAE,IAAwC,EAAA;AACnG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAsC,IAAI,CAAC,CAAA;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAkB,CAAA;IAG5D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA+C,CAAA;AAKpE,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,OAAO,CAAQ,KAAK,CAAC,CAAA;QAC5D,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,UAAU,GAAmE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}

package/components/stacked-bar/index.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
-import { StackedBar, StackedBarConfigInterface } from '@unovis/ts';
-export declare type VisStackedBarRef<Datum> = {
-    component: StackedBar<Datum>;
-};
-export declare type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {
-    data?: Datum[];
-    ref?: Ref<VisStackedBarRef<Datum>>;
-};
-export declare const VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null);
+import { Ref } from 'react';
+import { StackedBar, StackedBarConfigInterface } from '@unovis/ts';
+export declare type VisStackedBarRef<Datum> = {
+    component?: StackedBar<Datum>;
+};
+export declare type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisStackedBarRef<Datum>>;
+};
+export declare const VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null);

package/components/stacked-bar/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { StackedBar } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisStackedBarFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new StackedBar(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new StackedBar(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisStackedBar = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual);

package/components/stacked-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { StackedBar, StackedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisStackedBarRef<Datum> = {\n  component: StackedBar<Datum>;\n}\n\nexport type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisStackedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisStackedBarFC<Datum> (props: VisStackedBarProps<Datum>, fRef: ForwardedRef<VisStackedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<StackedBar<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<StackedBar<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new StackedBar(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<StackedBar<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<StackedBar<Datum>>).__component__ }))\n  return <vis-component 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 VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AACvE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAA;KAE9C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAkD,CAAC,aAAa,CAAA;QACvF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAkD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACvH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { StackedBar, StackedBarConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisStackedBarRef<Datum> = {\n  component?: StackedBar<Datum>;\n}\n\nexport type VisStackedBarProps<Datum> = StackedBarConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisStackedBarRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisStackedBarFC<Datum> (props: VisStackedBarProps<Datum>, fRef: ForwardedRef<VisStackedBarRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<StackedBar<Datum>>>(null)\n  const [component, setComponent] = useState<StackedBar<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<StackedBar<Datum>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new StackedBar<Datum>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisStackedBar: (<Datum>(props: VisStackedBarProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisStackedBarFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,eAAe,CAAS,KAAgC,EAAE,IAA2C,EAAA;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAA;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkD,CAAA;AAKvE,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,UAAU,CAAQ,KAAK,CAAC,CAAA;QAC/D,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,aAAa,GAAsE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

package/components/timeline/index.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
-import { Timeline, TimelineConfigInterface } from '@unovis/ts';
-export declare type VisTimelineRef<Datum> = {
-    component: Timeline<Datum>;
-};
-export declare type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {
-    data?: Datum[];
-    ref?: Ref<VisTimelineRef<Datum>>;
-};
-export declare const VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null);
+import { Ref } from 'react';
+import { Timeline, TimelineConfigInterface } from '@unovis/ts';
+export declare type VisTimelineRef<Datum> = {
+    component?: Timeline<Datum>;
+};
+export declare type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {
+    data?: Datum[];
+    ref?: Ref<VisTimelineRef<Datum>>;
+};
+export declare const VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null);

package/components/timeline/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Timeline } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisTimelineFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new Timeline(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new Timeline(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisTimeline = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual);

package/components/timeline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/timeline/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Timeline, TimelineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTimelineRef<Datum> = {\n  component: Timeline<Datum>;\n}\n\nexport type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisTimelineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTimelineFC<Datum> (props: VisTimelineProps<Datum>, fRef: ForwardedRef<VisTimelineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Timeline<Datum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Timeline<Datum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Timeline(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Timeline<Datum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Timeline<Datum>>).__component__ }))\n  return <vis-component 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 VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;IAG9D,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAgD,CAAA;AACrE,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAA;KAE5C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAgD,CAAC,aAAa,CAAA;QACrF,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAgD,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACrH,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/timeline/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Timeline, TimelineConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTimelineRef<Datum> = {\n  component?: Timeline<Datum>;\n}\n\nexport type VisTimelineProps<Datum> = TimelineConfigInterface<Datum> & {\n  data?: Datum[];\n  ref?: Ref<VisTimelineRef<Datum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTimelineFC<Datum> (props: VisTimelineProps<Datum>, fRef: ForwardedRef<VisTimelineRef<Datum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<Timeline<Datum>>>(null)\n  const [component, setComponent] = useState<Timeline<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Timeline<Datum>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new Timeline<Datum>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisTimeline: (<Datum>(props: VisTimelineProps<Datum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTimelineFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,aAAa,CAAS,KAA8B,EAAE,IAAyC,EAAA;AACtG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;IAC9D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAmB,CAAA;IAG7D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAgD,CAAA;AAKrE,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,QAAQ,CAAQ,KAAK,CAAC,CAAA;QAC7D,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,WAAW,GAAoE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,aAAa;;;;"}

package/components/tooltip/index.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
-import { Tooltip, TooltipConfigInterface } from '@unovis/ts';
-export declare type VisTooltipRef = {
-    component: Tooltip;
-};
-export declare type VisTooltipProps = TooltipConfigInterface & {
-    data?: null;
-    ref?: Ref<VisTooltipRef>;
-};
-export declare const VisTooltip: ((props: VisTooltipProps) => JSX.Element | null);
+import { Ref } from 'react';
+import { Tooltip, TooltipConfigInterface } from '@unovis/ts';
+export declare type VisTooltipRef = {
+    component?: Tooltip;
+};
+export declare type VisTooltipProps = TooltipConfigInterface & {
+    data?: null;
+    ref?: Ref<VisTooltipRef>;
+};
+export declare const VisTooltip: ((props: VisTooltipProps) => JSX.Element | null);

package/components/tooltip/index.js

@@ -1,20 +1,22 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Tooltip } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisTooltipFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new Tooltip(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new Tooltip(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-tooltip", { ref: ref });
 }
 const VisTooltip = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual);

package/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { Tooltip, TooltipConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTooltipRef = {\n  component: Tooltip;\n}\n\nexport type VisTooltipProps = TooltipConfigInterface & {\n  data?: null;\n  ref?: Ref<VisTooltipRef>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTooltipFC (props: VisTooltipProps, fRef: ForwardedRef<VisTooltipRef>): JSX.Element {\n  const ref = useRef<VisComponentElement<Tooltip>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Tooltip>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new Tooltip(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<Tooltip>).__component__\n\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<Tooltip>).__component__ }))\n  return <vis-tooltip 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 VisTooltip: ((props: VisTooltipProps) => JSX.Element | null) = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAE,KAAsB,EAAE,IAAiC,EAAA;AAC9E,IAAA,MAAM,GAAG,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAA;IAGtD,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAwC,CAAA;AAC7D,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;KAE3C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAAwC,CAAC,aAAa,CAAA;QAE7E,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAAwC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AAC7G,IAAA,OAAO,KAAa,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAClC,CAAC;AAIY,MAAA,UAAU,GAAqD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { Tooltip, TooltipConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTooltipRef = {\n  component?: Tooltip;\n}\n\nexport type VisTooltipProps = TooltipConfigInterface & {\n  data?: null;\n  ref?: Ref<VisTooltipRef>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTooltipFC (props: VisTooltipProps, fRef: ForwardedRef<VisTooltipRef>): JSX.Element {\n  const ref = useRef<VisComponentElement<Tooltip>>(null)\n  const [component, setComponent] = useState<Tooltip>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<Tooltip>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new Tooltip(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-tooltip 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 VisTooltip: ((props: VisTooltipProps) => JSX.Element | null) = React.memo(React.forwardRef(VisTooltipFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,YAAY,CAAE,KAAsB,EAAE,IAAiC,EAAA;AAC9E,IAAA,MAAM,GAAG,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAA;IACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAW,CAAA;IAGrD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAwC,CAAA;AAK7D,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;QACrD,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAa,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AAClC,CAAC;AAIY,MAAA,UAAU,GAAqD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa;;;;"}

package/components/topojson-map/index.d.ts

@@ -1,14 +1,14 @@
-import { Ref } from 'react';
-import { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts';
-export declare type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {
-    component: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;
-};
-export declare type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {
-    data?: {
-        areas?: AreaDatum[];
-        points?: PointDatum[];
-        links?: LinkDatum[];
-    };
-    ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;
-};
-export declare const VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null);
+import { Ref } from 'react';
+import { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts';
+export declare type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {
+    component?: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;
+};
+export declare type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {
+    data?: {
+        areas?: AreaDatum[];
+        points?: PointDatum[];
+        links?: LinkDatum[];
+    };
+    ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;
+};
+export declare const VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null);

package/components/topojson-map/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { TopoJSONMap } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 function VisTopoJSONMapFC(props, fRef) {
     const ref = useRef(null);
+    const [component, setComponent] = useState();
     useEffect(() => {
-        var _a;
         const element = ref.current;
-        (_a = element.__component__) === null || _a === void 0 ? void 0 : _a.destroy();
-        element.__component__ = new TopoJSONMap(props);
+        const hasAlreadyBeenInitialized = element.__component__;
+        const c = element.__component__ || new TopoJSONMap(props);
+        setComponent(c);
+        element.__component__ = c;
+        return () => hasAlreadyBeenInitialized && c.destroy();
     }, []);
     useEffect(() => {
-        const component = ref.current.__component__;
         if (props.data)
             component === null || component === void 0 ? void 0 : component.setData(props.data);
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ component: ref.current.__component__ }));
+    useImperativeHandle(fRef, () => ({ component }), [component]);
     return React.createElement("vis-component", { ref: ref });
 }
 const VisTopoJSONMap = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual);

package/components/topojson-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/topojson-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef } from 'react'\nimport { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {\n  component: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;\n}\n\nexport type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {\n  data?: {areas?: AreaDatum[]; points?: PointDatum[]; links?: LinkDatum[]};\n  ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTopoJSONMapFC<AreaDatum, PointDatum, LinkDatum> (props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>, fRef: ForwardedRef<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>>(null)\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>)\n    element.__component__?.destroy() // Destroy component if exists already (to comply with React 18 strict mode, which renders components twice in dev mode)\n    element.__component__ = new TopoJSONMap(props)\n    // We don't have a clean up function because the component will be destroyed by its container (e.g. XYContainer or SingleContainer)\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    const component = (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>).__component__\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component: (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>).__component__ }))\n  return <vis-component 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 VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,gBAAgB,CAAoC,KAA4D,EAAE,IAAuE,EAAA;AAChM,IAAA,MAAM,GAAG,GAAG,MAAM,CAAqE,IAAI,CAAC,CAAA;IAG5F,SAAS,CAAC,MAAK;;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA8E,CAAA;AACnG,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAA;QAChC,OAAO,CAAC,aAAa,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAA;KAE/C,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAI,GAAG,CAAC,OAA8E,CAAC,aAAa,CAAA;QACnH,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAG,GAAG,CAAC,OAA8E,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;AACnJ,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,cAAc,GAA6H,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/topojson-map/index.tsx"],"sourcesContent":["// !!! This code was automatically generated. You should not change it !!!\nimport React, { ForwardedRef, Ref, useImperativeHandle, useEffect, useRef, useState } from 'react'\nimport { TopoJSONMap, TopoJSONMapConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum> = {\n  component?: TopoJSONMap<AreaDatum, PointDatum, LinkDatum>;\n}\n\nexport type VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum> = TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> & {\n  data?: {areas?: AreaDatum[]; points?: PointDatum[]; links?: LinkDatum[]};\n  ref?: Ref<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisTopoJSONMapFC<AreaDatum, PointDatum, LinkDatum> (props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>, fRef: ForwardedRef<VisTopoJSONMapRef<AreaDatum, PointDatum, LinkDatum>>): JSX.Element {\n  const ref = useRef<VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>>(null)\n  const [component, setComponent] = useState<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>()\n\n  // On Mount\n  useEffect(() => {\n    const element = (ref.current as VisComponentElement<TopoJSONMap<AreaDatum, PointDatum, LinkDatum>>)\n\n    // React 18 in Strict Mode renders components twice. At the same time, a Container that contains this component\n    // (e.g. XYContainer) will be updated only after the first render. So we need to make sure that the component will\n    // be initialized only once and won't get destroyed after the first render\n    const hasAlreadyBeenInitialized = element.__component__\n    const c = element.__component__ || new TopoJSONMap<AreaDatum, PointDatum, LinkDatum>(props)\n    setComponent(c)\n    element.__component__ = c\n\n    return () => hasAlreadyBeenInitialized && c.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    if (props.data) component?.setData(props.data)\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ component }), [component])\n  return <vis-component 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 VisTopoJSONMap: (<AreaDatum, PointDatum, LinkDatum>(props: VisTopoJSONMapProps<AreaDatum, PointDatum, LinkDatum>) => JSX.Element | null) = React.memo(React.forwardRef(VisTopoJSONMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAoBA,SAAS,gBAAgB,CAAoC,KAA4D,EAAE,IAAuE,EAAA;AAChM,IAAA,MAAM,GAAG,GAAG,MAAM,CAAqE,IAAI,CAAC,CAAA;IAC5F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAiD,CAAA;IAG3F,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA8E,CAAA;AAKnG,QAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,aAAa,CAAA;QACvD,MAAM,CAAC,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,WAAW,CAAmC,KAAK,CAAC,CAAA;QAC3F,YAAY,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QAEzB,OAAO,MAAM,yBAAyB,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;KACtD,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;AAC7D,IAAA,OAAO,KAAe,CAAA,aAAA,CAAA,eAAA,EAAA,EAAA,GAAG,EAAE,GAAG,GAAI,CAAA;AACpC,CAAC;AAIY,MAAA,cAAc,GAA6H,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,aAAa;;;;"}