@m4l/components 0.1.12 → 0.1.13

package/components/DataGrid/index.b688877d.js

@@ -0,0 +1,894 @@
+import { styled as A, alpha as ne } from "@mui/material/styles";
+import { forwardRef as ie, useRef as J, useLayoutEffect as le, createContext as j, useState as F, useContext as U, useEffect as z, useMemo as E, useCallback as $ } from "react";
+import { S as q, a as T, u as Y, H as ae, D as se } from "../../react-data-grid.d46d625e.js";
+import { useDrag as ce, useDrop as de, DndProvider as ue } from "react-dnd";
+import { HTML5Backend as ge } from "react-dnd-html5-backend";
+import { SvgIcon as B, Checkbox as fe, InputBase as he, Skeleton as pe } from "@mui/material";
+import { jsx as d, jsxs as Q } from "react/jsx-runtime";
+import { voidFunction as I, useModuleDictionary as we, useModuleSkeleton as me } from "@m4l/core";
+import { A as ye, a as Ce } from "../CommonActions/components/Actions/index.e8148d98.js";
+import { g as be, d as ve } from "../ModalDialog/index.3850c053.js";
+import { g as xe, d as Re } from "../mui_extended/Pager/index.0576814f.js";
+const Se = A("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  padding: "0px",
+  inset: "0px",
+  overflow: "hidden"
+})), ke = A("div")(({
+  theme: e
+}) => ({
+  position: "absolute",
+  bottom: "0px",
+  top: "0px",
+  left: "0px",
+  right: "0px",
+  "& .rdg ": {
+    userSelect: "initial",
+    height: "100%",
+    contentVisibility: "unset",
+    overflow: "scroll",
+    borderRadius: "5px",
+    "--rdg-grid-inline-size": "0px",
+    "--rdg-header-background-color": e.palette.grid?.sectionHeader,
+    "--rdg-row-selected-background-color": e.palette.mode === "light" ? e.palette.primary.LightSelected : e.palette.primary.DarkSelected,
+    "--rdg-row-hover-background-color": e.palette.grid?.rowHover,
+    "--rdg-background-color": e.palette.background.default,
+    "--rdg-selection-color": e.palette.primary.main,
+    "--row-selected-hover-background-color": e.palette.mode === "light" ? e.palette.primary.LightSelectedHover : e.palette.primary.DarkSelectedHover,
+    "--rdg-checkbox-color": e.palette.primary.main,
+    "--rdg-checkbox-focus-color": ne(e.palette.primary.main, e.palette.action.selectedOpacity),
+    "--rdg-border-color": e.palette.divider
+  },
+  "& .rdg::-webkit-scrollbar": {
+    width: "6px",
+    height: "6px",
+    borderRadius: "3px",
+    backgroundColor: "transparent"
+  },
+  "& .rdg::-webkit-scrollbar-track": {
+    backgroundColor: "transparent",
+    border: "0px solid transparent"
+  },
+  "& .rdg::-webkit-scrollbar-corner": {
+    backgroundColor: "transparent"
+  },
+  "& ::-webkit-scrollbar-thumb": {
+    borderRadius: "10px",
+    backgroundColor: e.palette.divider,
+    border: "0px solid transparent"
+  },
+  '& [role="columnheader"]': {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  "& .rdg-cell": {
+    fontFamily: e.typography.body2.fontFamily,
+    fontWeight: e.typography.body2.fontWeight,
+    fontSize: e.typography.body2.fontSize,
+    color: e.palette.text.secondary,
+    borderBottom: `1px solid ${e.palette.divider}`,
+    borderRight: "0px solid transparent",
+    position: "relative",
+    "&.rdg-cell-frozen": {
+      position: "sticky"
+    },
+    "&:after": {
+      content: '""',
+      borderRight: `1px solid ${e.palette.divider}`,
+      position: "absolute",
+      right: "0px",
+      top: "25%",
+      bottom: "25%"
+    },
+    "& .m4l_icon": {
+      height: "100%"
+    }
+  },
+  "& .rdg-cell.rdg-cell-align-left": {
+    textAlign: "left"
+  },
+  "& .rdg-cell.rdg-cell-align-center": {
+    textAlign: "center"
+  },
+  "& .rdg-cell.rdg-cell-align-right": {
+    textAlign: "right"
+  },
+  "& .rdg-row .rdg-cell-frozen-last:after": {
+    borderRight: "0px solid transparent",
+    boxShadow: "none"
+  },
+  "& .rdg-row :last-child:after": {
+    borderRight: "0px solid transparent"
+  },
+  "& .rdg-header-row .rdg-cell": {
+    fontFamily: e.typography.subtitle2.fontFamily,
+    fontWeight: e.typography.subtitle2.fontWeight,
+    fontSize: e.typography.subtitle2.fontSize,
+    color: e.palette.text.primary,
+    borderRight: "0px solid transparent",
+    boxShadow: "none",
+    "&.rdg-cell-frozen-last": {
+      "&:after": {
+        borderRight: "0px solid transparent"
+      },
+      boxShadow: "var(--rdg-frozen-cell-box-shadow)"
+    },
+    "& .rdg-sort-arrow": {
+      width: e.spacing(1),
+      margin: `0 ${e.spacing(0.5)}`
+    }
+  },
+  "& .rdg-header-row :last-child.rdg-cell": {
+    borderTopRightRadius: "5px",
+    "&:after": {
+      borderRight: "0px solid transparent"
+    }
+  },
+  "& .filter_cell_div": {
+    paddingLeft: e.spacing(0.5),
+    paddingRight: e.spacing(0.5)
+  },
+  "& .rdg-header-sort-cell": {
+    width: "100%",
+    flexGrow: "1",
+    alignItems: "center"
+  },
+  '& [aria-columnsort="ASC"]': {
+    borderTop: `2px solid ${e.palette.primary.main}`
+  },
+  '& [aria-columnsort="DESC"]': {
+    borderBottom: `2px solid ${e.palette.primary.main}`
+  }
+})), He = A("div", {
+  shouldForwardProp: (e) => e !== "withActions"
+})(({
+  withActions: e,
+  theme: t
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  top: e ? t.spacing(5.5) : "0px",
+  bottom: "0px",
+  left: "0px",
+  right: "0px",
+  overflow: "hidden"
+}));
+function _e(e) {
+  return /* @__PURE__ */ d(B, {
+    ...e,
+    children: /* @__PURE__ */ d("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 Fe(e) {
+  return /* @__PURE__ */ d(B, {
+    ...e,
+    children: /* @__PURE__ */ d("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 ze(e) {
+  return /* @__PURE__ */ d(B, {
+    ...e,
+    children: /* @__PURE__ */ d("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 Ie = ie(
+  function({
+    onChange: t,
+    checked: o,
+    ...l
+  }, r) {
+    function i(n) {
+      t(n.target.checked, n.nativeEvent.shiftKey);
+    }
+    return /* @__PURE__ */ d(fe, {
+      checked: o,
+      size: "small",
+      icon: /* @__PURE__ */ d(_e, {}),
+      checkedIcon: /* @__PURE__ */ d(Fe, {}),
+      indeterminateIcon: /* @__PURE__ */ d(ze, {}),
+      onChange: i,
+      ...l
+    });
+  }
+), De = "filter-cell", X = 35;
+function Me(e) {
+  const [t, o] = Y(), l = (i, n) => {
+    o({
+      row: e.row,
+      checked: i,
+      isShiftClick: n
+    });
+  };
+  return T({
+    value: t,
+    isCellSelected: e.isCellSelected,
+    onChange: l,
+    "aria-label": "Select"
+  });
+}
+function Ae(e) {
+  const [t, o] = Y(), l = (i) => {
+    o({
+      row: e.row,
+      checked: i,
+      isShiftClick: !1
+    });
+  };
+  return T({
+    value: t,
+    isCellSelected: e.isCellSelected,
+    onChange: l,
+    "aria-label": "Select Group"
+  });
+}
+const Oe = {
+  key: q,
+  name: "",
+  width: 60,
+  maxWidth: 60,
+  resizable: !1,
+  sortable: !1,
+  frozen: !0,
+  type: "number",
+  headerRenderer: (e) => T({
+    "aria-label": "Select All",
+    isCellSelected: e.isCellSelected,
+    value: e.allRowsSelected,
+    onChange: e.onAllRowsSelectionChange
+  }),
+  formatter: Me,
+  groupFormatter: Ae
+};
+function We(e) {
+  const t = J(null);
+  return le(() => {
+    !e || t.current?.focus({ preventScroll: !0 });
+  }, [e]), {
+    ref: t,
+    tabIndex: e ? 0 : -1
+  };
+}
+const Ge = {
+  activeFilters: !1,
+  setActiveFilters: I
+}, Z = j(Ge);
+function Ne({
+  children: e,
+  initialActiveFilters: t
+}) {
+  const [o, l] = F({
+    activeFilters: t
+  }), r = (n, s) => {
+    const c = o.filters ? new Map(o.filters) : /* @__PURE__ */ new Map();
+    s !== "" ? c.set(n, s) : c.delete(n), l({
+      ...o,
+      filters: c
+    });
+  }, i = (n) => {
+    l(n ? {
+      activeFilters: !0,
+      filters: /* @__PURE__ */ new Map()
+    } : {
+      activeFilters: !1
+    });
+  };
+  return /* @__PURE__ */ d(Z.Provider, {
+    value: {
+      ...o,
+      onChangeFilter: r,
+      setActiveFilters: i
+    },
+    children: e
+  });
+}
+const K = () => U(Z);
+function Ve(e) {
+  const {
+    onColumnsReorder: t,
+    column: o,
+    isCellSelected: l,
+    ...r
+  } = e, {
+    ref: i,
+    tabIndex: n
+  } = We(l), {
+    getLabel: s
+  } = we(), {
+    activeFilters: c,
+    filters: g,
+    onChangeFilter: w
+  } = K(), [v, R] = F(g?.get(o.key) || ""), [{
+    isDragging: m
+  }, b] = ce({
+    type: "COLUMN_DRAG",
+    item: {
+      key: o.key
+    },
+    collect: (a) => ({
+      isDragging: a.isDragging()
+    })
+  }), [{
+    isOver: S
+  }, k] = de({
+    accept: "COLUMN_DRAG",
+    drop({
+      key: a
+    }) {
+      t(a, o.key);
+    },
+    collect: (a) => ({
+      isOver: a.isOver(),
+      canDrop: a.canDrop()
+    })
+  }), h = (a) => {
+    c && w && w(o.key, a.target.value), R(a.target.value);
+  };
+  z(() => {
+    c || R("");
+  }, [c]);
+  const u = {
+    ...o
+  };
+  return u.withinHeaderRenderer && (u.name = u.withinHeaderRenderer(e)), /* @__PURE__ */ Q("div", {
+    ref: (a) => {
+      b(a), k(a);
+    },
+    style: {
+      opacity: m ? 0.5 : 1,
+      backgroundColor: S ? "#ececec" : void 0,
+      cursor: "move",
+      display: "flex",
+      flexDirection: "column",
+      lineHeight: "1",
+      height: "100%",
+      justifyContent: "center",
+      textAlign: "center"
+    },
+    children: [/* @__PURE__ */ d(ae, {
+      column: u,
+      isCellSelected: l,
+      ...r
+    }), c && (o?.withFilter === void 0 || o.withFilter === !0) && /* @__PURE__ */ d("div", {
+      className: "filter_cell_div",
+      style: {
+        borderTop: "1px solid var(--rdg-border-color)",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        height: `${X}px`
+      },
+      children: /* @__PURE__ */ d(he, {
+        inputRef: i,
+        placeholder: s("data_grid.filter_holder"),
+        style: {
+          width: "100%",
+          paddingBottom: "2px",
+          border: "1px solid var(--rdg-border-color)"
+        },
+        tabIndex: n,
+        type: "text",
+        onChange: h,
+        value: v
+      })
+    })]
+  });
+}
+const $e = (e) => {
+  function t(o) {
+    return /* @__PURE__ */ d(Ve, {
+      ...o,
+      onColumnsReorder: e
+    });
+  }
+  return t;
+}, Ee = {
+  columnsWidths: /* @__PURE__ */ new Map(),
+  onChangeColumnsConfig: I,
+  onChangeColumnsOrder: I,
+  onChangeColumnWidth: I,
+  columnsConfig: [{
+    key: "string",
+    visible: !0,
+    hidden: !1,
+    index: 0,
+    frozen: !0,
+    name: "string;",
+    orginalIndex: 0,
+    originalVisible: !0,
+    originalFrozen: !1
+  }],
+  isSkeleton: !1,
+  rowsCount: 0,
+  setRowsCount: I,
+  rowHeights: 36,
+  currentRowHeight: 36,
+  currentRowHeaderHeight: 40,
+  currentRowHeightVariant: "compact",
+  setRowHeightVariant: I
+}, ee = j(Ee), Te = (e, t) => {
+  let o = -1;
+  return [t.find((l, r) => (l.key === e && (o = r), l.key === e)), o];
+};
+function L(e, t, o = void 0) {
+  let l;
+  if (o)
+    l = o.columnsConfig;
+  else
+    try {
+      const r = window.localStorage.getItem(`${e}_columns_config`);
+      l = r !== null ? JSON.parse(r) : [];
+    } catch {
+      l = [];
+    }
+  return t.map((r, i) => {
+    const [n = {
+      ...r
+    }, s] = Te(r.key, l);
+    return {
+      key: r.key,
+      name: r.name,
+      hidden: r.hidden === void 0 ? !1 : r.hidden,
+      index: s > -1 ? s : i,
+      visible: n.visible === void 0 ? !0 : n.visible,
+      frozen: n.frozen === void 0 ? !1 : n.frozen,
+      orginalIndex: i,
+      originalVisible: r.visible === void 0 ? !0 : r.visible,
+      originalFrozen: r.frozen === void 0 ? !1 : r.frozen
+    };
+  }).sort((r, i) => r.index - i.index);
+}
+function Be(e, t, o) {
+  const l = /* @__PURE__ */ new Map();
+  let r;
+  try {
+    const i = window.localStorage.getItem(`${e}_columns_width`);
+    r = i !== null ? new Map(JSON.parse(i)) : /* @__PURE__ */ new Map();
+  } catch {
+    r = /* @__PURE__ */ new Map();
+  }
+  for (let i = 0; i < t.length; i++) {
+    let n;
+    if (o)
+      try {
+        n = o.columnsWidths.get(t[i].key);
+      } catch {
+      }
+    if (n === void 0) {
+      const s = r.get(t[i].key);
+      typeof s == "number" && (n = s);
+    }
+    n !== void 0 && l.set(t[i].key, n);
+  }
+  return l;
+}
+function Ke(e, t) {
+  localStorage.setItem(`${e}_columns_width`, JSON.stringify([...t]));
+}
+function Le(e, t) {
+  localStorage.setItem(`${e}_columns_config`, JSON.stringify(t));
+}
+function W(e) {
+  return e === "compact" ? 0 : e === "standard" ? 1 : 2;
+}
+function Pe(e) {
+  const {
+    id: t,
+    children: o,
+    isSkeleton: l,
+    columns: r,
+    remoteConfig: i,
+    rowsCount: n,
+    rowActionsGetter: s,
+    rowHeights: c,
+    rowHeaderHeights: g,
+    initialRowHeightVariant: w
+  } = e, [v, R] = F(/* @__PURE__ */ new Map()), [m, b] = F(() => []), [S, k] = F(n), [h, u] = F(() => {
+    if (typeof c != typeof g)
+      throw new Error("Must be same type rowheights and rowHeaderTypes");
+    if (typeof c == "number" && typeof g == "number")
+      return {
+        rowHVariant: "compact",
+        rowHeight: c,
+        rowHeaderHeight: g
+      };
+    if (typeof c != "number" && c.length !== 3)
+      throw new Error("Must be 3 heights");
+    if (typeof g != "number" && g.length !== 3)
+      throw new Error("Must be 3 HeaderHeights");
+    return {
+      rowHVariant: w,
+      rowHeight: typeof c != "number" ? c[W(w)] : c,
+      rowHeaderHeight: typeof g != "number" ? g[W(w)] : g
+    };
+  }), a = E(() => c, [c]);
+  let y;
+  z(() => {
+  }, [m]), z(() => {
+    R(Be(t, r, i)), b(L(t, r, i));
+  }, [r, t, i]);
+  const H = $((p) => {
+    Le(t, p), b(p);
+  }, [b, t]), x = $((p, D) => {
+    if (p === D)
+      return;
+    const N = m.findIndex((V) => V.key === p), O = m.findIndex((V) => V.key === D), M = [...m];
+    M.splice(O, 0, M.splice(N, 1)[0]), H(M);
+  }, [m, H]), f = (p, D) => {
+    v.set(p, Math.round(D)), y && clearTimeout(y), y = setTimeout(() => {
+      Ke(t, v);
+    }, 500);
+  };
+  z(() => {
+    b(L(t, r));
+  }, [r]);
+  const C = (p) => {
+    k(p);
+  }, _ = $((p) => {
+    if (typeof c == "number" || typeof g == "number")
+      throw new Error("Only use setCurrentRowHeight with vector rowHeights");
+    u({
+      rowHVariant: p,
+      rowHeight: c[W(p)],
+      rowHeaderHeight: g[W(p)]
+    });
+  }, [u, c, g]);
+  return /* @__PURE__ */ d(ee.Provider, {
+    value: {
+      isSkeleton: l,
+      columnsConfig: m,
+      columnsWidths: v,
+      onChangeColumnsConfig: H,
+      onChangeColumnsOrder: x,
+      onChangeColumnWidth: f,
+      rowsCount: S,
+      setRowsCount: C,
+      rowActionsGetter: s,
+      currentRowHeightVariant: h.rowHVariant,
+      currentRowHeight: h.rowHeight,
+      currentRowHeaderHeight: h.rowHeaderHeight,
+      rowHeights: a,
+      setRowHeightVariant: _
+    },
+    children: o
+  });
+}
+const te = () => U(ee), Je = A("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  alignItems: "center"
+}));
+function P() {
+  return /* @__PURE__ */ d(Je, {
+    children: /* @__PURE__ */ d(pe, {
+      variant: "text",
+      width: "100%",
+      height: "12px"
+    })
+  });
+}
+function je(e, t) {
+  const o = e.find((r) => r.key === t);
+  let l = "string";
+  switch (o && (l = o.type || "string"), l) {
+    case "number":
+      return (r, i) => {
+        try {
+          return Number(r[t]) - Number(i[t]);
+        } catch {
+          return -1;
+        }
+      };
+    default:
+      return (r, i) => {
+        try {
+          return r[t].toString().localeCompare(i[t].toString());
+        } catch {
+          return -1;
+        }
+      };
+  }
+}
+const G = (e, t) => t.findIndex((o) => o.key === e), Ue = (e, t, o, l, r) => {
+  let i = e.filter((n) => {
+    const s = G(n.key, o), c = s > -1 ? o[s].visible : !0;
+    return !n.hidden && c;
+  }).sort(
+    (n, s) => G(n.key, o) - G(s.key, o)
+  ).map((n) => {
+    const s = G(n.key, o);
+    return {
+      ...n,
+      frozen: s > -1 ? o[s].frozen : !0,
+      width: typeof l.get(n.key) == "number" ? l.get(n.key) : n.width
+    };
+  }).sort((n, s) => (n.frozen === void 0 || n.frozen === !1) == (s.frozen === void 0 || s.frozen === !1) ? 0 : n.frozen ? -1 : 1);
+  return r && (i = [ye, ...i]), t && (i = [Oe, ...i]), i;
+}, qe = (e) => {
+  switch (e) {
+    case "string":
+      return "left";
+    case "date":
+    case "boolean":
+    case "custom":
+      return "center";
+    case "number":
+      return "right";
+  }
+  return "left";
+}, Ye = (e, t, o) => {
+  const { columnsConfig: l, columnsWidths: r, onChangeColumnsOrder: i, rowActionsGetter: n, isSkeleton: s } = te(), [c, g] = F(
+    () => []
+  ), [w, v] = F([]), { activeFilters: R, filters: m } = K(), b = (h, u) => u.findIndex((y) => h === y.key && y.hidden === !1) !== -1;
+  z(() => {
+    g(
+      Ue(
+        e,
+        o,
+        l,
+        r,
+        n
+      )
+    );
+    const h = w.filter(
+      (u) => b(u.columnKey, e)
+    );
+    JSON.stringify(h) !== JSON.stringify(w) && v(h);
+  }, [e, l, n]);
+  const S = E(() => {
+    const h = $e(i);
+    return c.map((u) => {
+      const a = {
+        ...u,
+        cellClass: u.align !== void 0 ? `rdg-cell-align-${u.align}` : `rdg-cell-align-${qe(u.type)}`
+      };
+      return a.key === q || a.isDraggable !== void 0 && a.isDraggable === !1 || (s && (a.headerRenderer = P, a.formatter = P), a.headerRenderer && (a.withinHeaderRenderer = a.headerRenderer), (a?.withFilter === void 0 || a.withFilter === !0) && R && (a.headerCellClass = De), a.headerRenderer = h), a;
+    });
+  }, [s, c, R, i]), k = E(() => {
+    const h = t.filter((u) => {
+      if (!m || m.size === 0)
+        return !0;
+      const a = m.entries();
+      let y = !0;
+      for (let H = 0; H < m.size; H++) {
+        const x = a.next().value, f = x[0], C = `${x[1]}`;
+        let _;
+        try {
+          _ = `${u[f]}`;
+        } catch {
+          continue;
+        }
+        if (y = y && _.includes(C), !y)
+          break;
+      }
+      return y;
+    });
+    return w.length === 0 || h.sort((u, a) => {
+      for (const y of w) {
+        const x = je(c, y.columnKey)(u, a);
+        if (x !== 0)
+          return y.direction === "ASC" ? x : -x;
+      }
+      return 0;
+    }), h;
+  }, [t, w, m]);
+  return { finalColumns: S, sortColumns: w, setSortColumns: v, finalRows: k };
+};
+function Qe(e) {
+  const {
+    isMultipleSelect: t = !1,
+    columns: o,
+    rows: l,
+    withActions: r,
+    onRowsChange: i
+  } = e, {
+    finalColumns: n,
+    sortColumns: s,
+    setSortColumns: c,
+    finalRows: g
+  } = Ye(o, l, t), {
+    activeFilters: w
+  } = K(), {
+    onChangeColumnWidth: v,
+    setRowsCount: R,
+    currentRowHeight: m,
+    currentRowHeaderHeight: b
+  } = te(), [S, k] = F(() => new Set(e.selectedRows));
+  z(() => {
+    k(new Set(e.selectedRows));
+  }, [e.selectedRows]);
+  const h = J(null), u = (f) => {
+    if (e.onRowsSelectedChange) {
+      const C = [];
+      if (f.size > 0) {
+        const _ = f.entries();
+        for (let p = 0; p < f.size; p++) {
+          const N = _.next().value[1], O = g.find((M) => e.rowKeyGetter(M) === N);
+          O && C.push(O);
+        }
+      }
+      e.onRowsSelectedChange(f, C);
+    }
+  }, a = (f) => {
+    k(f), u(f);
+  }, y = (f) => {
+    if (!t) {
+      if (S.entries().next().value && S.entries().next().value[1] === e.rowKeyGetter(f))
+        return;
+      const C = /* @__PURE__ */ new Set([e.rowKeyGetter(f)]);
+      k(C), u(C);
+    }
+  };
+  z(() => {
+    let f = 0;
+    for (const C of n) {
+      const _ = s.findIndex((p) => C.key === p.columnKey);
+      _ !== -1 ? h.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${f + 1}"]`)?.setAttribute("aria-columnsort", `${s[_].direction}`) : h.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${f + 1}"]`)?.removeAttribute("aria-columnsort"), f++;
+    }
+  }, [s, n]), z(() => {
+    R(g.length);
+  }, [g]);
+  const H = (f, C) => {
+    v(n[f].key, C);
+  }, x = (f) => {
+    c(f);
+  };
+  return /* @__PURE__ */ d(He, {
+    id: "WrapperTable",
+    withActions: r,
+    children: /* @__PURE__ */ d(ke, {
+      id: "OriginalGridWrapperStyled",
+      children: /* @__PURE__ */ d(ue, {
+        backend: ge,
+        children: /* @__PURE__ */ d(se, {
+          className: "fill-grid rdg-light",
+          ref: h,
+          headerRowHeight: w ? b + X : b,
+          columns: n,
+          sortColumns: s,
+          onSortColumnsChange: x,
+          onColumnResize: H,
+          rows: g,
+          onRowsChange: i,
+          selectedRows: S,
+          onSelectedRowsChange: a,
+          onRowClick: y,
+          rowHeight: m,
+          rowKeyGetter: e.rowKeyGetter,
+          cellNavigationMode: "LOOP_OVER_ROW",
+          components: {
+            checkboxFormatter: Ie
+          },
+          defaultColumnOptions: {
+            resizable: !0,
+            sortable: !0
+          }
+        })
+      })
+    })
+  });
+}
+function ct(e) {
+  const {
+    withActions: t = !0,
+    rows: o,
+    columns: l,
+    actionsProps: r,
+    rowActionsGetter: i,
+    onRowsChange: n,
+    rowHeaderHeights: s = [44, 63, 75],
+    rowHeights: c = [36, 52, 67],
+    initialRowHeightVariant: g = "compact"
+  } = e, w = me();
+  return /* @__PURE__ */ d(Se, {
+    id: `WrapperGrid_${e.id}`,
+    children: /* @__PURE__ */ d(Pe, {
+      id: e.id,
+      isSkeleton: w,
+      columns: e.columns,
+      rowHeights: c,
+      rowHeaderHeights: s,
+      initialRowHeightVariant: g,
+      rowsCount: o.length,
+      rowActionsGetter: i,
+      children: /* @__PURE__ */ Q(Ne, {
+        initialActiveFilters: !1,
+        children: [t && r && /* @__PURE__ */ d(Ce, {
+          ...r
+        }), /* @__PURE__ */ d(Qe, {
+          id: e.id,
+          withActions: t,
+          columns: l,
+          rows: o,
+          isMultipleSelect: e.isMultipleSelect,
+          selectedRows: e.selectedRows,
+          rowKeyGetter: e.rowKeyGetter,
+          onRowsChange: n,
+          onRowsSelectedChange: e.onRowsSelectedChange
+        })]
+      })
+    })
+  });
+}
+function dt() {
+  return ["data_grid"].concat(xe()).concat(be());
+}
+({
+  ...Re,
+  ...ve
+});
+const re = A("input")(() => ({
+  appearance: "none",
+  boxSizing: "border-box",
+  inlineSize: "100%",
+  blockSize: "100%",
+  paddingBlock: "0",
+  verticalAlign: "top",
+  textAlign: "right",
+  color: "var(--rdg-color)",
+  backgroundColor: "var(--rdg-background-color)",
+  fontFamily: "inherit",
+  "&:focus": {
+    outline: "none"
+  },
+  "&::placeholder": {
+    color: "#999",
+    opacity: "1"
+  }
+}));
+function oe(e) {
+  e?.focus(), e?.select();
+}
+function ut({
+  row: e,
+  column: t,
+  onRowChange: o,
+  onClose: l
+}) {
+  return /* @__PURE__ */ d(re, {
+    className: "rdg-text-editor",
+    ref: oe,
+    value: e[t.key],
+    onChange: (r) => o({
+      ...e,
+      [t.key]: r.target.value
+    }),
+    onBlur: () => l(!0)
+  });
+}
+function gt({
+  row: e,
+  column: t,
+  onRowChange: o,
+  onClose: l
+}) {
+  return /* @__PURE__ */ d(re, {
+    className: "rdg-text-editor",
+    ref: oe,
+    type: "number",
+    value: e[t.key],
+    onChange: (r) => o({
+      ...e,
+      [t.key]: r.target.value !== "" ? Number(r.target.value) : ""
+    }),
+    onBlur: () => l(!0)
+  });
+}
+export {
+  ct as D,
+  gt as N,
+  ke as O,
+  ut as T,
+  K as a,
+  dt as g,
+  te as u
+};