@m4l/components 3.1.8 → 4.0.0

package/components/maps/components/Map/featureRenders/MarkerFeatureRender/index-D-Qob8oZ.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { Marker } from "react-leaflet";
+import { shallow } from "zustand/shallow";
+import { useMemo } from "react";
+import L__default from "leaflet";
+import { u as useMapStore } from "../../hooks/useMapStore/index-Dvztupfk.js";
+function CustomMarker(props) {
+  const { position, width, height, iconForm, bearing, ...other } = props;
+  const html = useMemo(() => {
+  }, [bearing]);
+  const customIcon = useMemo(() => {
+    return L__default.divIcon({
+      className: "custom-icon",
+      iconSize: [width, height],
+      html: `<div>Hola</div>`
+    });
+  }, [html]);
+  return /* @__PURE__ */ jsx(
+    Marker,
+    {
+      position,
+      icon: customIcon,
+      ...other
+    }
+  );
+}
+const MarkerFeatureRender = (props) => {
+  const { id, layerId } = props;
+  const feature = useMapStore((state) => {
+    const gObject = state.hashLayers[layerId].geoJsonObject;
+    if (!gObject) {
+      return null;
+    }
+    if (gObject.object.type === "Feature") {
+      return {
+        id: gObject.object.id,
+        geometry: gObject.object.geometry,
+        properties: gObject.object.properties
+      };
+    } else {
+      const feat = gObject.object.features.find((f) => f.id === id);
+      if (feat) {
+        return {
+          id: feat.id,
+          geometry: feat.geometry,
+          properties: feat.properties
+        };
+      }
+      return null;
+    }
+  }, shallow);
+  if (!feature) {
+    return null;
+  }
+  if (feature.geometry.type === "Point") {
+    const [lat, lng] = feature.geometry.coordinates;
+    const bearing = feature.properties?.iconBearing ?? 0;
+    return (
+      // <Marker position={{ lat, lng }}>
+      // ddd
+      // </Marker>
+      /* @__PURE__ */ jsx(
+        CustomMarker,
+        {
+          position: { lat, lng },
+          width: 32,
+          height: 32,
+          bearing,
+          iconForm: "grua",
+          id: feature.id
+        }
+      )
+    );
+  }
+  return null;
+};
+export {
+  MarkerFeatureRender as M
+};

package/components/maps/components/Map/featureRenders/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/maps/components/Map/hooks/useAutoFocus/index-B5V3HGJv.js

