@m4l/components 1.0.0 → 1.0.2

package/components/{maps/components/GpsTools/index.75880ce0.js → mui_extended/Tab/index.ad88441e.js}

@@ -1,261 +1,667 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useRef, useEffect, useContext, useState, useMemo, useCallback } from "react";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, useHostTools, useNetwork, useModulePrivileges, usePaginate } from "@m4l/core";
-import { M as MAP_DICCTIONARY } from "../../../areas/dictionary.7e74022a.js";
+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 { f as useDataGrid, g as useFilters, M as MenuActions, h as ColumnDateFormatter, A as Actions, i as ActionFormIntro, R as RHFAutocomplete, a as DataGrid } from "../../../vendor.3eadfa16.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.630a4f42.js";
+import { useModuleSkeleton, useModuleDictionary, getPropertyByString, useEnvironment, useHostTools, useNetwork, useModulePrivileges, usePaginate } from "@m4l/core";
+import { M as MAP_DICCTIONARY } from "../../areas/dictionary.19b25583.js";
+import { u as useGpsToolsStore, g as gpsToolsClasses, a as useLayers, D as DivGpsToolsRoot } from "../../maps/components/GpsTools/index.ef751d28.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 { u as useMapStore, C as CommonFeatureRender } from "../../index.8ec46ce4.js";
-import { a9 as GeofencesFeaturesLayers, aa as COMPONENT_CLASS_NAME, M as MAP_ZINDEX_OVER_MAP, ab as COMPONENT_MAP_TOOLS_ID, ac as initialValues, ad as STROKE_COLOR_DEFAULT, ae as STROKE_OPACITY_DEFAULT, af as STROKE_WHEIGTH_DEFAULT, ag as STROKE_DASH_ARRAY_DEFAULT, ah as FILL_COLOR_DEFAULT, ai as FILL_OPACITY_DEFAULT, aj as STYLE_OPACITIES, ak as STYLE_WHEIGHTS, al as STYLE_PATTERNS, am as ENDPOINT_GEOFENCE_NEW_EDIT, an as ENDPOINT_GEOFENCE_GET } from "../../../areas/constants.5387d83e.js";
 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 { D as DynamicFilter } from "../../../DynamicFilter/index.d9168c12.js";
-import { j as ColumnDateFormatter, d as Actions, H as HelperError, B as Button, k as ActionFormIntro, a as RHFTextField, S as Stack, R as RHFAutocomplete, l as RHFColorPicker, m as Tabs, n as Tab, o as Tooltip, p as TabContent, q as TabProvider, g as DataGrid } from "../../../../vendor.a1ce6777.js";
+import { G as GPSTOOLSICONS } from "../../areas/icons.504ec098.js";
+import { D as DynamicFilter } from "../../DynamicFilter/index.05e15fb8.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormContext, useWatch } from "react-hook-form";
-import { u as usePopupsStore } from "../../../popups/PopupsProvider/index.18669fb4.js";
+import { H as HelperError } from "../../hook-form/HelperError/index.fd10c3ab.js";
+import { u as usePopupsStore } from "../../popups/PopupsProvider/index.3b43e55f.js";
+import { B as Button } from "../Button/index.a7dc6ef0.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 { u as useTab } from "../../../../hooks/useTab/index.bce8b99e.js";
-import { P as PaperForm } from "../../../PaperForm/index.8121e3da.js";
-import { P as PropertyValue } from "../../../PropertyValue/index.9572c347.js";
+import { P as PaperForm } from "../../PaperForm/index.e04f9f1f.js";
+import { R as RHFTextField } from "../../hook-form/RHFTextField/index.2ae1f130.js";
+import { S as Stack } from "../Stack/index.fe363ca5.js";
+import { P as PropertyValue } from "../../PropertyValue/index.e31d4282.js";
+import { R as RHFColorPicker } from "../../hook-form/RHFColorPicker/index.25e4e643.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 * as Yup from "yup";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.dc955a09.js";
-import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.f156a2cd.js";
-import { u as useModal } from "../../../../hooks/useModal/index.ef54bcf2.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.e35da619.js";
-enableMapSet();
-const createGpsToolsStore = (initProps) => {
-  const startProps = {
-    currentTabGpsTool: "geofences",
-    geofenceState: {
-      rows: [],
-      checkedGeofences: /* @__PURE__ */ new Set(),
-      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
-      checkedInternalFeatures: /* @__PURE__ */ new Set(),
-      hashGeofences: {}
-    },
-    ...initProps
+import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.e942a298.js";
+import { u as useFormAddEdit } from "../../../hooks/useFormAddEdit/index.fa430551.js";
+import { u as useModal } from "../../../hooks/useModal/index.9fe41bde.js";
+import { W as WindowConfirm } from "../../modal/WindowConfirm.1a123368.js";
+import { u as useMapStore } from "../../maps/index.ba1ccfad.js";
+const componentName$2 = "M4LTabs";
+generateUtilityClasses(componentName$2, [
+  "root"
+]);
+function getTabsUtilityClass(slot) {
+  return generateUtilityClass(componentName$2, slot);
+}
+const useTabsUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
   };
-  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 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 })
         }
