@m4l/components 1.0.11 → 1.0.13

package/components/{mui_extended/Tab/index.37d588d6.js → maps/components/GpsTools/index.20f83559.js}

@@ -1,659 +1,183 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useState, useContext, forwardRef, useRef, useLayoutEffect, useEffect, useMemo, useCallback } from "react";
-import { u as useRowSelection, S as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../../react-data-grid.c5377916.js";
-import { useDrag, useDrop, DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { generateUtilityClasses, generateUtilityClass, styled, Tabs as Tabs$1, Tab as Tab$1, Skeleton, SvgIcon, Checkbox, InputBase, useTheme } from "@mui/material";
-import { d as useDataGrid, e as useFilters, M as MenuActions, f as ColumnDateFormatter, R as RHFAutocomplete, a as DataGrid } from "../../../vendor.5b266106.js";
-import { T as TEST_PROP_ID, a9 as DATAGRID_SELECT_COLUMN_KEY, aa as DATAGRID_ACTIONS_COLUMN_KEY, ab as COMPONENT_MAP_TOOLS_ID, ac as STYLE_OPACITIES, ad as STYLE_WHEIGHTS, ae as STYLE_PATTERNS } from "../../areas/constants.0d3ba950.js";
-import { useModuleSkeleton, useModuleDictionary, getPropertyByString, useEnvironment, useHostTools, useNetwork, useModulePrivileges, usePaginate } from "@m4l/core";
-import { M as MAP_DICCTIONARY } from "../../areas/dictionary.6168209a.js";
-import { u as useGpsToolsStore, g as gpsToolsClasses, a as useLayers, D as DivGpsToolsRoot } from "../../maps/components/GpsTools/index.01acaf3e.js";
+import { createContext, useRef, useEffect, useContext, useState, useMemo, useCallback } from "react";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment, useHostTools, useNetwork, useModulePrivileges, usePaginate } from "@m4l/core";
+import { u as useMapStore, C as CommonFeatureRender, M as MAP_ZINDEX_OVER_MAP, b as MAP_DICCTIONARY } from "../Map/index.c37f3304.js";
 import { shallow } from "zustand/shallow";
+import { createStore, useStore } from "zustand";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { enableMapSet } from "immer";
 import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
 import "@geoman-io/leaflet-geoman-free";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
 import clsx from "clsx";
-import { G as GPSTOOLSICONS } from "../../areas/icons.504ec098.js";
-import { a as DynamicFilter } from "../../DynamicFilter/index.0f04f223.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
+import { a as DynamicFilter } from "../../../DynamicFilter/index.056a99c7.js";
+import { C as ColumnDateFormatter } from "../../../DataGrid/formatters/ColumnDateFormatter/index.e00d0cf2.js";
 import { useFormContext, useWatch } from "react-hook-form";
-import { H as HelperError } from "../../hook-form/HelperError/index.2ed03a3c.js";
-import { u as usePopupsStore } from "../../popups/PopupsProvider/index.d4caacc3.js";
-import { A as Actions, c as ActionFormIntro } from "../../CommonActions/index.19f39dca.js";
-import { B as Button } from "../Button/index.52852c42.js";
+import { H as HelperError } from "../../../hook-form/HelperError/index.c0109d5b.js";
+import { u as usePopupsStore } from "../../../popups/PopupsProvider/index.d7c9efce.js";
+import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.34d569d1.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.258bf919.js";
+import { B as Button } from "../../../mui_extended/Button/index.d742e9ee.js";
 import { useMap } from "react-leaflet";
-import { u as useFormReadyForUpdate } from "../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
 import * as L from "leaflet";
-import { P as PaperForm } from "../../PaperForm/index.1a8b10d4.js";
-import { R as RHFTextField } from "../../hook-form/RHFTextField/index.d207efc1.js";
-import { S as Stack } from "../Stack/index.fe363ca5.js";
-import { P as PropertyValue } from "../../PropertyValue/index.646a7e8b.js";
-import { R as RHFColorPicker } from "../../hook-form/RHFColorPicker/index.66004599.js";
-import { unstable_composeClasses } from "@mui/base";
-import { styled as styled$1 } from "@mui/material/styles";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.aee44365.js";
-import { T as Tooltip } from "../Tooltip/index.49bb5ee1.js";
+import { u as useTab } from "../../../../hooks/useTab/index.8d1a6e63.js";
+import { P as PaperForm } from "../../../PaperForm/index.007ef4cf.js";
+import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.2991d444.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.10e57945.js";
+import { S as Stack } from "../../../mui_extended/Stack/index.fe363ca5.js";
+import { P as PropertyValue } from "../../../PropertyValue/index.51faabb5.js";
+import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.310f6ff0.js";
+import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.e911930f.js";
+import { T as Tooltip } from "../../../mui_extended/Tooltip/index.49bb5ee1.js";
 import * as Yup from "yup";
-import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.95ebabc9.js";
-import { u as useFormAddEdit } from "../../../hooks/useFormAddEdit/index.ecb77e67.js";
-import { u as useModal } from "../../../hooks/useModal/index.d14c7e46.js";
-import { W as WindowConfirm } from "../../modal/WindowConfirm.243e1bef.js";
-import { u as useMapStore } from "../../maps/index.a1bf63f2.js";
-const componentName$2 = "M4LTabs";
-generateUtilityClasses(componentName$2, [
-  "root"
-]);
-function getTabsUtilityClass(slot) {
-  return generateUtilityClass(componentName$2, slot);
-}
-const useTabsUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabsUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const MUITabs = styled(Tabs$1)(({ theme }) => ({
-  ...theme.components?.M4LTabs?.styleOverrides
-}));
-const Tabs = (props) => {
-  const { children, className, ...others } = props;
-  const classes = useTabsUtilityClasses();
-  return /* @__PURE__ */ jsx(MUITabs, { className: clsx(classes.root, className), ...others, children });
-};
-const componentName$1 = "M4LTabContent";
-generateUtilityClasses(componentName$1, [
-  "root"
-]);
-function getTabContentUtilityClass(slot) {
-  return generateUtilityClass(componentName$1, slot);
-}
-const useTabContentUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabContentUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const TabContentRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LTabContent?.styleOverrides
-}));
-const TabContent = (props) => {
-  const { children, className, ...others } = props;
-  const classes = useTabContentUtilityClasses();
-  return /* @__PURE__ */ jsx(TabContentRoot, { className: clsx(classes.root, className), ...others, children });
-};
-const TabRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LTab?.styleOverrides
-}));
-const SKTTabWrapper = styled$1("div")(({ theme }) => ({
-  padding: theme.spacing(1.5, 2)
-}));
-const componentName = "M4LTab";
-generateUtilityClasses(componentName, [
-  "root",
-  "skeleton"
-]);
-function getTabUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const tabUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const COMPONENT_PREFIX = "m4l-tab";
-function Tab(props) {
-  const { SKTWidth, SKTHeight, className, dataTestId = "", ...other } = props;
-  const isSkeleton = useModuleSkeleton();
-  const classes = tabUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    TabRoot,
-    {
-      className: clsx(classes.root, className),
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
-      } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(Tab$1, { ...other }) : /* @__PURE__ */ jsx(
-        SKTTabWrapper,
-        {
-          className: classes.skeleton,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId(
-              COMPONENT_PREFIX,
-              "skeleton",
-              dataTestId
-            )
-          } : {},
-          children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: SKTWidth, height: SKTHeight })
-        }
-      )
-    }
-  );
-}
-const TabContext = createContext(null);
-function TabProvider(props) {
-  const { children, initialValue } = props;
-  const [currentTab, setCurrentTab] = useState(initialValue);
-  const handleChange = (_event, newTab) => {
-    setCurrentTab(newTab);
-  };
-  return /* @__PURE__ */ jsx(
-    TabContext.Provider,
-    {
-      value: {
-        currentTab: currentTab.toString(),
-        handleChange
-      },
-      children
-    }
-  );
-}
-const useTab = () => {
-  const context = useContext(TabContext);
-  if (context === null) {
-    throw new Error("useTab must be used within a TabProvider");
-  }
-  return context;
-};
-function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" }) });
-}
-function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" }) });
-}
-function CheckboxIndeterminateIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
-}
-const CheckboxFormatter = forwardRef(
-  function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
-    function handleChange(e) {
-      onChange(e.target.checked, e.nativeEvent.shiftKey);
-    }
-    return /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked,
-        size: "small",
-        icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-        checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-        indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-        onChange: handleChange,
-        ...props
-      }
-    );
-  }
-);
-const filterColumnClassName = "filter-cell";
-const filterHeight = 35;
-function SelectGroupFormatter(props) {
-  const [isRowSelected, onRowSelectionChange] = useRowSelection();
-  const onChange = (checked) => {
-    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
-  };
-  const cellFormater = SelectCellFormatter({
-    value: isRowSelected,
-    isCellSelected: props.isCellSelected,
-    onChange,
-    "aria-label": "Select Group"
-  });
-  return cellFormater;
-}
-function SelectFormatter(props) {
-  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
-  const onChange = (checked, _isShiftClick) => {
-    const newCheckedRows = new Set(checkedRows);
-    if (checked) {
-      newCheckedRows.add(rowKeyGetter(props.row));
-    } else {
-      newCheckedRows.delete(rowKeyGetter(props.row));
-    }
-    onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
-  };
-  return /* @__PURE__ */ jsx(
-    SelectCellFormatter,
-    {
-      value: checkedRows?.has(rowKeyGetter(props.row)) || false,
-      isCellSelected: props.isCellSelected,
-      onChange,
-      "aria-label": "Select"
-    }
-  );
-}
-const SelectColumnHeaderRenderer = (props) => {
-  const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid();
-  const onAllRowsCheckedChange = (checked) => {
-    if (!onCheckedRowsChange)
-      return;
-    if (checked) {
-      onCheckedRowsChange(new Set(rows.map((r) => rowKeyGetter(r))));
-    } else {
-      onCheckedRowsChange(/* @__PURE__ */ new Set());
-    }
-  };
-  const allRowsChecked = rows.length === checkedRows?.size;
-  return SelectCellFormatter({
-    "aria-label": "Select All",
-    isCellSelected: props.isCellSelected,
-    value: allRowsChecked,
-    onChange: onAllRowsCheckedChange
-  });
-};
-const SelectColumn = {
-  key: DATAGRID_SELECT_COLUMN_KEY,
-  name: "",
-  width: 32,
-  minWidth: 32,
-  isDraggable: false,
-  resizable: false,
-  sortable: false,
-  frozen: true,
-  type: "boolean",
-  headerRenderer: SelectColumnHeaderRenderer,
-  formatter: SelectFormatter,
-  groupFormatter: SelectGroupFormatter
-};
-function useFocusRef(isSelected) {
-  const ref = useRef(null);
-  useLayoutEffect(() => {
-    if (!isSelected)
-      return;
-    ref.current?.focus({ preventScroll: true });
-  }, [isSelected]);
-  return {
-    ref,
-    tabIndex: isSelected ? 0 : -1
-  };
-}
-function DraggableHeaderRenderer(props) {
-  const { onColumnsReorder, column, isCellSelected, ...others } = props;
-  const { ref, tabIndex } = useFocusRef(isCellSelected);
-  const { getLabel } = useModuleDictionary();
-  const { activeFilters, filters, onChangeFilter } = useFilters();
-  const [filter, setFilter] = useState(filters?.get(column.key) || "");
-  const [{ isDragging }, drag] = useDrag({
-    type: "COLUMN_DRAG",
-    item: { key: column.key },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  });
-  const [{ isOver }, drop] = useDrop({
-    accept: "COLUMN_DRAG",
-    drop({ key }) {
-      onColumnsReorder(key, column.key);
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.bf3a2812.js";
+import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.6d983cd8.js";
+import { u as useModal } from "../../../../hooks/useModal/index.2003c854.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.300bd34b.js";
+import { c as DataGrid } from "../../../DataGrid/index.68e19254.js";
+enableMapSet();
+const createGpsToolsStore = (initProps) => {
+  const startProps = {
+    currentTabGpsTool: "geofences",
+    geofenceState: {
+      rows: [],
+      checkedGeofences: /* @__PURE__ */ new Set(),
+      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
+      checkedInternalFeatures: /* @__PURE__ */ new Set(),
+      hashGeofences: {}
     },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
-  });
-  const handleChange = (e) => {
-    if (activeFilters) {
-      if (onChangeFilter)
-        onChangeFilter(column, e.target.value);
-    }
-    setFilter(e.target.value);
+    ...initProps
   };
-  useEffect(() => {
-    if (!activeFilters)
-      setFilter("");
-  }, [activeFilters]);
-  const newColumn = { ...column };
-  if (newColumn.withinHeaderRenderer) {
-    newColumn.name = newColumn.withinHeaderRenderer(props);
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: (newRef) => {
-        drag(newRef);
-        drop(newRef);
-      },
-      style: {
-        opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? "#ececec" : void 0,
-        cursor: "move",
-        display: "flex",
-        flexDirection: "column",
-        lineHeight: "1",
-        height: "100%",
-        justifyContent: "center",
-        textAlign: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
-        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "filter_cell_div",
-            style: {
-              borderTop: "1px solid var(--rdg-border-color)",
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              height: `${filterHeight}px`
-            },
-            children: /* @__PURE__ */ jsx(
-              InputBase,
-              {
-                inputRef: ref,
-                placeholder: getLabel("data_grid.filter_holder"),
-                style: {
-                  width: "100%",
-                  paddingBottom: "2px",
-                  border: "1px solid var(--rdg-border-color)"
-                },
-                tabIndex,
-                type: "text",
-                onChange: handleChange,
-                value: filter
-              }
-            )
+  return createStore(
+    devtools(
+      immer((set, _get) => ({
+        ...startProps,
+        gpsToolsActions: {
+          init: () => {
+            set((state) => {
+              state.ownerState.status = "ready";
+            });
+          },
+          setGpsToolsState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+            });
+          },
+          setCurrentTabTool: (newTabTool) => {
+            set((state) => {
+              state.currentTabGpsTool = newTabTool;
+            });
+          }
+        },
+        geofenceActions: {
+          addGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = geofence;
+            });
+          },
+          updatePartialGeofence: (geofenceId, geofence) => {
+            set((state) => {
+              state.geofenceState.hashGeofences[geofenceId] = {
+                ...state.geofenceState.hashGeofences[geofenceId],
+                ...geofence
+              };
+            });
+          },
+          updateRows: (newRows) => {
+            set((state) => {
+              state.geofenceState.rows = newRows;
+            });
+          },
+          addCheckedGeofence: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences.add(geofenceId);
+              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
+            });
+          },
+          removeCheckedGeofence: (geofenceId) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences.delete(geofenceId);
+              state.geofenceState.checkedGeofences = new Set(state.geofenceState.checkedGeofences);
+            });
+          },
+          setCheckedGeofences: (newGeofences) => {
+            set((state) => {
+              state.geofenceState.checkedGeofences = new Set(newGeofences);
+            });
+          },
+          setCheckedCrossingFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
+            });
+          },
+          setCheckedInternalFeatures: (newFeatures) => {
+            set((state) => {
+              state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
+            });
           }
