@unovis/react 1.6.2 → 1.7.0-pre.1

package/components.d.ts

@@ -24,3 +24,4 @@ export * from './html-components/bullet-legend';
 export * from './html-components/rolling-pin-legend';
 export * from './html-components/leaflet-map';
 export * from './html-components/leaflet-flow-map';
+export * from './html-components/flow-legend';

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

@@ -1,20 +1,26 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { BulletLegend } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 const VisBulletLegendSelectors = BulletLegend.selectors;
 function VisBulletLegendFC(props, fRef) {
     const ref = useRef(null);
-    const [component, setComponent] = useState();
+    const componentRef = useRef(undefined);
     useEffect(() => {
+        const element = ref.current;
         const c = new BulletLegend(ref.current, Object.assign(Object.assign({}, props), { renderIntoProvidedDomNode: true }));
-        setComponent(c);
-        return () => c === null || c === void 0 ? void 0 : c.destroy();
+        componentRef.current = c;
+        element.__component__ = c;
+        return () => {
+            componentRef.current = undefined;
+            c.destroy();
+        };
     }, []);
     useEffect(() => {
-        component === null || component === void 0 ? void 0 : component.update(props);
+        const component = componentRef.current;
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ get component() { return component; } }), []);
+    useImperativeHandle(fRef, () => ({ get component() { return componentRef.current; } }), []);
     return React.createElement("div", { className: props.className, ref: ref });
 }
 const VisBulletLegend = React.memo(React.forwardRef(VisBulletLegendFC), arePropsEqual);

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, BulletLegendConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\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<HTMLDivElement>(null)\n  const [component, setComponent] = useState<BulletLegend>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new BulletLegend(ref.current as HTMLDivElement, { ...props, renderIntoProvidedDomNode: true })\n    setComponent(c)\n\n    return () => c?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.update(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return component } }), [])\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":";;;;AAgBa,MAAA,wBAAwB,GAAG,YAAY,CAAC,UAAS;AAG9D,SAAS,iBAAiB,CAAE,KAA2B,EAAE,IAAsC,EAAA;AAC7F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgB,CAAA;IAG1D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,CAAC,OAAyB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,CAAE,EAAA,EAAA,yBAAyB,EAAE,IAAI,IAAG,CAAA;QACxG,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,MAAM,CAAC,KAAK,CAAC,CAAA;AAC1B,KAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,KAAM,OAAO,SAAS,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAChF,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,eAAe,GAA0D,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,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, useState } from 'react'\nimport { BulletLegend, BulletLegendConfigInterface } from '@unovis/ts'\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":";;;;AAmBa,MAAA,wBAAwB,GAAG,YAAY,CAAC,UAAS;AAG9D,SAAS,iBAAiB,CAAE,KAA2B,EAAE,IAAsC,EAAA;AAC7F,IAAA,MAAM,GAAG,GAAG,MAAM,CAAoD,IAAI,CAAC,CAAA;AAC3E,IAAA,MAAM,YAAY,GAAG,MAAM,CAA2B,SAAS,CAAC,CAAA;IAGhE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA6D,CAAA;AAElF,QAAA,MAAM,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,CAAC,OAA4D,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,CAAE,EAAA,EAAA,yBAAyB,EAAE,IAAI,IAAG,CAAA;AAC3I,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QAEtC,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,GAAA,EAAM,OAAO,YAAY,CAAC,OAAO,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3F,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,eAAe,GAA0D,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,aAAa;;;;"}

package/html-components/flow-legend/index.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'react';
+import { FlowLegend, FlowLegendConfigInterface } from '@unovis/ts';
+export declare type VisFlowLegendRef = {
+    component?: FlowLegend;
+};
+export declare type VisFlowLegendProps = FlowLegendConfigInterface & {
+    ref?: Ref<VisFlowLegendRef>;
+    className?: string;
+};
+export declare const VisFlowLegendSelectors: typeof import("@unovis/ts/dist/components/flow-legend/style");
+export declare const VisFlowLegend: ((props: VisFlowLegendProps) => JSX.Element | null);

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

