@hisptz/dhis2-analytics 1.0.66 → 2.0.0-alpha.0

package/dist/components/Map/components/MapLayer/components/LegendArea/index.js

@@ -0,0 +1,190 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var lodash = require('lodash');
+var React = require('react');
+var CustomControl = require('../../../MapControls/components/CustomControl');
+var interfaces = require('../../interfaces');
+var PointLegend = require('../PointLayer/components/PointLegend');
+var BubbleLegend = require('../ThematicLayer/components/Bubble/components/BubbleLegend');
+var ChoroplethLegend = require('../ThematicLayer/components/Choropleth/components/ChoroplethLegend');
+var EarthEngineLegend = require('../GoogleEngineLayer/components/EarthEngineLegend');
+var classes = require('./LegendArea.module.css');
+var map = require('../../../../hooks/map');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PointLegend__default = /*#__PURE__*/_interopDefault(PointLegend);
+var BubbleLegend__default = /*#__PURE__*/_interopDefault(BubbleLegend);
+var ChoroplethLegend__default = /*#__PURE__*/_interopDefault(ChoroplethLegend);
+var EarthEngineLegend__default = /*#__PURE__*/_interopDefault(EarthEngineLegend);
+var classes__default = /*#__PURE__*/_interopDefault(classes);
+
+const TOOLTIP_OFFSET = 4;
+function getLegendComponent(layer) {
+  if (layer.type === "point") {
+    return /* @__PURE__ */ jsxRuntime.jsx(PointLegend__default.default, { name: layer.label });
+  }
+  if (interfaces.SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EarthEngineLegend__default.default,
+      {
+        name: layer.name ?? "",
+        layer
+      }
+    );
+  }
+  const { type, enabled, control, dataItem, name, data, legends } = layer ?? {};
+  if (!enabled || !control) {
+    return null;
+  }
+  switch (type) {
+    case "bubble":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BubbleLegend__default.default,
+        {
+          radius: layer?.radius ?? {
+            min: 0,
+            max: 50
+          },
+          legends: legends ?? [],
+          name: name ?? dataItem.displayName,
+          data,
+          dataItem: lodash.head(data)?.dataItem ?? dataItem
+        }
+      );
+    case "choropleth":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ChoroplethLegend__default.default,
+        {
+          legends: legends ?? [],
+          name: name ?? dataItem.displayName,
+          data,
+          dataItem: lodash.head(data)?.dataItem ?? dataItem
+        }
+      );
+  }
+}
+function CollapsedLegendIcon({
+  onCollapse,
+  name
+}) {
+  const openDelay = 200;
+  const closeDelay = 200;
+  const [openTooltip, setOpenTooltip] = React.useState(false);
+  const openTimerRef = React.useRef(null);
+  const closeTimerRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const hideModifier = { name: "hide" };
+  const offsetModifier = {
+    name: "offset",
+    options: {
+      offset: [0, TOOLTIP_OFFSET]
+    }
+  };
+  const flipModifier = {
+    name: "flip",
+    options: { altBoundary: true }
+  };
+  const onMouseOver = () => {
+    clearTimeout(closeTimerRef.current);
+    openTimerRef.current = setTimeout(() => {
+      setOpenTooltip(true);
+    }, openDelay);
+  };
+  const onMouseOut = () => {
+    clearTimeout(openTimerRef.current);
+    closeTimerRef.current = setTimeout(() => {
+      setOpenTooltip(false);
+    }, closeDelay);
+  };
+  React.useEffect(
+    () => () => {
+      clearTimeout(openTimerRef.current);
+      clearTimeout(closeTimerRef.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      onMouseOver,
+      onMouseOut,
+      onClick: onCollapse,
+      style: { width: 28, height: 28 },
+      className: "legend-card collapsed",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.IconLegend24, {}),
+        openTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Portal,
+          {
+            className: classes__default.default["map-tooltip"],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Popper,
+              {
+                className: classes__default.default["map-tooltip"],
+                reference: ref,
+                modifiers: [offsetModifier, flipModifier, hideModifier],
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: `${ui.colors.grey900}`,
+                      borderRadius: 3,
+                      color: `${ui.colors.white}`,
+                      padding: "4px 6px"
+                    },
+                    "data-test": `content`,
+                    children: name
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Legend({
+  children,
+  collapsible
+}) {
+  const [collapsed, setCollapsed] = React.useState(collapsible);
+  const inPrintMode = map.usePrintMedia();
+  const onCollapse = () => {
+    if (collapsible) {
+      setCollapsed((prevState) => !prevState);
+    }
+  };
+  const name = lodash.head(React__default.default.Children.toArray(children))?.props.name;
+  const shouldCollapse = collapsed && !inPrintMode;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-100", children: shouldCollapse ? /* @__PURE__ */ jsxRuntime.jsx(CollapsedLegendIcon, { name, onCollapse }) : React__default.default.Children.map(
+    children,
+    (child) => React__default.default.cloneElement(child, { collapsible, onCollapse })
+  ) });
+}
+function LegendArea({
+  layers,
+  legends: legendConfig
+}) {
+  const legends = lodash.compact(
+    layers.filter((layer) => layer.enabled).map(getLegendComponent)
+  );
+  const { position, collapsible } = legendConfig ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx(CustomControl.CustomControl, { position, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column gap-16 align-items-end", children: legends?.map((legend, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    Legend,
+    {
+      collapsible: collapsible ?? true,
+      children: legend
+    },
+    `${index}-map-legend`
+  )) }) });
+}
+
+module.exports = LegendArea;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/LegendArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { colors, IconLegend24, Popper, Portal } from \"@dhis2/ui\";\nimport { ControlPosition } from \"leaflet\";\nimport { compact, head } from \"lodash\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { MapLegendConfig } from \"../../../MapArea/interfaces\";\nimport { CustomControl } from \"../../../MapControls/components/CustomControl\";\nimport {\n\tCustomBubbleLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n\tSUPPORTED_EARTH_ENGINE_LAYERS,\n} from \"../../interfaces\";\nimport PointLegend from \"../PointLayer/components/PointLegend\";\nimport BubbleLegend from \"../ThematicLayer/components/Bubble/components/BubbleLegend\";\nimport ChoroplethLegend from \"../ThematicLayer/components/Choropleth/components/ChoroplethLegend\";\nimport EarthEngineLegend from \"../GoogleEngineLayer/components/EarthEngineLegend\";\nimport classes from \"./LegendArea.module.css\";\nimport { usePrintMedia } from \"../../../../hooks/map\";\n\nconst TOOLTIP_OFFSET = 4;\n\nfunction getLegendComponent(\n\tlayer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer,\n) {\n\tif (layer.type === \"point\") {\n\t\treturn <PointLegend name={layer.label} />;\n\t}\n\n\tif (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {\n\t\treturn (\n\t\t\t<EarthEngineLegend\n\t\t\t\tname={layer.name ?? \"\"}\n\t\t\t\tlayer={layer as CustomGoogleEngineLayer}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst { type, enabled, control, dataItem, name, data, legends } =\n\t\t(layer as CustomThematicLayer) ?? {};\n\n\tif (!enabled || !control) {\n\t\treturn null;\n\t}\n\tswitch (type) {\n\t\tcase \"bubble\":\n\t\t\treturn (\n\t\t\t\t<BubbleLegend\n\t\t\t\t\tradius={\n\t\t\t\t\t\t(layer as CustomBubbleLayer)?.radius ?? {\n\t\t\t\t\t\t\tmin: 0,\n\t\t\t\t\t\t\tmax: 50,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\tname={name ?? dataItem.displayName}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataItem={head(data)?.dataItem ?? dataItem}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"choropleth\":\n\t\t\treturn (\n\t\t\t\t<ChoroplethLegend\n\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\tname={name ?? dataItem.displayName}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataItem={head(data)?.dataItem ?? dataItem}\n\t\t\t\t/>\n\t\t\t);\n\t}\n}\n\nfunction CollapsedLegendIcon({\n\tonCollapse,\n\tname,\n}: {\n\tname: string;\n\tonCollapse: () => void;\n}) {\n\tconst openDelay = 200;\n\tconst closeDelay = 200;\n\tconst [openTooltip, setOpenTooltip] = useState(false);\n\tconst openTimerRef = useRef<any>(null);\n\tconst closeTimerRef = useRef<any>(null);\n\tconst ref = useRef<HTMLDivElement>(null);\n\n\tconst hideModifier = { name: \"hide\" };\n\tconst offsetModifier = {\n\t\tname: \"offset\",\n\t\toptions: {\n\t\t\toffset: [0, TOOLTIP_OFFSET],\n\t\t},\n\t};\n\n\tconst flipModifier = {\n\t\tname: \"flip\",\n\t\toptions: { altBoundary: true },\n\t};\n\n\tconst onMouseOver = () => {\n\t\tclearTimeout(closeTimerRef.current);\n\n\t\topenTimerRef.current = setTimeout(() => {\n\t\t\tsetOpenTooltip(true);\n\t\t}, openDelay);\n\t};\n\n\tconst onMouseOut = () => {\n\t\tclearTimeout(openTimerRef.current);\n\n\t\tcloseTimerRef.current = setTimeout(() => {\n\t\t\tsetOpenTooltip(false);\n\t\t}, closeDelay);\n\t};\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tclearTimeout(openTimerRef.current);\n\t\t\tclearTimeout(closeTimerRef.current);\n\t\t},\n\t\t[],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tonMouseOver={onMouseOver}\n\t\t\tonMouseOut={onMouseOut}\n\t\t\tonClick={onCollapse}\n\t\t\tstyle={{ width: 28, height: 28 }}\n\t\t\tclassName=\"legend-card collapsed\"\n\t\t>\n\t\t\t<IconLegend24 />\n\t\t\t{openTooltip && (\n\t\t\t\t<Portal\n\t\t\t\t\t/*\n\t\t\t  // @ts-ignore */\n\t\t\t\t\tclassName={classes[\"map-tooltip\"]}\n\t\t\t\t>\n\t\t\t\t\t<Popper\n\t\t\t\t\t\tclassName={classes[\"map-tooltip\"]}\n\t\t\t\t\t\treference={ref}\n\t\t\t\t\t\t/*\n      // @ts-ignore */\n\t\t\t\t\t\tmodifiers={[offsetModifier, flipModifier, hideModifier]}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `${colors.grey900}`,\n\t\t\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\t\t\tcolor: `${colors.white}`,\n\t\t\t\t\t\t\t\tpadding: \"4px 6px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-test={`content`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Popper>\n\t\t\t\t</Portal>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction Legend({\n\tchildren,\n\tcollapsible,\n}: {\n\tchildren: React.ReactElement;\n\tcollapsible: boolean;\n}) {\n\tconst [collapsed, setCollapsed] = useState(collapsible);\n\tconst inPrintMode = usePrintMedia();\n\tconst onCollapse = () => {\n\t\tif (collapsible) {\n\t\t\tsetCollapsed((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst name = head(React.Children.toArray(children) as React.ReactElement[])\n\t\t?.props.name;\n\n\tconst shouldCollapse = collapsed && !inPrintMode;\n\n\treturn (\n\t\t<div className=\"w-100\">\n\t\t\t{shouldCollapse ? (\n\t\t\t\t<CollapsedLegendIcon name={name} onCollapse={onCollapse} />\n\t\t\t) : (\n\t\t\t\tReact.Children.map(children, (child) =>\n\t\t\t\t\tReact.cloneElement(child, { collapsible, onCollapse }),\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport default function LegendArea({\n\tlayers,\n\tlegends: legendConfig,\n}: {\n\tlayers: Array<\n\t\tCustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer\n\t>;\n\tposition: ControlPosition;\n\tlegends?: MapLegendConfig;\n}) {\n\tconst legends: JSX.Element[] = compact(\n\t\tlayers.filter((layer) => layer.enabled).map(getLegendComponent),\n\t);\n\tconst { position, collapsible } = legendConfig ?? {};\n\n\treturn (\n\t\t<CustomControl position={position}>\n\t\t\t<div className=\"column gap-16 align-items-end\">\n\t\t\t\t{legends?.map((legend: any, index) => (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\tcollapsible={collapsible ?? true}\n\t\t\t\t\t\tkey={`${index}-map-legend`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Legend>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</CustomControl>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/LegendArea/index.mjs

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconLegend24, Portal, Popper, colors } from '@dhis2/ui';
+import { compact, head } from 'lodash';
+import React, { useState, useRef, useEffect } from 'react';
+import { CustomControl } from '../../../MapControls/components/CustomControl';
+import { SUPPORTED_EARTH_ENGINE_LAYERS } from '../../interfaces';
+import PointLegend from '../PointLayer/components/PointLegend';
+import BubbleLegend from '../ThematicLayer/components/Bubble/components/BubbleLegend';
+import ChoroplethLegend from '../ThematicLayer/components/Choropleth/components/ChoroplethLegend';
+import EarthEngineLegend from '../GoogleEngineLayer/components/EarthEngineLegend';
+import classes from './LegendArea.module.css';
+import { usePrintMedia } from '../../../../hooks/map';
+
+const TOOLTIP_OFFSET = 4;
+function getLegendComponent(layer) {
+  if (layer.type === "point") {
+    return /* @__PURE__ */ jsx(PointLegend, { name: layer.label });
+  }
+  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
+    return /* @__PURE__ */ jsx(
+      EarthEngineLegend,
+      {
+        name: layer.name ?? "",
+        layer
+      }
+    );
+  }
+  const { type, enabled, control, dataItem, name, data, legends } = layer ?? {};
+  if (!enabled || !control) {
+    return null;
+  }
+  switch (type) {
+    case "bubble":
+      return /* @__PURE__ */ jsx(
+        BubbleLegend,
+        {
+          radius: layer?.radius ?? {
+            min: 0,
+            max: 50
+          },
+          legends: legends ?? [],
+          name: name ?? dataItem.displayName,
+          data,
+          dataItem: head(data)?.dataItem ?? dataItem
+        }
+      );
+    case "choropleth":
+      return /* @__PURE__ */ jsx(
+        ChoroplethLegend,
+        {
+          legends: legends ?? [],
+          name: name ?? dataItem.displayName,
+          data,
+          dataItem: head(data)?.dataItem ?? dataItem
+        }
+      );
+  }
+}
+function CollapsedLegendIcon({
+  onCollapse,
+  name
+}) {
+  const openDelay = 200;
+  const closeDelay = 200;
+  const [openTooltip, setOpenTooltip] = useState(false);
+  const openTimerRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const ref = useRef(null);
+  const hideModifier = { name: "hide" };
+  const offsetModifier = {
+    name: "offset",
+    options: {
+      offset: [0, TOOLTIP_OFFSET]
+    }
+  };
+  const flipModifier = {
+    name: "flip",
+    options: { altBoundary: true }
+  };
+  const onMouseOver = () => {
+    clearTimeout(closeTimerRef.current);
+    openTimerRef.current = setTimeout(() => {
+      setOpenTooltip(true);
+    }, openDelay);
+  };
+  const onMouseOut = () => {
+    clearTimeout(openTimerRef.current);
+    closeTimerRef.current = setTimeout(() => {
+      setOpenTooltip(false);
+    }, closeDelay);
+  };
+  useEffect(
+    () => () => {
+      clearTimeout(openTimerRef.current);
+      clearTimeout(closeTimerRef.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onMouseOver,
+      onMouseOut,
+      onClick: onCollapse,
+      style: { width: 28, height: 28 },
+      className: "legend-card collapsed",
+      children: [
+        /* @__PURE__ */ jsx(IconLegend24, {}),
+        openTooltip && /* @__PURE__ */ jsx(
+          Portal,
+          {
+            className: classes["map-tooltip"],
+            children: /* @__PURE__ */ jsx(
+              Popper,
+              {
+                className: classes["map-tooltip"],
+                reference: ref,
+                modifiers: [offsetModifier, flipModifier, hideModifier],
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: `${colors.grey900}`,
+                      borderRadius: 3,
+                      color: `${colors.white}`,
+                      padding: "4px 6px"
+                    },
+                    "data-test": `content`,
+                    children: name
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Legend({
+  children,
+  collapsible
+}) {
+  const [collapsed, setCollapsed] = useState(collapsible);
+  const inPrintMode = usePrintMedia();
+  const onCollapse = () => {
+    if (collapsible) {
+      setCollapsed((prevState) => !prevState);
+    }
+  };
+  const name = head(React.Children.toArray(children))?.props.name;
+  const shouldCollapse = collapsed && !inPrintMode;
+  return /* @__PURE__ */ jsx("div", { className: "w-100", children: shouldCollapse ? /* @__PURE__ */ jsx(CollapsedLegendIcon, { name, onCollapse }) : React.Children.map(
+    children,
+    (child) => React.cloneElement(child, { collapsible, onCollapse })
+  ) });
+}
+function LegendArea({
+  layers,
+  legends: legendConfig
+}) {
+  const legends = compact(
+    layers.filter((layer) => layer.enabled).map(getLegendComponent)
+  );
+  const { position, collapsible } = legendConfig ?? {};
+  return /* @__PURE__ */ jsx(CustomControl, { position, children: /* @__PURE__ */ jsx("div", { className: "column gap-16 align-items-end", children: legends?.map((legend, index) => /* @__PURE__ */ jsx(
+    Legend,
+    {
+      collapsible: collapsible ?? true,
+      children: legend
+    },
+    `${index}-map-legend`
+  )) }) });
+}
+
+export { LegendArea as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Map/components/MapLayer/components/LegendArea/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { colors, IconLegend24, Popper, Portal } from \"@dhis2/ui\";\nimport { ControlPosition } from \"leaflet\";\nimport { compact, head } from \"lodash\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { MapLegendConfig } from \"../../../MapArea/interfaces\";\nimport { CustomControl } from \"../../../MapControls/components/CustomControl\";\nimport {\n\tCustomBubbleLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n\tSUPPORTED_EARTH_ENGINE_LAYERS,\n} from \"../../interfaces\";\nimport PointLegend from \"../PointLayer/components/PointLegend\";\nimport BubbleLegend from \"../ThematicLayer/components/Bubble/components/BubbleLegend\";\nimport ChoroplethLegend from \"../ThematicLayer/components/Choropleth/components/ChoroplethLegend\";\nimport EarthEngineLegend from \"../GoogleEngineLayer/components/EarthEngineLegend\";\nimport classes from \"./LegendArea.module.css\";\nimport { usePrintMedia } from \"../../../../hooks/map\";\n\nconst TOOLTIP_OFFSET = 4;\n\nfunction getLegendComponent(\n\tlayer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer,\n) {\n\tif (layer.type === \"point\") {\n\t\treturn <PointLegend name={layer.label} />;\n\t}\n\n\tif (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {\n\t\treturn (\n\t\t\t<EarthEngineLegend\n\t\t\t\tname={layer.name ?? \"\"}\n\t\t\t\tlayer={layer as CustomGoogleEngineLayer}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst { type, enabled, control, dataItem, name, data, legends } =\n\t\t(layer as CustomThematicLayer) ?? {};\n\n\tif (!enabled || !control) {\n\t\treturn null;\n\t}\n\tswitch (type) {\n\t\tcase \"bubble\":\n\t\t\treturn (\n\t\t\t\t<BubbleLegend\n\t\t\t\t\tradius={\n\t\t\t\t\t\t(layer as CustomBubbleLayer)?.radius ?? {\n\t\t\t\t\t\t\tmin: 0,\n\t\t\t\t\t\t\tmax: 50,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\tname={name ?? dataItem.displayName}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataItem={head(data)?.dataItem ?? dataItem}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"choropleth\":\n\t\t\treturn (\n\t\t\t\t<ChoroplethLegend\n\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\tname={name ?? dataItem.displayName}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataItem={head(data)?.dataItem ?? dataItem}\n\t\t\t\t/>\n\t\t\t);\n\t}\n}\n\nfunction CollapsedLegendIcon({\n\tonCollapse,\n\tname,\n}: {\n\tname: string;\n\tonCollapse: () => void;\n}) {\n\tconst openDelay = 200;\n\tconst closeDelay = 200;\n\tconst [openTooltip, setOpenTooltip] = useState(false);\n\tconst openTimerRef = useRef<any>(null);\n\tconst closeTimerRef = useRef<any>(null);\n\tconst ref = useRef<HTMLDivElement>(null);\n\n\tconst hideModifier = { name: \"hide\" };\n\tconst offsetModifier = {\n\t\tname: \"offset\",\n\t\toptions: {\n\t\t\toffset: [0, TOOLTIP_OFFSET],\n\t\t},\n\t};\n\n\tconst flipModifier = {\n\t\tname: \"flip\",\n\t\toptions: { altBoundary: true },\n\t};\n\n\tconst onMouseOver = () => {\n\t\tclearTimeout(closeTimerRef.current);\n\n\t\topenTimerRef.current = setTimeout(() => {\n\t\t\tsetOpenTooltip(true);\n\t\t}, openDelay);\n\t};\n\n\tconst onMouseOut = () => {\n\t\tclearTimeout(openTimerRef.current);\n\n\t\tcloseTimerRef.current = setTimeout(() => {\n\t\t\tsetOpenTooltip(false);\n\t\t}, closeDelay);\n\t};\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tclearTimeout(openTimerRef.current);\n\t\t\tclearTimeout(closeTimerRef.current);\n\t\t},\n\t\t[],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tonMouseOver={onMouseOver}\n\t\t\tonMouseOut={onMouseOut}\n\t\t\tonClick={onCollapse}\n\t\t\tstyle={{ width: 28, height: 28 }}\n\t\t\tclassName=\"legend-card collapsed\"\n\t\t>\n\t\t\t<IconLegend24 />\n\t\t\t{openTooltip && (\n\t\t\t\t<Portal\n\t\t\t\t\t/*\n\t\t\t  // @ts-ignore */\n\t\t\t\t\tclassName={classes[\"map-tooltip\"]}\n\t\t\t\t>\n\t\t\t\t\t<Popper\n\t\t\t\t\t\tclassName={classes[\"map-tooltip\"]}\n\t\t\t\t\t\treference={ref}\n\t\t\t\t\t\t/*\n      // @ts-ignore */\n\t\t\t\t\t\tmodifiers={[offsetModifier, flipModifier, hideModifier]}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `${colors.grey900}`,\n\t\t\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\t\t\tcolor: `${colors.white}`,\n\t\t\t\t\t\t\t\tpadding: \"4px 6px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-test={`content`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Popper>\n\t\t\t\t</Portal>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction Legend({\n\tchildren,\n\tcollapsible,\n}: {\n\tchildren: React.ReactElement;\n\tcollapsible: boolean;\n}) {\n\tconst [collapsed, setCollapsed] = useState(collapsible);\n\tconst inPrintMode = usePrintMedia();\n\tconst onCollapse = () => {\n\t\tif (collapsible) {\n\t\t\tsetCollapsed((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst name = head(React.Children.toArray(children) as React.ReactElement[])\n\t\t?.props.name;\n\n\tconst shouldCollapse = collapsed && !inPrintMode;\n\n\treturn (\n\t\t<div className=\"w-100\">\n\t\t\t{shouldCollapse ? (\n\t\t\t\t<CollapsedLegendIcon name={name} onCollapse={onCollapse} />\n\t\t\t) : (\n\t\t\t\tReact.Children.map(children, (child) =>\n\t\t\t\t\tReact.cloneElement(child, { collapsible, onCollapse }),\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport default function LegendArea({\n\tlayers,\n\tlegends: legendConfig,\n}: {\n\tlayers: Array<\n\t\tCustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer\n\t>;\n\tposition: ControlPosition;\n\tlegends?: MapLegendConfig;\n}) {\n\tconst legends: JSX.Element[] = compact(\n\t\tlayers.filter((layer) => layer.enabled).map(getLegendComponent),\n\t);\n\tconst { position, collapsible } = legendConfig ?? {};\n\n\treturn (\n\t\t<CustomControl position={position}>\n\t\t\t<div className=\"column gap-16 align-items-end\">\n\t\t\t\t{legends?.map((legend: any, index) => (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\tcollapsible={collapsible ?? true}\n\t\t\t\t\t\tkey={`${index}-map-legend`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Legend>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</CustomControl>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var appRuntime = require('@dhis2/app-runtime');
+var ui = require('@dhis2/ui');
+var react = require('react');
+var helpers = require('../../../../../../utils/helpers');
+var LegendCardHeader = require('../../../LegendArea/components/LegendCardHeader');
+var hooks = require('../../hooks');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var LegendCardHeader__default = /*#__PURE__*/_interopDefault(LegendCardHeader);
+
+function PointLegends({
+  orgUnitGroups,
+  icon,
+  label
+}) {
+  const { baseUrl } = appRuntime.useConfig();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { minWidth: 100, alignItems: "flex-start" },
+      className: "w-100 p-8 legend-list column",
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "row gap-16  align-items-center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  height: 20,
+                  width: 20,
+                  alt: `${name}-icon`,
+                  src: helpers.getIconUrl(icon, { baseUrl })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: label })
+            ]
+          },
+          `${icon}-legend`
+        ),
+        orgUnitGroups.map(({ name: name2, symbol }) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "row gap-16  align-items-center",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    height: 20,
+                    width: 20,
+                    alt: `${name2}-icon`,
+                    src: helpers.getIconUrl(symbol ?? "", { baseUrl })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: name2 })
+              ]
+            },
+            `${name2}-legend`
+          );
+        })
+      ]
+    }
+  );
+}
+function PointLegend({ collapsible, onCollapse }, ref) {
+  const pointLayer = hooks.usePointLayer();
+  const { label, style } = pointLayer ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "legend-card", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LegendCardHeader__default.default, { collapsible, onCollapse, title: label ?? "Points" }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+    /* @__PURE__ */ jsxRuntime.jsx(PointLegends, { label, orgUnitGroups: style?.orgUnitGroups ?? [], icon: style?.icon })
+  ] });
+}
+var PointLegend_default = react.forwardRef(PointLegend);
+
+module.exports = PointLegend_default;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx"],"names":["name"],"mappings":"AAwBI,SAIC,KAJD;AAxBJ,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,OAAO,sBAAsB;AAC7B,SAAS,qBAAqB;AAE9B,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,EAAE,QAAQ,IAAI,UAAU;AAE9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,UAAU,KAAK,YAAY,aAAa;AAAA,MACjD,WAAU;AAAA,MAET;AAAA,gBACA;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,QAAQ;AAAA,kBACR,OAAO;AAAA,kBACP,KAAK,GAAG,IAAI;AAAA,kBACZ,KAAK,WAAW,MAAM,EAAE,QAAQ,CAAC;AAAA;AAAA,cAClC;AAAA,cACA,oBAAC,OAAG,iBAAM;AAAA;AAAA;AAAA,UATL,GAAG,IAAI;AAAA,QAUb;AAAA,QAEA,cAAc,IAAI,CAAC,EAAE,MAAAA,OAAM,OAAO,MAAM;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,QAAQ;AAAA,oBACR,OAAO;AAAA,oBACP,KAAK,GAAGA,KAAI;AAAA,oBACZ,KAAK,WAAW,UAAU,IAAI,EAAE,QAAQ,CAAC;AAAA;AAAA,gBAC1C;AAAA,gBACA,oBAAC,OAAG,UAAAA,OAAK;AAAA;AAAA;AAAA,YATJ,GAAGA,KAAI;AAAA,UAUb;AAAA,QAEF,CAAC;AAAA;AAAA;AAAA,EACF;AAEF;AAEA,SAAS,YAAY,EAAE,aAAa,WAAW,GAAQ,KAAsC;AAC3F,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,OAAO,MAAM,IAAI,cAAc,CAAC;AAExC,SACE,qBAAC,SAAI,KAAU,WAAU,eACvB;AAAA,wBAAC,oBAAiB,aAA0B,YAAwB,OAAO,SAAS,UAAU;AAAA,IAC9F,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB,oBAAC,gBAAa,OAAc,eAAe,OAAO,iBAAiB,CAAC,GAAG,MAAM,OAAO,MAAM;AAAA,KAC5F;AAEJ;AAEA,IAAO,sBAAQ,WAAW,WAAW","sourcesContent":["import { useConfig } from \"@dhis2/app-runtime\";\nimport { Divider } from \"@dhis2/ui\";\nimport React, { forwardRef } from \"react\";\nimport { getIconUrl } from \"../../../../../../utils/helpers\";\nimport LegendCardHeader from \"../../../LegendArea/components/LegendCardHeader\";\nimport { usePointLayer } from \"../../hooks\";\n\nfunction PointLegends({\n\torgUnitGroups,\n\ticon,\n\tlabel,\n}: {\n\torgUnitGroups: { name: string; symbol: string }[];\n\ticon?: string;\n\tlabel?: string;\n}) {\n\tconst { baseUrl } = useConfig();\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ minWidth: 100, alignItems: \"flex-start\" }}\n\t\t\tclassName=\"w-100 p-8 legend-list column\"\n\t\t>\n\t\t\t{icon && (\n\t\t\t\t<div\n\t\t\t\t\tkey={`${icon}-legend`}\n\t\t\t\t\tclassName=\"row gap-16  align-items-center\"\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\talt={`${name}-icon`}\n\t\t\t\t\t\tsrc={getIconUrl(icon, { baseUrl })}\n\t\t\t\t\t/>\n\t\t\t\t\t<p>{label}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{orgUnitGroups.map(({ name, symbol }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`${name}-legend`}\n\t\t\t\t\t\tclassName=\"row gap-16  align-items-center\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\talt={`${name}-icon`}\n\t\t\t\t\t\t\tsrc={getIconUrl(symbol ?? \"\", { baseUrl })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<p>{name}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nfunction PointLegend({ collapsible, onCollapse }: any, ref: React.LegacyRef<HTMLDivElement>) {\n  const pointLayer = usePointLayer();\n  const { label, style } = pointLayer ?? {};\n\n  return (\n    <div ref={ref} className=\"legend-card\">\n      <LegendCardHeader collapsible={collapsible} onCollapse={onCollapse} title={label ?? \"Points\"} />\n      <Divider margin={\"0\"} />\n      <PointLegends label={label} orgUnitGroups={style?.orgUnitGroups ?? []} icon={style?.icon} />\n    </div>\n  );\n}\n\nexport default forwardRef(PointLegend);\n"]}