-        )
-      ]
-    }
-  );
-}
-const getDragHeaderRenderer = (handleColumnsReorder) => {
-  function HeaderRenderer2(props) {
-    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, { ...props, onColumnsReorder: handleColumnsReorder });
-  }
-  return HeaderRenderer2;
-};
-function ActionsFormatter(props) {
-  const { rowActionsGetter, classes } = useDataGrid();
-  const theme = useTheme();
-  if (rowActionsGetter === void 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      arrowType: "top-left",
-      objItem: props.row,
-      menuActions: rowActionsGetter,
-      className: classes.actionsFormatter,
-      menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
-      marginTop: 1,
-      marginLeft: "-11px",
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" }
-    }
-  );
-}
-const ActionsColumn = {
-  key: DATAGRID_ACTIONS_COLUMN_KEY,
-  name: getActionLabel(),
-  width: 32,
-  minWidth: 32,
-  isDraggable: false,
-  withFilter: false,
-  resizable: true,
-  sortable: false,
-  frozen: true,
-  type: "custom",
-  formatter: ActionsFormatter
-};
-function getActionLabel() {
-  return "";
-}
-const WrapperSkeleton = styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  alignItems: "center"
-}));
-function SkeletonFormatter() {
-  const { classes } = useDataGrid();
-  return /* @__PURE__ */ jsx(WrapperSkeleton, { className: classes.skeletonFormatter, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "12px" }) });
-}
-function getComparator(columns, sortColumn) {
-  const column = columns.find((d) => d.key === sortColumn);
-  let typeOrder = "string";
-  if (column) {
-    typeOrder = column.type || "string";
-  }
-  switch (typeOrder) {
-    case "number":
-      return (a, b) => {
-        try {
-          return Number(a[sortColumn]) - Number(b[sortColumn]);
-        } catch (error) {
-          return -1;
-        }
-      };
-    default:
-      return (a, b) => {
-        try {
-          return a[sortColumn].toString().localeCompare(b[sortColumn].toString());
-        } catch (error) {
-          return -1;
         }
-      };
-  }
-}
-const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
-  let filteredSortedColumns = columns.filter((column) => {
-    const columnConfigIndex = getColumIndex(column.key, columnsConfig);
-    const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
-    return !column.hidden && visible;
-  }).sort(
-    (a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
-  ).map((columnSorted) => {
-    const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
-    return {
-      ...columnSorted,
-      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
-      width: typeof columnsWidths.get(columnSorted.key) === "number" ? columnsWidths.get(columnSorted.key) : columnSorted.width
-    };
-  }).sort((a, b) => {
-    const order = (a.frozen === void 0 || a.frozen === false) === (b.frozen === void 0 || b.frozen === false) ? 0 : a.frozen ? -1 : 1;
-    return order;
-  });
-  if (rowActionsGetter) {
-    filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
-  }
-  if (hasCheckedRows) {
-    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
-  }
-  return filteredSortedColumns;
-};
-const getAligByType = (columnType) => {
-  switch (columnType) {
-    case "string":
-      return "left";
-    case "date":
-    case "boolean":
-    case "custom":
-      return "center";
-    case "number":
-      return "right";
-  }
-  return "left";
+      })),
+      { name: `Map Tools Store` }
+    )
+  );
 };