@@ -0,0 +1,78 @@
+import { useEffect } from "react";
+import { useMap } from "react-leaflet";
+import { throttle } from "lodash";
+import { shallow } from "zustand/shallow";
+import L__default from "leaflet";
+import { u as useMapStore } from "../useMapStore/index-Dvztupfk.js";
+function useAutoFocus() {
+  const map = useMap();
+  const layerWithAutoFocus = useMapStore((state) => {
+    return state.layersIds.filter((lId) => {
+      if (state.hashLayers[lId].autoFocus && state.hashLayers[lId].visible) {
+        return true;
+      }
+      return false;
+    }).map((layerId) => ({
+      layerId,
+      features: function() {
+        if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+          const layer = state.hashLayers[layerId].geoJsonObject?.object;
+          return layer.features.filter((feature) => feature.layerData !== void 0).map((feature) => ({ featureId: feature.id, layerData: feature.layerData }));
+        } else {
+          const feature = state.hashLayers[layerId].geoJsonObject?.object;
+          if (feature.layerData !== void 0) {
+            return [{ featureId: feature.id, layerData: feature.layerData }];
+          }
+        }
+        return [];
+      }()
+    }));
+  }, shallow);
+  useEffect(() => {
+    const proccesLayerWithAutoFocus = (layersFoucus) => {
+      const layersToFitBounds = [];
+      for (const layerWhitFeatures of layersFoucus) {
+        const features = layerWhitFeatures?.features;
+        for (let i = 0; i < features.length; i++) {
+          const feature = features[i];
+          if (feature.layerData !== void 0) {
+            const featureForBounds = {
+              layerId: layerWhitFeatures.layerId,
+              featureId: feature.featureId,
+              layerData: feature.layerData
+            };
+            layersToFitBounds.push(featureForBounds);
+          } else {
+            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un método getBounds`);
+          }
+        }
+      }
+      if (layersToFitBounds.length > 0) {
+        let featureForBounds = layersToFitBounds[0];
+        let bounds = L__default.latLngBounds(
+          featureForBounds.layerData.boundsNW,
+          featureForBounds.layerData.boundsSE
+        );
+        for (let i = 1; i < layersToFitBounds.length; i++) {
+          featureForBounds = layersToFitBounds[i];
+          const newBounds = L__default.latLngBounds(
+            featureForBounds.layerData.boundsNW,
+            featureForBounds.layerData.boundsSE
+          );
+          bounds = bounds.extend(newBounds);
+        }
+        map.fitBounds(bounds, { animate: false, maxZoom: 22, padding: [50, 50] });
+      }
+    };
+    const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
+      leading: false,
+      // No enviar el primer evento de fitBounds
+      trailing: true
+      // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad del fitBounds
+    });
+    throttleBounds(layerWithAutoFocus);
+  }, [layerWithAutoFocus]);
+}
+export {
+  useAutoFocus as u
+};

package/components/maps/components/Map/hooks/useDisableZoomEvents/index-BCJgjs0e.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useMap } from "react-leaflet";
+function useDisableZoomEvents(node) {
+  const map = useMap();
+  useEffect(() => {
+    if (!map || !node) return;
+    node.addEventListener("mouseover", function() {
+      map.doubleClickZoom.disable();
+      map.scrollWheelZoom.disable();
+    });
+    node.addEventListener("mouseleave", function() {
+      map.scrollWheelZoom.enable();
+      map.doubleClickZoom.enable();
+    });
+  }, [map, node]);
+}
+export {
+  useDisableZoomEvents as u
+};

package/components/maps/components/Map/hooks/useMapStore/index-Dvztupfk.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { M as MapContext } from "../../contexts/MapContext/MapContext-Dtqt0G-8.js";
+function useMapStore(selector, equalityFn) {
+  const context = useContext(MapContext);
+  if (!context) throw new Error("useMapStore context must be use inside MapContext");
+  return useStore(context, selector, equalityFn);
+}
+export {
+  useMapStore as u
+};

package/components/maps/components/Map/icons-CSYh7uR4.js

@@ -0,0 +1,60 @@
+const MAP_ICONS = {
+  /**
+   * Map en general
+   */
+  MAP_ZOOM_IN: "cmp_map_zoom_in.svg",
+  MAP_ZOOM_OUT: "cmp_map_zoom_out.svg",
+  /**
+   * Map sources
+   */
+  MAP_SOURCES_TOOL: "cmp_map_mapsources_tool.svg",
+  MAP_SOURCE_OSM: "cmp_map_mapsources_osm.svg",
+  MAP_SOURCE_GOOGLE_ROADS: "cmp_map_mapsources_google.svg",
+  MAP_SOURCE_GOOGLE_HYBRID: "cmp_map_mapsources_googlehybrid.svg",
+  MAP_SOURCE_GOOGLE_SATELLITE: "cmp_map_mapsources_googlesatelite.svg",
+  MAP_SOURCE_BING: "cmp_map_mapsources_bing.svg",
+  /**
+   * Map sources road options+
+   */
+  MAP_SOURCE_ROAD_TRAFFIC: "cmp_map_mapsources_layer-traffic.svg",
+  MAP_SOURCE_ROAD_TRANSIT: "cmp_map_mapsources_layer-transit.svg",
+  MAP_SOURCE_ROAD_BICYCLING: "cmp_map_mapsources_layer-bicycle.svg",
+  /**
+   * Layers
+   */
+  MAP_LAYERS_TOOL: "cmp_map_layers_tool.svg",
+  MAP_LAYER_VISIBLE: "cmp_map_layers_view.svg",
+  MAP_LAYER_AUTOFOCUS: "cmp_map_layers_zoom_fit.svg",
+  MAP_LAYER_CLUSTER: "cmp_map_layers_cluster.svg",
+  MAP_LAYER_DELETE: "cmp_map_layers_delete.svg",
+  ADD: "add.svg",
+  /** Measure Tool *
+   *
+   */
+  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
+  MAP_MEASURE_TOOL: "cmp_map_measure_tool.svg",
+  GENERAL: "general.svg",
+  CONFIG: "config.svg",
+  STROKE: "stroke.svg",
+  FILL: "fill.svg",
+  // REFRESH: 'refresh.svg',
+  // ENABLED: 'enabled.svg',
+  // DISABLED: 'disabled.svg',
+  EDIT: "edit.svg",
+  DELETE: "delete.svg",
+  ACTIVE: "active.svg",
+  NAME: "name.svg"
+  // EMAIL: 'email.svg',
+  // USER: 'users.svg',
+  // FIRSTNAME: 'first_name.svg',
+  // LASTNAME: 'last_name.svg',
+  // MAIN_PHONE: 'fixed_phone.svg',
+  // SECONDARY_PHONE: 'fixed_phone.svg',
+  // CREATED_AT: 'created_at.svg',
+  // UPDATED_AT: 'updated_at.svg',
+  // VIEW_DETAIL: 'view_detail.svg',
+  // USERS: 'users.svg',
+};
+export {
+  MAP_ICONS as M
+};

package/components/maps/components/Map/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/maps/components/Map/pluginLayers/PolylineWithArrows/index-Dm_IBUkq.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import L__default from "leaflet";
+import "leaflet-polylinedecorator";
+import { useRef, useEffect } from "react";
+import { useMap, Polyline } from "react-leaflet";
+const PolylineWithArrows = ({
+  positions,
+  enableEdit,
+  ...other
+}) => {
+  const map = useMap();
+  const polylineRef = useRef(null);
+  const decoratorRef = useRef(null);
+  useEffect(() => {
+    if (polylineRef.current) {
+      const decorator = L__default.polylineDecorator(polylineRef.current, {
+        patterns: [
+          {
+            // offset: '20%',
+            repeat: 50,
+            symbol: L__default.Symbol.arrowHead({
+              pixelSize: 4,
+              polygon: false,
+              pathOptions: {
+                stroke: true,
+                color: "#ffffff",
+                weight: 2
+              }
+            })
+          }
+        ]
+      }).addTo(map);
+      decoratorRef.current = decorator;
+      if (enableEdit) {
+        polylineRef.current.pm.enable();
+      } else {
+        polylineRef.current.pm.disable();
+      }
+      polylineRef.current.on("pm:change", () => {
+        if (decoratorRef.current) {
+          map.removeLayer(decoratorRef.current);
+        }
+        if (polylineRef.current) {
+          decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
+            patterns: [
+              {
+                // offset: '20%',
+                repeat: 40,
+                symbol: L__default.Symbol.arrowHead({
+                  pixelSize: 4,
+                  polygon: false,
+                  pathOptions: {
+                    stroke: true,
+                    color: "#cc0000",
+                    weight: 2
+                  }
+                })
+              }
+            ]
+          }).addTo(map);
+        }
+      });
+      return () => {
+        if (decoratorRef.current) {
+          map.removeLayer(decoratorRef.current);
+        }
+      };
+    }
+  }, [map, enableEdit]);
+  return /* @__PURE__ */ jsx(Polyline, { positions, ref: polylineRef, ...other });
+};
+export {
+  PolylineWithArrows as P
+};

package/components/maps/components/Map/pluginLayers/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/maps/components/Map/styled-1N0XapIp.js

@@ -0,0 +1,9 @@
+import { styled } from "@mui/material/styles";
+import { MapContainer } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+const MapRootContainer = styled(MapContainer)`
+  ${(props) => props.theme.components?.M4LMap?.styleOverrides}
+`;
+export {
+  MapRootContainer as M
+};

package/components/maps/components/Map/subcomponents/Controls/index-C5gYiv6s.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import L__default from "leaflet";
+import { useMap } from "react-leaflet";
+import { T as TopRightTools } from "./subcomponents/TopRigthTools/index-B32XOyuj.js";
+import { T as TopLeftTools } from "./subcomponents/TopLeftTools/index-C0OW47W_.js";
+import { b as MAP_ZINDEX_OVER_MAP } from "../../constants-B0E5r9Iy.js";
+import { P as PopupsProvider } from "../../../../../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext-CahdzSly.js";
+import { P as PopupsViewer } from "../../../../../popups/components/PopupsViewer/PopupsViewer-GV9DK-G8.js";
+function Controls(props) {
+  const { gpsTools } = props;
+  const map = useMap();
+  const [controlContainer, setControlContainer] = useState(null);
+  useEffect(() => {
+    const cContainer = map.getContainer().getElementsByClassName("leaflet-control-container")[0];
+    if (cContainer !== null) {
+      setControlContainer(cContainer);
+      L__default.DomEvent.disableClickPropagation(cContainer);
+      L__default.DomEvent.disableScrollPropagation(cContainer);
+    }
+  }, [map]);
+  return /* @__PURE__ */ jsxs(
+    PopupsProvider,
+    {
+      baseZindex: MAP_ZINDEX_OVER_MAP,
+      containerElement: map.getContainer(),
+      initialPopups: [
+        {
+          popupId: "popup1",
+          status: "init",
+          iconUrl: "`https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/dynamic_filter/assets/icons/edit.svg`,",
+          title: "Popup 1",
+          subTitle: "Subtitulo",
+          zIndex: 1,
+          componentProps: {},
+          functionComponent: () => /* @__PURE__ */ jsx("div", { children: "MyComponent" })
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(TopLeftTools, {}),
+        /* @__PURE__ */ jsx(TopRightTools, { gpsTools }),
+        controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewer, {}), controlContainer)
+      ]
+    }
+  );
+}
+export {
+  Controls as C
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/index-C0OW47W_.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { L as LayersButton } from "./subcomponents/PopoverToolButton/index-D4MXI7nY.js";
+import { C as Control } from "../../../../external/Control/index-B9L3AeDC.js";
+import { m as mapClasses } from "../../../../classes/index-DHIpfj2O.js";
+function TopLeftTools() {
+  return /* @__PURE__ */ jsxs(Control, { position: "topleft", prepend: true, className: mapClasses.topLeftToolsRoot, children: [
+    /* @__PURE__ */ jsx(LayersButton, { type: "MapSources" }),
+    /* @__PURE__ */ jsx(LayersButton, { type: "Layers" })
+  ] });
+}
+export {
+  TopLeftTools as T
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/index-D4MXI7nY.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useState } from "react";
+import { L as LayersTool } from "./subcomponentes/LayersTool/index-BIJXesGZ.js";
+import { M as MapSourcesTool } from "./subcomponentes/MapSourcesTool/index-BRRqPAf3.js";
+import { useEnvironment } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { m as mapClasses } from "../../../../../../classes/index-DHIpfj2O.js";
+import { M as MAP_ICONS } from "../../../../../../icons-CSYh7uR4.js";
+import { I as IconButton } from "../../../../../../../../../mui_extended/IconButton/IconButton-1jvQBFbH.js";
+import { P as Popover } from "../../../../../../../../../mui_extended/Popover/Popover-B9KxhzxZ.js";
+function LayersButton(props) {
+  const { type } = props;
+  const [open, setOpen] = useState(null);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const theme = useTheme();
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  return (
+    /* LanguagePopoverRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
+        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros componentes
+        de la plataforna web. */
+    /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: handleOpen,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${type === "MapSources" ? MAP_ICONS.MAP_SOURCES_TOOL : MAP_ICONS.MAP_LAYERS_TOOL}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          className: type === "MapSources" ? mapClasses.mapSourcesPopoverRoot : mapClasses.layersPopoverRoot,
+          arrowType: "no-arrow",
+          open: Boolean(open),
+          anchorEl: open,
+          anchorOrigin: { vertical: "bottom", horizontal: "left" },
+          onClose: handleClose,
+          sx: {
+            ...type === "MapSources" ? theme.components?.M4LMapMapSources?.styleOverrides : theme.components?.M4LMapLayers?.styleOverrides
+            // width: 180,
+            // '& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
+          },
+          disableAutoFocus: true,
+          disableRestoreFocus: true,
+          disableEnforceFocus: true,
+          children: type === "MapSources" ? /* @__PURE__ */ jsx(MapSourcesTool, {}) : /* @__PURE__ */ jsx(LayersTool, {})
+        }
+      )
+    ] })
+  );
+}
+export {
+  LayersButton as L
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useCheckedLayers-0DO0RtyK.js

@@ -0,0 +1,17 @@
+import { shallow } from "zustand/shallow";
+import { u as useMapStore } from "../../../../../../../../../hooks/useMapStore/index-Dvztupfk.js";
+function useCheckedLayers(checkedNameSet) {
+  const [checkedLayers, setCheckedLayers] = useMapStore(
+    (state) => [
+      state[`${checkedNameSet}CheckedLayers`],
+      (newSet) => {
+        state.mapActions.setCheckedLayers(checkedNameSet, newSet);
+      }
+    ],
+    shallow
+  );
+  return [checkedLayers, setCheckedLayers];
+}
+export {
+  useCheckedLayers as u
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useColumns-GdkaIDsT.js

@@ -0,0 +1,129 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary-BNALtcTf.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons-CSYh7uR4.js";
+import { Tooltip } from "@mui/material";
+import { C as ColumnSetCheckFormatter } from "../../../../../../../../../../../../DataGrid/formatters/ColumnSetCheckFormatter/index-BaCawLr1.js";
+import { I as Icon } from "../../../../../../../../../../../../Icon/Icon-_wceDYwV.js";
+function useColumns(props) {
+  const {
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const useHook = useCallback(
+    (field) => {
+      if (field === "visible") {
+        return [visibleLayers, setVisibleLayers];
+      } else if (field === "autoFocus") {
+        return [autoFocusLayers, setAutoFocusLayers];
+      } else {
+        return [clusterLayers, setClusterLayers];
+      }
+    },
+    [visibleLayers, autoFocusLayers, clusterLayers]
+  );
+  const columns = useMemo(
+    () => [
+      {
+        key: "name",
+        name: getLabel(MAP_DICCTIONARY.LABEL_NAME),
+        type: "string",
+        width: 150,
+        frozen: true
+      },
+      {
+        key: "visible",
+        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE),
+        width: 50,
+        minWidth: 20,
+        type: "boolean",
+        // isDraggable: false,
+        formatter: ColumnSetCheckFormatter({
+          field: "visible",
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: () => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: "medium",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_VISIBLE}`
+          }
+        ) })
+      },
+      {
+        key: "autoFocus",
+        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
+        minWidth: 20,
+        width: 50,
+        type: "boolean",
+        // frozen: true,
+        // isDraggable: false,
+        formatter: ColumnSetCheckFormatter({
+          field: "autoFocus",
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: () => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: "medium",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_AUTOFOCUS}`
+          }
+        ) })
+      },
+      {
+        key: "cluster",
+        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
+        minWidth: 20,
+        width: 50,
+        type: "boolean",
+        // frozen: true,
+        // isDraggable: false,
+        formatter: ColumnSetCheckFormatter({
+          field: "cluster",
+          disabledGetter: (row) => !row.clusterAble,
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: () => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: "medium",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_CLUSTER}`
+          }
+        ) })
+      }
+      // {
+      //     key: 'checkedInternalFeatures',
+      //     name: getLabel(DICCTIONARY.LABEL_VIEW_INTERNAL_FEATURES),
+      //     width: 80,
+      //     type: 'boolean',
+      //     // isDraggable: false,
+      //     // frozen: true,
+      //     formatter: ColumnSetCheckFormatter({
+      //         field: 'InternalFeatures',
+      //         rowKeyGetter,
+      //         useHook,
+      //     }),
+      //     cellClass: 'rdg-cell-align-center',
+      // },
+    ],
+    [getLabel, useHook]
+  );
+  return { columns };
+}
+export {
+  useColumns as u
+};

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/LayersTool/hooks/useMaster-BCFOeN0s.js