-      })),
-      { name: `Map Tools Store` }
-    )
+      )
+    }
   );
+}
+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;
 };
-const GpsToolsContext = createContext(null);
-function GpsToolsProvider(props) {
-  const { children } = props;
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
-  const mapStoreRef = useRef();
-  if (!mapStoreRef.current) {
-    mapStoreRef.current = createGpsToolsStore({
-      getLabel,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
-        focus: false
+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 { setHandlerGetLabel, setExternalState } = useStore(
-    mapStoreRef.current,
-    (state) => state.gpsToolsActions,
-    shallow
+);
+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"
+    }
   );
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
+}
+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());
     }
-  }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
+  };
+  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);
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  const handleChange = (e) => {
+    if (activeFilters) {
+      if (onChangeFilter)
+        onChangeFilter(column, e.target.value);
+    }
+    setFilter(e.target.value);
+  };
+  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
+              }
+            )
+          }
+        )
+      ]
     }
-    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 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" }
+    }
+  );
 }
-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: []
+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;
         }
-      },
-      autoFocus: false
+      };
+    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";
+};
+const useSortColumnsRows = (sourceColumns, sourceRows) => {
+  const {
+    columnsConfig,
+    columnsWidths,
+    onChangeColumnsOrder,
+    rowActionsGetter,
+    checkedRows,
+    onCheckedRowsChange
+  } = useDataGrid();
+  const [columns, setColumns] = useState(() => []);
+  const [sortColumns, setSortColumns] = useState([]);
+  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;
     });
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
-      name: "Geometr\xEDas de tr\xE1nsito",
-      renderFeature: CommonFeatureRender,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
+  }, [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 = "";
         }
-      },
-      autoFocus: false
+        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;
     });
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
-      name: "Geometr\xEDas internas",
-      renderFeature: CommonFeatureRender,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
+    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;
         }
-      },
-      autoFocus: false
+      }
+      return 0;
     });
-    init();
-    return () => {
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
-    };
-  }, []);
+    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 { 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++;
+    }
+  }, [sortColumns, finalColumns]);
+  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 }
+    }
+  ) }) }) });
 }
-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 ENDPOINT_GEOFENCE_GET = "geofences";
+const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
+var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES"] = "geofences";
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES_TRANSIT_FEATURES"] = "geofencesCrossingFeatures";
+  GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
+  return GeofencesFeaturesLayers2;
+})(GeofencesFeaturesLayers || {});
 function Filter(props) {
   const { refresh, setBackendQueryParams } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -359,6 +765,33 @@ function MyActions(props) {
     /* @__PURE__ */ jsx(ActionFormIntro, { disabled: inEdition })
   ] });
 }
+const STROKE_COLOR_DEFAULT = "#aaccaa";
+const STROKE_OPACITY_DEFAULT = { value: 1, label: "100%" };
+const STROKE_WHEIGTH_DEFAULT = { value: 1, label: "1 px" };
+const STROKE_DASH_ARRAY_DEFAULT = { value: "", label: "-----" };
+const FILL_COLOR_DEFAULT = "#aa3000";
+const FILL_OPACITY_DEFAULT = { value: 0.2, label: "20%" };
+const initialValues = {
+  name: "",
+  geofenceType: null,
+  alias: null,
+  customerId: null,
+  timeMinInSeconds: 5,
+  timeMinOutSeconds: 5,
+  inEdition: false,
+  geometry: null,
+  lat: null,
+  lng: null,
+  properties: {
+    radius: null,
+    strokeColor: STROKE_COLOR_DEFAULT,
+    strokeOpacity: STROKE_OPACITY_DEFAULT,
+    strokeWeight: STROKE_WHEIGTH_DEFAULT,
+    strokeDashArray: STROKE_DASH_ARRAY_DEFAULT,
+    fillColor: FILL_COLOR_DEFAULT,
+    fillOpacity: FILL_OPACITY_DEFAULT
+  }
+};
 const formatDataEnpoint = (response) => {
   try {
     const { data } = response;
@@ -1057,7 +1490,7 @@ function useSubmit(props) {
   };
   return { onSubmit };
 }
-const RHFormProviderStyled = styled(RHFormProvider)`
+const RHFormProviderStyled = styled$1(RHFormProvider)`
   height: 100% !important;
 
   .${gpsToolsClasses.gpsToolsGeofencesAddEditContent} {
@@ -1500,7 +1933,7 @@ function useMaster() {
     goToAddEdit: onClickAddGeofence
   };
 }
-const StackGeofenceListRoot = styled(Stack)`
+const StackGeofenceListRoot = styled$1(Stack)`
   padding: 12px;
   position: relative !important;
   flex-grow: 1;
@@ -1640,12 +2073,14 @@ function TabsGpsTools() {
     }
   );
 }
-function GpsTools() {
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(Fragment, { children: !isSkeleton && /* @__PURE__ */ jsx(TabsGpsTools, {}) });
-}
 export {
-  GpsTools as G,
-  GpsToolsProvider as a,
-  useGpsToolsStore as u
+  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
 };