-const useSortColumnsRows = (sourceColumns, sourceRows) => {
-  const {
-    columnsConfig,
-    columnsWidths,
-    onChangeColumnsOrder,
-    rowActionsGetter,
-    checkedRows,
-    onCheckedRowsChange
-  } = useDataGrid();
-  const [columns, setColumns] = useState(() => []);
-  const [sortColumns, setSortColumns] = useState([]);
+const GpsToolsContext = createContext(null);
+function GpsToolsProvider(props) {
+  const { children } = props;
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
-  const { activeFilters, filters } = useFilters();
-  const findKeyInColumns = (key, cols) => {
-    const index = cols.findIndex((column) => key === column.key && column.hidden === false);
-    return index !== -1;
-  };
-  useEffect(() => {
-    setColumns(
-      getInOrderColumns(
-        sourceColumns,
-        !!checkedRows && !!onCheckedRowsChange,
-        columnsConfig,
-        columnsWidths,
-        rowActionsGetter
-      )
-    );
-    const finalSortedColumns = sortColumns.filter(
-      (sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns)
-    );
-    if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
-      setSortColumns(finalSortedColumns);
-    }
-  }, [sourceColumns, columnsConfig, rowActionsGetter]);
-  const finalColumns = useMemo(() => {
-    const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
-    return columns.map((c) => {
-      const newColumn = {
-        ...c,
-        cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
-      };
-      if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
-        return newColumn;
-      }
-      if (isSkeleton) {
-        newColumn.headerRenderer = SkeletonFormatter;
-        newColumn.formatter = SkeletonFormatter;
-      }
-      if (newColumn.headerRenderer) {
-        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
-      }
-      if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
-        newColumn.headerCellClass = filterColumnClassName;
-      }
-      newColumn.headerRenderer = DragAndDropHeaderRenderer;
-      return newColumn;
-    });
-  }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
-  const finalRows = useMemo(() => {
-    const nextRows = sourceRows.filter((r) => {
-      if (!filters || filters.size === 0)
-        return true;
-      const iterator = filters.entries();
-      let valReturn = true;
-      for (let i = 0; i < filters.size; i++) {
-        const entry = iterator.next().value;
-        const columnKey = entry[0];
-        const columnFilter = entry[1];
-        let valCell;
-        const valueMaybeString = getPropertyByString(r, columnKey);
-        let fixedValue;
-        if (typeof valueMaybeString === "string") {
-          fixedValue = valueMaybeString;
-        } else {
-          fixedValue = "";
-        }
-        try {
-          if (columnFilter.customFilter) {
-            valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
-          } else {
-            valCell = fixedValue;
-            valReturn = valReturn && valCell.includes(columnFilter.value);
-          }
-        } catch (error) {
-          continue;
-        }
-        if (!valReturn)
-          break;
-      }
-      return valReturn;
-    });
-    if (sortColumns.length === 0) {
-      return nextRows;
-    }
-    nextRows.sort((a, b) => {
-      for (const sort of sortColumns) {
-        const comparator = getComparator(columns, sort.columnKey);
-        const compResult = comparator(a, b);
-        if (compResult !== 0) {
-          return sort.direction === "ASC" ? compResult : -compResult;
-        }
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createGpsToolsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
       }
-      return 0;
     });
-    return nextRows;
-  }, [sourceRows, sortColumns, filters]);
-  return { finalColumns, sortColumns, setSortColumns, finalRows };
-};
-function Table(props) {
-  const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
-  const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
-    columns,
-    rows
+  }
+  const { setHandlerGetLabel, setExternalState } = useStore(
+    mapStoreRef.current,
+    (state) => state.gpsToolsActions,
+    shallow
   );