package/dist/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.mjs

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useConfig } from '@dhis2/app-runtime';
+import { Divider } from '@dhis2/ui';
+import { forwardRef } from 'react';
+import { getIconUrl } from '../../../../../../utils/helpers';
+import LegendCardHeader from '../../../LegendArea/components/LegendCardHeader';
+import { usePointLayer } from '../../hooks';
+
+function PointLegends({
+  orgUnitGroups,
+  icon,
+  label
+}) {
+  const { baseUrl } = useConfig();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { minWidth: 100, alignItems: "flex-start" },
+      className: "w-100 p-8 legend-list column",
+      children: [
+        icon && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "row gap-16  align-items-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  height: 20,
+                  width: 20,
+                  alt: `${name}-icon`,
+                  src: getIconUrl(icon, { baseUrl })
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { children: label })
+            ]
+          },
+          `${icon}-legend`
+        ),
+        orgUnitGroups.map(({ name: name2, symbol }) => {
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "row gap-16  align-items-center",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    height: 20,
+                    width: 20,
+                    alt: `${name2}-icon`,
+                    src: getIconUrl(symbol ?? "", { baseUrl })
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { children: name2 })
+              ]
+            },
+            `${name2}-legend`
+          );
+        })
+      ]
+    }
+  );
+}
+function PointLegend({ collapsible, onCollapse }, ref) {
+  const pointLayer = usePointLayer();
+  const { label, style } = pointLayer ?? {};
+  return /* @__PURE__ */ jsxs("div", { ref, className: "legend-card", children: [
+    /* @__PURE__ */ jsx(LegendCardHeader, { collapsible, onCollapse, title: label ?? "Points" }),
+    /* @__PURE__ */ jsx(Divider, { margin: "0" }),
+    /* @__PURE__ */ jsx(PointLegends, { label, orgUnitGroups: style?.orgUnitGroups ?? [], icon: style?.icon })
+  ] });
+}
+var PointLegend_default = forwardRef(PointLegend);
+
+export { PointLegend_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx"],"names":["name"],"mappings":"AAwBI,SAIC,KAJD;AAxBJ,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,OAAO,sBAAsB;AAC7B,SAAS,qBAAqB;AAE9B,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,EAAE,QAAQ,IAAI,UAAU;AAE9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,UAAU,KAAK,YAAY,aAAa;AAAA,MACjD,WAAU;AAAA,MAET;AAAA,gBACA;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,QAAQ;AAAA,kBACR,OAAO;AAAA,kBACP,KAAK,GAAG,IAAI;AAAA,kBACZ,KAAK,WAAW,MAAM,EAAE,QAAQ,CAAC;AAAA;AAAA,cAClC;AAAA,cACA,oBAAC,OAAG,iBAAM;AAAA;AAAA;AAAA,UATL,GAAG,IAAI;AAAA,QAUb;AAAA,QAEA,cAAc,IAAI,CAAC,EAAE,MAAAA,OAAM,OAAO,MAAM;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,QAAQ;AAAA,oBACR,OAAO;AAAA,oBACP,KAAK,GAAGA,KAAI;AAAA,oBACZ,KAAK,WAAW,UAAU,IAAI,EAAE,QAAQ,CAAC;AAAA;AAAA,gBAC1C;AAAA,gBACA,oBAAC,OAAG,UAAAA,OAAK;AAAA;AAAA;AAAA,YATJ,GAAGA,KAAI;AAAA,UAUb;AAAA,QAEF,CAAC;AAAA;AAAA;AAAA,EACF;AAEF;AAEA,SAAS,YAAY,EAAE,aAAa,WAAW,GAAQ,KAAsC;AAC3F,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,OAAO,MAAM,IAAI,cAAc,CAAC;AAExC,SACE,qBAAC,SAAI,KAAU,WAAU,eACvB;AAAA,wBAAC,oBAAiB,aAA0B,YAAwB,OAAO,SAAS,UAAU;AAAA,IAC9F,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB,oBAAC,gBAAa,OAAc,eAAe,OAAO,iBAAiB,CAAC,GAAG,MAAM,OAAO,MAAM;AAAA,KAC5F;AAEJ;AAEA,IAAO,sBAAQ,WAAW,WAAW","sourcesContent":["import { useConfig } from \"@dhis2/app-runtime\";\nimport { Divider } from \"@dhis2/ui\";\nimport React, { forwardRef } from \"react\";\nimport { getIconUrl } from \"../../../../../../utils/helpers\";\nimport LegendCardHeader from \"../../../LegendArea/components/LegendCardHeader\";\nimport { usePointLayer } from \"../../hooks\";\n\nfunction PointLegends({\n\torgUnitGroups,\n\ticon,\n\tlabel,\n}: {\n\torgUnitGroups: { name: string; symbol: string }[];\n\ticon?: string;\n\tlabel?: string;\n}) {\n\tconst { baseUrl } = useConfig();\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ minWidth: 100, alignItems: \"flex-start\" }}\n\t\t\tclassName=\"w-100 p-8 legend-list column\"\n\t\t>\n\t\t\t{icon && (\n\t\t\t\t<div\n\t\t\t\t\tkey={`${icon}-legend`}\n\t\t\t\t\tclassName=\"row gap-16  align-items-center\"\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\talt={`${name}-icon`}\n\t\t\t\t\t\tsrc={getIconUrl(icon, { baseUrl })}\n\t\t\t\t\t/>\n\t\t\t\t\t<p>{label}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{orgUnitGroups.map(({ name, symbol }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`${name}-legend`}\n\t\t\t\t\t\tclassName=\"row gap-16  align-items-center\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\talt={`${name}-icon`}\n\t\t\t\t\t\t\tsrc={getIconUrl(symbol ?? \"\", { baseUrl })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<p>{name}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nfunction PointLegend({ collapsible, onCollapse }: any, ref: React.LegacyRef<HTMLDivElement>) {\n  const pointLayer = usePointLayer();\n  const { label, style } = pointLayer ?? {};\n\n  return (\n    <div ref={ref} className=\"legend-card\">\n      <LegendCardHeader collapsible={collapsible} onCollapse={onCollapse} title={label ?? \"Points\"} />\n      <Divider margin={\"0\"} />\n      <PointLegends label={label} orgUnitGroups={style?.orgUnitGroups ?? []} icon={style?.icon} />\n    </div>\n  );\n}\n\nexport default forwardRef(PointLegend);\n"]}