@@ -0,0 +1,29 @@
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import { FlowLegend } from '@unovis/ts';
+import { arePropsEqual } from '../../utils/react.js';
+
+const VisFlowLegendSelectors = FlowLegend.selectors;
+function VisFlowLegendFC(props, fRef) {
+    const ref = useRef(null);
+    const componentRef = useRef(undefined);
+    useEffect(() => {
+        const element = ref.current;
+        const c = new FlowLegend(ref.current, Object.assign(Object.assign({}, props), { renderIntoProvidedDomNode: true }));
+        componentRef.current = c;
+        element.__component__ = c;
+        return () => {
+            componentRef.current = undefined;
+            c.destroy();
+        };
+    }, []);
+    useEffect(() => {
+        const component = componentRef.current;
+        component === null || component === void 0 ? void 0 : component.setConfig(props);
+    });
+    useImperativeHandle(fRef, () => ({ get component() { return componentRef.current; } }), []);
+    return React.createElement("div", { className: props.className, ref: ref });
+}
+const VisFlowLegend = React.memo(React.forwardRef(VisFlowLegendFC), arePropsEqual);
+
+export { VisFlowLegend, VisFlowLegendSelectors };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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, FlowLegendConfigInterface } from '@unovis/ts'\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":";;;;AAmBa,MAAA,sBAAsB,GAAG,UAAU,CAAC,UAAS;AAG1D,SAAS,eAAe,CAAE,KAAyB,EAAE,IAAoC,EAAA;AACvF,IAAA,MAAM,GAAG,GAAG,MAAM,CAAkD,IAAI,CAAC,CAAA;AACzE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAyB,SAAS,CAAC,CAAA;IAG9D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAA2D,CAAA;AAEhF,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,OAA0D,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,CAAE,EAAA,EAAA,yBAAyB,EAAE,IAAI,IAAG,CAAA;AACvI,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QAEtC,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,GAAA,EAAM,OAAO,YAAY,CAAC,OAAO,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3F,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,aAAa,GAAwD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

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

@@ -1,22 +1,28 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { LeafletFlowMap } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 const VisLeafletFlowMapSelectors = LeafletFlowMap.selectors;
 function VisLeafletFlowMapFC(props, fRef) {
     const ref = useRef(null);
-    const [component, setComponent] = useState();
+    const componentRef = useRef(undefined);
     useEffect(() => {
+        const element = ref.current;
         const c = new LeafletFlowMap(ref.current, props, props.data);
-        setComponent(c);
-        return () => c === null || c === void 0 ? void 0 : c.destroy();
+        componentRef.current = c;
+        element.__component__ = c;
+        return () => {
+            componentRef.current = undefined;
+            c.destroy();
+        };
     }, []);
     useEffect(() => {
+        const component = componentRef.current;
         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, () => ({ get component() { return component; } }), []);
+    useImperativeHandle(fRef, () => ({ get component() { return componentRef.current; } }), []);
     return React.createElement("div", { className: props.className, ref: ref });
 }
 const VisLeafletFlowMap = React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual);

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, LeafletFlowMapConfigInterface, GenericDataRecord } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\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<HTMLDivElement>(null)\n  const [component, setComponent] = useState<LeafletFlowMap<PointDatum, FlowDatum>>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new LeafletFlowMap<PointDatum, FlowDatum>(ref.current as HTMLDivElement, props, props.data)\n    setComponent(c)\n\n    return () => 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, () => ({ get component () { return component } }), [])\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":";;;;AAiBa,MAAA,0BAA0B,GAAG,cAAc,CAAC,UAAS;AAGlE,SAAS,mBAAmB,CAA6E,KAAoD,EAAE,IAA+D,EAAA;AAC5N,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAyC,CAAA;IAGnF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,cAAc,CAAwB,GAAG,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACrG,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,KAAM,OAAO,SAAS,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAChF,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,iBAAiB,GAA8J,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,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, useState } from 'react'\nimport { LeafletFlowMap, LeafletFlowMapConfigInterface, GenericDataRecord } from '@unovis/ts'\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":";;;;AAoBa,MAAA,0BAA0B,GAAG,cAAc,CAAC,UAAS;AAGlE,SAAS,mBAAmB,CAA6E,KAAoD,EAAE,IAA+D,EAAA;AAC5N,IAAA,MAAM,GAAG,GAAG,MAAM,CAA6E,IAAI,CAAC,CAAA;AACpG,IAAA,MAAM,YAAY,GAAG,MAAM,CAAoD,SAAS,CAAC,CAAA;IAGzF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAsF,CAAA;AAE3G,QAAA,MAAM,CAAC,GAAG,IAAI,cAAc,CAAwB,GAAG,CAAC,OAAqF,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;AACjK,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,GAAA,EAAM,OAAO,YAAY,CAAC,OAAO,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3F,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,iBAAiB,GAA8J,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,aAAa;;;;"}

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