-  const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, classes } = useDataGrid();
-  const ref_data_grid = useRef(null);
-  const onRowClick = (row) => {
-    if (selectedRows && onSelectedRowsChange) {
-      if (selectedRows.entries().next().value) {
-        if (selectedRows.entries().next().value[1] === rowKeyGetter(row)) {
-          return;
-        }
-      }
-      const mySet = /* @__PURE__ */ new Set([rowKeyGetter(row)]);
-      onSelectedRowsChange(mySet);
-    }
-  };
   useEffect(() => {
-    let columnIndice = 0;
-    for (const column of finalColumns) {
-      const index = sortColumns.findIndex((sortColumn) => column.key === sortColumn.columnKey);
-      if (index !== -1) {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
-      } else {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.removeAttribute("aria-columnsort");
-      }
-      columnIndice++;
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
     }
-  }, [sortColumns, finalColumns]);
+  }, [getLabel]);
   useEffect(() => {
-    setRowsCount(finalRows.length);
-  }, [finalRows]);
-  const onColumnResize = (idx, width) => {
-    onChangeColumnWidth(finalColumns[idx].key, width);
-  };
-  const onChangeSort = (newSortColumns) => {
-    setSortColumns(newSortColumns);
-  };
-  return /* @__PURE__ */ jsx("div", { className: classes.tableContaniner, id: "WrapperTable", children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
-    DataGrid$1,
-    {
-      className: "fill-grid rdg-light",
-      ref: ref_data_grid,
-      headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-      columns: finalColumns,
-      sortColumns,
-      onSortColumnsChange: onChangeSort,
-      onColumnResize,
-      rows: finalRows,
-      onRowsChange,
-      selectedRows,
-      onSelectedRowsChange,
-      onRowClick,
-      rowHeight: currentRowHeight,
-      rowKeyGetter,
-      cellNavigationMode: "LOOP_OVER_ROW",
-      components: { checkboxFormatter: CheckboxFormatter },
-      defaultColumnOptions: { resizable: true, sortable: true }
+    if (isFirstRender) {
+      return;
     }
-  ) }) }) });
+    setExternalState({ isMobile: !isDesktop, isSkeleton });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(GpsToolsContext.Provider, { value: mapStoreRef.current, children });
+}
+function useGpsToolsStore(selector, equalityFn) {
+  const context = useContext(GpsToolsContext);
+  if (!context)
+    throw new Error("useGpsToolsStore context must be use inside GpsToolsContext");
+  return useStore(context, selector, equalityFn);
 }
 const ENDPOINT_GEOFENCE_GET = "geofences";
 const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
