@m4l/components 3.1.9 → 4.0.0

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/index-CB3e1Dot.js

@@ -0,0 +1,260 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { D as DataGrid$1 } from "../../../../../../../../react-data-grid-BfYuZ6AK.js";
+import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton-1jvQBFbH.js";
+import { W as WrapperColumnsConfig, D as DivSelColumns, a as WrapperDataGrid, C as ColumnActions } from "./styles-B6HR4Y1G.js";
+import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/index-8LLfJGSu.js";
+function getRowsFromColumnsConfig(columnsConfig) {
+  return columnsConfig.filter((column) => !column.hidden).map(
+    (column) => ({
+      key: column.key,
+      name: column.name,
+      visible: column.visible === void 0 ? true : column.visible,
+      frozen: column.frozen === void 0 ? false : column.frozen,
+      originalIndex: column.orginalIndex,
+      originalFrozen: column.originalFrozen,
+      originalVisible: column.originalVisible
+    })
+  );
+}
+const ColumnsConfig = forwardRef((props, ref) => {
+  const refdata_grid = useRef(null);
+  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, classes } = props;
+  const { getLabel } = useModuleDictionary();
+  const [isInit, setIsInit] = useState(true);
+  const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
+  const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
+  const divRef = useRef(null);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  useImperativeHandle(ref, () => ({
+    onClickIntro: handleIntro,
+    current: divRef.current
+  }));
+  const columnsdata_grid = useMemo(
+    () => [
+      {
+        key: "name",
+        name: getLabel("data_grid.settings_column_name"),
+        width: 200,
+        resizable: true,
+        type: "string"
+      },
+      {
+        key: "originalIndex",
+        name: getLabel("data_grid.settings_column_position"),
+        width: 50,
+        type: "number",
+        cellClass: "rdg-cell-align-center"
+      },
+      {
+        key: "visible",
+        name: getLabel("data_grid.settings_column_visible"),
+        width: 80,
+        type: "boolean",
+        formatter: ColumnInteractiveCheckFormatter,
+        cellClass: "rdg-cell-align-center"
+      },
+      {
+        key: "frozen",
+        name: getLabel("data_grid.settings_column_frozen"),
+        width: 80,
+        type: "boolean",
+        formatter: ColumnInteractiveCheckFormatter,
+        cellClass: "rdg-cell-align-center"
+      }
+    ],
+    [getLabel]
+  );
+  const checkAll = () => {
+    setRows(rows.map((row) => ({ ...row, visible: true })));
+  };
+  const unCheckAll = () => {
+    setRows(rows.map((row) => ({ ...row, visible: false })));
+  };
+  const restoreAll = () => {
+    setRows(
+      rows.map((row) => ({
+        ...row,
+        visible: row.originalVisible,
+        frozen: row.originalFrozen,
+        index: row.originalIndex
+      })).sort((a, b) => a.index - b.index)
+    );
+  };
+  useEffect(() => {
+    if (isInit === false) {
+      setRows(getRowsFromColumnsConfig(columnsConfig));
+    }
+    setIsInit(false);
+  }, [columnsConfig]);
+  const rowSelectedIndex = useMemo(() => {
+    let rowIndex = -1;
+    if (selRows.size !== 1) return rowIndex;
+    const iterator = selRows.entries();
+    const entry = iterator.next().value[1];
+    rowIndex = rows.findIndex((row) => row.key === entry);
+    return rowIndex;
+  }, [rows, selRows]);
+  const handleMoveFirst = () => {
+    if (rowSelectedIndex === -1) return -1;
+    const newRows = [...rows];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(0, 0, rows[rowSelectedIndex]);
+    refdata_grid.current?.selectCell({ idx: 0, rowIdx: 0 });
+    setRows(newRows);
+  };
+  const handleMoveLast = () => {
+    if (rowSelectedIndex === -1) return -1;
+    const newRows = [...rows];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
+    refdata_grid.current?.selectCell({ idx: 0, rowIdx: newRows.length - 1 });
+    setRows(newRows);
+  };
+  const handleMoveUpDownd = (position) => {
+    if (rowSelectedIndex === -1) return -1;
+    const newRows = [...rows];
+    const element = newRows[rowSelectedIndex];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(rowSelectedIndex + position, 0, element);
+    refdata_grid.current?.selectCell({ idx: 0, rowIdx: rowSelectedIndex + position });
+    setRows(newRows);
+  };
+  const getColumnConfigByKey = (key) => {
+    const rowIndexFinded = rows.findIndex((row) => row.key === key);
+    if (rowIndexFinded > -1) {
+      return {
+        visible: rows[rowIndexFinded].visible,
+        frozen: rows[rowIndexFinded].frozen
+        // index: rowIndexFinded,
+      };
+    }
+    return void 0;
+  };
+  const getRowIndex = (column) => {
+    const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
+    if (rowIndexFinded > -1) {
+      return rowIndexFinded;
+    }
+    return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
+  };
+  const handleIntro = () => {
+    const newColumnsConfig = columnsConfig.map((columnConfig) => {
+      const newColumnConfig = { ...columnConfig };
+      if (!columnConfig.hidden) {
+        const columnConfigRow = getColumnConfigByKey(columnConfig.key);
+        if (columnConfigRow) {
+          newColumnConfig.visible = columnConfigRow.visible;
+          newColumnConfig.frozen = columnConfigRow.frozen;
+        }
+      }
+      return newColumnConfig;
+    }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
+    onChangeColumnsConfig(newColumnsConfig);
+    onCloseSettings();
+  };
+  const onInternalSelectedRowsChange = () => {
+  };
+  const onInternalRowsChange = (newRows) => {
+    setRows(newRows);
+  };
+  const onRowClick = (row) => {
+    if (selRows.has(row.key)) return;
+    const mySet = /* @__PURE__ */ new Set([row.key]);
+    setSelRows(mySet);
+  };
+  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, { ref: divRef, className: classes.columnsConfigContainer, children: [
+    /* @__PURE__ */ jsx(DivSelColumns, { className: classes.columnsLabelSetColumns, children: getLabel("data_grid.settings_sel_columns") }),
+    /* @__PURE__ */ jsx(WrapperDataGrid, { className: classes.columnsConfigContent, children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
+      DataGrid$1,
+      {
+        className: classes.columnsConfigGrid,
+        ref: refdata_grid,
+        columns: columnsdata_grid,
+        rows,
+        onRowsChange: onInternalRowsChange,
+        selectedRows: selRows,
+        onSelectedRowsChange: onInternalSelectedRowsChange,
+        onRowClick,
+        rowKeyGetter: (row) => row.key,
+        cellNavigationMode: "CHANGE_ROW",
+        defaultColumnOptions: { resizable: true, sortable: true }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(ColumnActions, { className: classes.columnsConfigActions, children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_move_first"),
+          onClick: handleMoveFirst,
+          "aria-label": "move first place",
+          disabled: rowSelectedIndex < 1,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_move_up"),
+          dictionaryTooltipId: "data_grid.settings_move_up",
+          onClick: () => handleMoveUpDownd(-1),
+          "aria-label": "move up place",
+          disabled: rowSelectedIndex < 1,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_move_last"),
+          onClick: handleMoveLast,
+          "aria-label": "move last place",
+          disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_move_down"),
+          onClick: () => handleMoveUpDownd(1),
+          "aria-label": "move down place",
+          disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_visible_all"),
+          onClick: checkAll,
+          "aria-label": "check visible all",
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_no_visible_all"),
+          onClick: unCheckAll,
+          "aria-label": "un check all",
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: getLabel("data_grid.settings_restore"),
+          onClick: restoreAll,
+          "aria-label": "Restore columns",
+          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
+        }
+      )
+    ] })
+  ] });
+});
+ColumnsConfig.displayName = "ColumnsConfig";
+export {
+  ColumnsConfig as C
+};

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/styles-B6HR4Y1G.js