@@ -1,22 +1,28 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { LeafletMap } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 const VisLeafletMapSelectors = LeafletMap.selectors;
 function VisLeafletMapFC(props, fRef) {
     const ref = useRef(null);
-    const [component, setComponent] = useState();
+    const componentRef = useRef(undefined);
     useEffect(() => {
+        const element = ref.current;
         const c = new LeafletMap(ref.current, props, props.data);
-        setComponent(c);
-        return () => c === null || c === void 0 ? void 0 : c.destroy();
+        componentRef.current = c;
+        element.__component__ = c;
+        return () => {
+            componentRef.current = undefined;
+            c.destroy();
+        };
     }, []);
     useEffect(() => {
+        const component = componentRef.current;
         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, () => ({ get component() { return component; } }), []);
+    useImperativeHandle(fRef, () => ({ get component() { return componentRef.current; } }), []);
     return React.createElement("div", { className: props.className, ref: ref });
 }
 const VisLeafletMap = React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual);

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, LeafletMapConfigInterface, GenericDataRecord } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\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<HTMLDivElement>(null)\n  const [component, setComponent] = useState<LeafletMap<Datum>>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new LeafletMap<Datum>(ref.current as HTMLDivElement, props, props.data)\n    setComponent(c)\n\n    return () => 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, () => ({ get component () { return component } }), [])\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":";;;;AAiBa,MAAA,sBAAsB,GAAG,UAAU,CAAC,UAAS;AAG1D,SAAS,eAAe,CAAmC,KAAgC,EAAE,IAA2C,EAAA;AACtI,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAQ,GAAG,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACjF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,KAAM,OAAO,SAAS,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAChF,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,aAAa,GAAgG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,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, useState } from 'react'\nimport { LeafletMap, LeafletMapConfigInterface, GenericDataRecord } from '@unovis/ts'\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":";;;;AAoBa,MAAA,sBAAsB,GAAG,UAAU,CAAC,UAAS;AAG1D,SAAS,eAAe,CAAmC,KAAgC,EAAE,IAA2C,EAAA;AACtI,IAAA,MAAM,GAAG,GAAG,MAAM,CAAyD,IAAI,CAAC,CAAA;AAChF,IAAA,MAAM,YAAY,GAAG,MAAM,CAAgC,SAAS,CAAC,CAAA;IAGrE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAkE,CAAA;AAEvF,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAQ,GAAG,CAAC,OAAiE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;AACzH,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QACtC,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,GAAA,EAAM,OAAO,YAAY,CAAC,OAAO,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3F,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,aAAa,GAAgG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}

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