@@ -0,0 +1,52 @@
+import { useCallback, useMemo } from "react";
+import { shallow } from "zustand/shallow";
+import { u as useColumns } from "./useColumns-GdkaIDsT.js";
+import { u as useMapStore } from "../../../../../../../../../hooks/useMapStore/index-Dvztupfk.js";
+import { u as useCheckedLayers } from "./useCheckedLayers-0DO0RtyK.js";
+import { u as useRowActionsGetter } from "./useRowActionsGetter-BU_aVyXe.js";
+function useMaster() {
+  const [hashLayers, layersIds] = useMapStore(
+    (state) => [state.hashLayers, state.layersIds],
+    shallow
+  );
+  const rowKeyGetter = useCallback((row) => row.id, []);
+  const [visibleLayers, setVisibleLayers] = useCheckedLayers("visible");
+  const [autoFocusLayers, setAutoFocusLayers] = useCheckedLayers("autoFocus");
+  const [clusterLayers, setClusterLayers] = useCheckedLayers("cluster");
+  const rows = useMemo(() => {
+    const rows2 = [];
+    layersIds.forEach((layerId) => {
+      if (hashLayers[layerId]) {
+        rows2.push({
+          id: layerId,
+          name: hashLayers[layerId].name || `*${layerId}`,
+          active: hashLayers[layerId].visible,
+          clusterAble: hashLayers[layerId].clusterAble || false,
+          deleteAble: hashLayers[layerId].deleteAble || false
+        });
+      }
+    });
+    return rows2;
+  }, [hashLayers, layersIds]);
+  const { rowActionsGetter } = useRowActionsGetter();
+  const { columns } = useColumns({
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  });
+  return {
+    rowKeyGetter,
+    columns,
+    rows,
+    checkedRows: visibleLayers,
+    onCheckedRowsChange: setVisibleLayers,
+    rowActionsGetter
+  };
+}
+export {
+  useMaster as u
+};