@@ -0,0 +1,50 @@
+import { styled } from "@mui/material/styles";
+const WrapperColumnsConfig = styled("div")(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+styled("div")(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  fontSize: theme.typography.h4.fontSize
+}));
+const DivSelColumns = styled("div")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.bodyDens,
+  color: theme.vars.palette.text.primary,
+  padding: `16px 8px`
+}));
+const WrapperDataGrid = styled("div")(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  overflow: "auto"
+}));
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row"
+}));
+const ColumnActions = styled("div")(() => ({
+  paddingTop: "16px",
+  paddingBottom: "8px",
+  display: "flex",
+  flexDirection: "row"
+}));
+styled("div")(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+export {
+  ColumnActions as C,
+  DivSelColumns as D,
+  WrapperColumnsConfig as W,
+  WrapperDataGrid as a
+};

package/components/DataGrid/subcomponents/Actions/subcomponents/hooks/useModalSettings/index-Dzhdpkqd.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useIsMobile } from "@m4l/graphics";
+import { useRef, useCallback } from "react";
+import { u as useDataGrid } from "../../../../../hooks/useDataGrid-BKzuMtRC.js";
+import { D as DataGridRoot } from "../../../../../styles-rOw1DTul.js";
+import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index-CB3e1Dot.js";
+import { u as useModal } from "../../../../../../../hooks/useModal/index-CvlomTtY.js";
+import { W as WindowBase } from "../../../../../../modal/WindowBase/index-C4XTCJiI.js";
+import { A as Actions } from "../../../../../../CommonActions/components/Actions/index-B4L6Y4pL.js";
+import { A as ActionCancel } from "../../../../../../CommonActions/components/ActionCancel/index-CI0Yqh5P.js";
+import { A as ActionIntro } from "../../../../../../CommonActions/components/ActionIntro/index-CCc2O0ve.js";
+const useModalSettings = () => {
+  const { openModal, closeModal } = useModal();
+  const { columnsConfig, onChangeColumnsConfig } = useDataGrid();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const { classes } = useDataGrid();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current.onClickIntro();
+    }
+  }, []);
+  const onClickSettings = () => {
+    openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      fullScreen: isMobile,
+      window: /* @__PURE__ */ jsxs(
+        WindowBase,
+        {
+          title: getLabel("data_grid.settings_title"),
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
+          children: [
+            /* @__PURE__ */ jsx(DataGridRoot, { className: classes.root, children: /* @__PURE__ */ jsx("div", { className: classes.tableContaniner, style: { inset: "0" }, children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
+              ColumnsConfig,
+              {
+                ref,
+                columnsConfig,
+                onChangeColumnsConfig,
+                onCloseSettings,
+                classes
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxs(Actions, { children: [
+              /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }),
+              /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })
+            ] })
+          ]
+        }
+      )
+    });
+  };
+  return onClickSettings;
+};
+export {
+  useModalSettings as u
+};