@@ -1,20 +1,26 @@
-import React, { useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
 import { RollingPinLegend } from '@unovis/ts';
 import { arePropsEqual } from '../../utils/react.js';
 
 const VisRollingPinLegendSelectors = RollingPinLegend.selectors;
 function VisRollingPinLegendFC(props, fRef) {
     const ref = useRef(null);
-    const [component, setComponent] = useState();
+    const componentRef = useRef(undefined);
     useEffect(() => {
+        const element = ref.current;
         const c = new RollingPinLegend(ref.current, props);
-        setComponent(c);
-        return () => c === null || c === void 0 ? void 0 : c.destroy();
+        componentRef.current = c;
+        element.__component__ = c;
+        return () => {
+            componentRef.current = undefined;
+            c.destroy();
+        };
     }, []);
     useEffect(() => {
+        const component = componentRef.current;
         component === null || component === void 0 ? void 0 : component.setConfig(props);
     });
-    useImperativeHandle(fRef, () => ({ get component() { return component; } }), []);
+    useImperativeHandle(fRef, () => ({ get component() { return componentRef.current; } }), []);
     return React.createElement("div", { className: props.className, ref: ref });
 }
 const VisRollingPinLegend = React.memo(React.forwardRef(VisRollingPinLegendFC), arePropsEqual);

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, RollingPinLegendConfigInterface } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\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<HTMLDivElement>(null)\n  const [component, setComponent] = useState<RollingPinLegend>()\n\n  // On Mount\n  useEffect(() => {\n    const c = new RollingPinLegend(ref.current as HTMLDivElement, props)\n    setComponent(c)\n\n    return () => c?.destroy()\n  }, [])\n\n  // On Props Update\n  useEffect(() => {\n    component?.setConfig(props)\n  })\n\n  useImperativeHandle(fRef, () => ({ get component () { return component } }), [])\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":";;;;AAgBa,MAAA,4BAA4B,GAAG,gBAAgB,CAAC,UAAS;AAGtE,SAAS,qBAAqB,CAAE,KAA+B,EAAE,IAA0C,EAAA;AACzG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAoB,CAAA;IAG9D,SAAS,CAAC,MAAK;QACb,MAAM,CAAC,GAAG,IAAI,gBAAgB,CAAC,GAAG,CAAC,OAAyB,EAAE,KAAK,CAAC,CAAA;QACpE,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,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;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,KAAM,OAAO,SAAS,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAChF,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,mBAAmB,GAA8D,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,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, useState } from 'react'\nimport { RollingPinLegend, RollingPinLegendConfigInterface } from '@unovis/ts'\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":";;;;AAmBa,MAAA,4BAA4B,GAAG,gBAAgB,CAAC,UAAS;AAGtE,SAAS,qBAAqB,CAAE,KAA+B,EAAE,IAA0C,EAAA;AACzG,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwD,IAAI,CAAC,CAAA;AAC/E,IAAA,MAAM,YAAY,GAAG,MAAM,CAA+B,SAAS,CAAC,CAAA;IAGpE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAI,GAAG,CAAC,OAAiE,CAAA;QAEtF,MAAM,CAAC,GAAG,IAAI,gBAAgB,CAAC,GAAG,CAAC,OAAgE,EAAE,KAAK,CAAC,CAAA;AAC3G,QAAA,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACxB,QAAA,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;AAEzB,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,SAAS,CAAA;YAChC,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;QAEtC,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAS,GAAA,EAAM,OAAO,YAAY,CAAC,OAAO,CAAA,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3F,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AACtD,CAAC;AAIY,MAAA,mBAAmB,GAA8D,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,aAAa;;;;"}

package/index.js

@@ -26,5 +26,6 @@ export { VisBulletLegend, VisBulletLegendSelectors } from './html-components/bul
 export { VisRollingPinLegend, VisRollingPinLegendSelectors } from './html-components/rolling-pin-legend/index.js';
 export { VisLeafletMap, VisLeafletMapSelectors } from './html-components/leaflet-map/index.js';
 export { VisLeafletFlowMap, VisLeafletFlowMapSelectors } from './html-components/leaflet-flow-map/index.js';
+export { VisFlowLegend, VisFlowLegendSelectors } from './html-components/flow-legend/index.js';
 export { VisTimeSeries } from './composites/time-series/index.js';
 //# sourceMappingURL=index.js.map

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.6.2",
+  "version": "1.7.0-pre.1",
   "packageManager": "npm@10.9.1",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "publish:dist": "cd ./dist; npm publish"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.6.2",
+    "@unovis/ts": "1.7.0-pre.1",
     "react": ">=16.8.0 || ^17 || ^18 || ^19",
     "react-dom": ">=16.8.0 || ^17 || ^18 || ^19"
   },

package/types/dom.d.ts

@@ -1,3 +1,3 @@
-export declare type VisComponentElement<T> = HTMLElement & {
+export declare type VisComponentElement<T, E = HTMLElement> = E & {
     __component__: T;
 };