package/dist/components/Map/components/MapLayer/components/PointLayer/hooks/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var lodash = require('lodash');
+var hooks = require('../../../../MapProvider/hooks');
+
+function usePointLayer() {
+  const { layers } = hooks.useMapLayers();
+  return lodash.find(layers, ["type", "point"]);
+}
+
+exports.usePointLayer = usePointLayer;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/PointLayer/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/hooks/index.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,SAAS,gBAAgB;AAC/B,QAAM,EAAE,OAAO,IAAI,aAAa;AAChC,SAAO,KAAK,QAAQ,CAAC,QAAQ,OAAO,CAAC;AACtC","sourcesContent":["import { find } from \"lodash\";\nimport { useMapLayers } from \"../../../../MapProvider/hooks\";\nimport { CustomPointLayer } from \"../../../interfaces\";\n\nexport function usePointLayer() {\n\tconst { layers } = useMapLayers();\n\treturn find(layers, [\"type\", \"point\"]) as CustomPointLayer;\n}\n"]}

package/dist/components/Map/components/MapLayer/components/PointLayer/hooks/index.mjs

@@ -0,0 +1,11 @@
+import { find } from 'lodash';
+import { useMapLayers } from '../../../../MapProvider/hooks';
+
+function usePointLayer() {
+  const { layers } = useMapLayers();
+  return find(layers, ["type", "point"]);
+}
+
+export { usePointLayer };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Map/components/MapLayer/components/PointLayer/hooks/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/hooks/index.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,SAAS,gBAAgB;AAC/B,QAAM,EAAE,OAAO,IAAI,aAAa;AAChC,SAAO,KAAK,QAAQ,CAAC,QAAQ,OAAO,CAAC;AACtC","sourcesContent":["import { find } from \"lodash\";\nimport { useMapLayers } from \"../../../../MapProvider/hooks\";\nimport { CustomPointLayer } from \"../../../interfaces\";\n\nexport function usePointLayer() {\n\tconst { layers } = useMapLayers();\n\treturn find(layers, [\"type\", \"point\"]) as CustomPointLayer;\n}\n"]}