package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer-CBcDkRBr.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { D as DraggableHeaderRenderer } from "../subcomponents/DraggableHeaderRenderer-BZFaMZdE.js";
+const getDragHeaderRenderer = (handleColumnsReorder) => {
+  function HeaderRenderer(props) {
+    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, { ...props, onColumnsReorder: handleColumnsReorder });
+  }
+  return HeaderRenderer;
+};
+export {
+  getDragHeaderRenderer as g
+};

package/components/DataGrid/subcomponents/Table/hooks/useFocusRef-RLFiIJjj.js

@@ -0,0 +1,15 @@
+import { useRef, useLayoutEffect } from "react";
+function useFocusRef(isSelected) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (!isSelected) return;
+    ref.current?.focus({ preventScroll: true });
+  }, [isSelected]);
+  return {
+    ref,
+    tabIndex: isSelected ? 0 : -1
+  };
+}
+export {
+  useFocusRef as u
+};

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows-BYcDjTMV.js

@@ -0,0 +1,187 @@
+import { useState, useEffect, useMemo } from "react";
+import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer-CBcDkRBr.js";
+import { A as ActionsColumn } from "../subcomponents/ActionsColumn-CeQtGeiI.js";
+import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn-CSAGDW93.js";
+import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { u as useFilters } from "../../../hooks/useFilters-C-5BfOb8.js";
+import { u as useDataGrid } from "../../../hooks/useDataGrid-BKzuMtRC.js";
+import { S as SkeletonFormatter } from "../subcomponents/SkeletonFormatter/index-DcPsCY_n.js";
+import { a as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants-BIS3UfHs.js";
+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) => (
+      // Sort for index
+      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,
+        //Si están seteados se habilita el múltipe
+        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;
+        }
+      }
+      return 0;
+    });
+    return nextRows;
+  }, [sourceRows, sortColumns, filters]);
+  return { finalColumns, sortColumns, setSortColumns, finalRows };
+};
+export {
+  useSortColumnsRows as u
+};

package/components/DataGrid/subcomponents/Table/index-BHTTWwD5.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { D as DataGrid$1 } from "../../../../react-data-grid-BfYuZ6AK.js";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter-tKqOCQR4.js";
+import { a as filterHeight } from "./subcomponents/SelectColumn-CSAGDW93.js";
+import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows-BYcDjTMV.js";
+import { u as useFilters } from "../../hooks/useFilters-C-5BfOb8.js";
+import { u as useDataGrid } from "../../hooks/useDataGrid-BKzuMtRC.js";
+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 }
+    }
+  ) }) }) });
+}
+export {
+  Table as T
+};