@@ -663,6 +187,170 @@ var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
   GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
   return GeofencesFeaturesLayers2;
 })(GeofencesFeaturesLayers || {});
+function useLayers() {
+  const { addLayer, removeLayer } = useMapStore((state) => state.mapActions, shallow);
+  const { init } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
+  useEffect(() => {
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
+      name: "Geocercas",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
+      name: "Geometr\xEDas de tr\xE1nsito",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    addLayer({
+      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
+      name: "Geometr\xEDas internas",
+      renderFeature: CommonFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocus: false
+    });
+    init();
+    return () => {
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
+      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
+    };
+  }, []);
+}
+const COMPONENT_CLASS_NAME = "M4LGpsTools";
+const COMPONENT_MAP_TOOLS_ID = "gps_tools";
+const STYLE_OPACITIES = [
+  {
+    value: 0,
+    label: "0%"
+  },
+  {
+    value: 0.1,
+    label: "10%"
+  },
+  {
+    value: 0.2,
+    label: "20%"
+  },
+  {
+    value: 0.3,
+    label: "30%"
+  },
+  {
+    value: 0.4,
+    label: "40%"
+  },
+  {
+    value: 0.5,
+    label: "50%"
+  },
+  {
+    value: 1,
+    label: "100%"
+  }
+];
+const STYLE_WHEIGHTS = [
+  {
+    value: 0,
+    label: "0px"
+  },
+  {
+    value: 1,
+    label: "1px"
+  },
+  {
+    value: 2,
+    label: "2px"
+  },
+  {
+    value: 3,
+    label: "3px"
+  },
+  {
+    value: 4,
+    label: "4px"
+  }
+];
+const STYLE_PATTERNS = [
+  {
+    value: "",
+    label: "------"
+  },
+  {
+    value: "4 1 2",
+    label: "-- - - --"
+  }
+];
+const gpsToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "gpsToolsRoot",
+  "gpsToolsTab",
+  "gpsToolsTabContent",
+  "gpsToolsGeofencesList",
+  "gpsToolsGeofencesAddEdit",
+  "gpsToolsGeofencesAddEditContent",
+  "toolGeofencesAddEditGeneral",
+  "toolGeofencesAddEditStyle",
+  "visible",
+  "hidden"
+]);
+const DivGpsToolsRoot = styled("div")`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+
+  z-index: ${MAP_ZINDEX_OVER_MAP};
+
+  .${gpsToolsClasses.gpsToolsTabContent}.${gpsToolsClasses.hidden} {
+    display: none;
+  }
+
+  .${gpsToolsClasses.gpsToolsGeofencesList} .M4LDataGrid-root {
+    height: unset !important;
+    flex-grow: 1;
+  }
+
+  .${gpsToolsClasses.toolGeofencesAddEditGeneral} {
+    flex-grow: 1;
+  }
+
+  ${(props) => props.theme.components?.M4LGpsTools?.styleOverrides}
+`;
+const GPSTOOLSICONS = {
+  GEOMETRY_CIRCLE: "geometry_circle.svg",
+  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
+  GEOMETRY_POLYGON: "geometry_polygon.svg",
+  ADD: "add.svg",
+  MEASURE: "measure.svg",
+  GENERAL: "general.svg",
+  CONFIG: "config.svg",
+  STROKE: "stroke.svg",
+  FILL: "fill.svg",
+  EDIT: "edit.svg",
+  DELETE: "delete.svg",
+  ACTIVE: "active.svg",
+  NAME: "name.svg"
+};
 function Filter(props) {
   const { refresh, setBackendQueryParams } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -1491,7 +1179,7 @@ function useSubmit(props) {
   };
   return { onSubmit };
 }
-const RHFormProviderStyled = styled$1(RHFormProvider)`
+const RHFormProviderStyled = styled(RHFormProvider)`
   height: 100% !important;
 
   .${gpsToolsClasses.gpsToolsGeofencesAddEditContent} {
@@ -1934,7 +1622,7 @@ function useMaster() {
     goToAddEdit: onClickAddGeofence
   };
 }
-const StackGeofenceListRoot = styled$1(Stack)`
+const StackGeofenceListRoot = styled(Stack)`
   padding: 12px;
   position: relative !important;
   flex-grow: 1;
@@ -2074,14 +1762,12 @@ function TabsGpsTools() {
     }
   );
 }
+function GpsTools() {
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(Fragment, { children: !isSkeleton && /* @__PURE__ */ jsx(TabsGpsTools, {}) });
+}
 export {
-  GeofencesFeaturesLayers as G,
-  TabsGpsTools as T,
-  Table as a,
-  Tab as b,
-  Tabs as c,
-  TabContent as d,
-  TabProvider as e,
-  TabContext as f,
-  useTab as u
+  GpsTools as G,
+  GpsToolsProvider as a,
+  useGpsToolsStore as u
 };