react-excel-lite 0.0.6 → 0.1.0

package/dist/react-excel-lite.js

@@ -1,298 +1,341 @@
-import { jsxs as G, jsx as v } from "react/jsx-runtime";
-import { useState as K, useCallback as x, useEffect as W, useRef as $, useMemo as q } from "react";
-function I(...o) {
-  return o.filter(Boolean).join(" ");
+import { jsxs as I, jsx as R, Fragment as Q } from "react/jsx-runtime";
+import { useState as L, useCallback as D, useEffect as U, useRef as P, useMemo as W } from "react";
+function K(...e) {
+  return e.filter(Boolean).join(" ");
 }
-function fo(o) {
-  return `${o.row}-${o.col}`;
+function ge(e) {
+  return `${e.row}-${e.col}`;
 }
-function wo(o) {
-  const [n, l] = o.split("-").map(Number);
-  return { row: n, col: l };
+function Se(e) {
+  const [o, n] = e.split("-").map(Number);
+  return { row: o, col: n };
 }
-function ho(o, n) {
-  if (!o || !n) return o ? [o] : [];
-  const l = Math.min(o.row, n.row), s = Math.max(o.row, n.row), u = Math.min(o.col, n.col), b = Math.max(o.col, n.col), i = [];
-  for (let h = l; h <= s; h++)
-    for (let f = u; f <= b; f++)
-      i.push({ row: h, col: f });
-  return i;
+function Me(e, o) {
+  if (!e || !o) return e ? [e] : [];
+  const n = Math.min(e.row, o.row), i = Math.max(e.row, o.row), a = Math.min(e.col, o.col), C = Math.max(e.col, o.col), u = [];
+  for (let h = n; h <= i; h++)
+    for (let f = a; f <= C; f++)
+      u.push({ row: h, col: f });
+  return u;
 }
-function O(o, n) {
-  if (!n.start) return !1;
-  const l = n.end || n.start, s = Math.min(n.start.row, l.row), u = Math.max(n.start.row, l.row), b = Math.min(n.start.col, l.col), i = Math.max(n.start.col, l.col);
-  return o.row >= s && o.row <= u && o.col >= b && o.col <= i;
+function Y(e, o) {
+  if (!o.start) return !1;
+  const n = o.end || o.start, i = Math.min(o.start.row, n.row), a = Math.max(o.start.row, n.row), C = Math.min(o.start.col, n.col), u = Math.max(o.start.col, n.col);
+  return e.row >= i && e.row <= a && e.col >= C && e.col <= u;
 }
-function X(o) {
-  return o.split(/\r?\n/).filter((n) => n.trim()).map((n) => n.split("	").map((l) => l.trim()));
+function Z(e) {
+  return e.split(/\r?\n/).filter((o) => o.trim()).map((o) => o.split("	").map((n) => n.trim()));
 }
-function _(o) {
-  return o.map((n) => n.join("	")).join(`
+function ee(e) {
+  return e.map((o) => o.join("	")).join(`
 `);
 }
-function L(o) {
-  return !o.start || !o.end ? o : {
+function B(e) {
+  return !e.start || !e.end ? e : {
     start: {
-      row: Math.min(o.start.row, o.end.row),
-      col: Math.min(o.start.col, o.end.col)
+      row: Math.min(e.start.row, e.end.row),
+      col: Math.min(e.start.col, e.end.col)
     },
     end: {
-      row: Math.max(o.start.row, o.end.row),
-      col: Math.max(o.start.col, o.end.col)
+      row: Math.max(e.start.row, e.end.row),
+      col: Math.max(e.start.col, e.end.col)
     }
   };
 }
-function po(o, n) {
-  if (o.row === n.row && o.col === n.col)
+function De(e, o) {
+  if (e.row === o.row && e.col === o.col)
     return [];
-  const l = Math.min(o.row, n.row), s = Math.max(o.row, n.row), u = Math.min(o.col, n.col), b = Math.max(o.col, n.col), i = [];
-  for (let h = l; h <= s; h++)
-    for (let f = u; f <= b; f++)
-      h === o.row && f === o.col || i.push({ row: h, col: f });
-  return i;
+  const n = Math.min(e.row, o.row), i = Math.max(e.row, o.row), a = Math.min(e.col, o.col), C = Math.max(e.col, o.col), u = [];
+  for (let h = n; h <= i; h++)
+    for (let f = a; f <= C; f++)
+      h === e.row && f === e.col || u.push({ row: h, col: f });
+  return u;
 }
-function J() {
-  const [o, n] = K({
+function oe({
+  containerRef: e
+}) {
+  const [o, n] = L({
     start: null,
     end: null
-  }), [l, s] = K(!1), u = x((a) => {
-    n({ start: a, end: a }), s(!0);
-  }, []), b = x(
-    (a) => {
-      l && n((e) => ({ ...e, end: a }));
+  }), [i, a] = L(!1), C = D((d) => {
+    n({ start: d, end: d }), a(!0);
+  }, []), u = D(
+    (d) => {
+      i && n((t) => ({ ...t, end: d }));
     },
-    [l]
-  ), i = x(() => {
-    s(!1);
-  }, []), h = x(() => {
-    n({ start: null, end: null }), s(!1);
-  }, []), f = x(
-    (a) => O(a, o),
+    [i]
+  ), h = D(() => {
+    a(!1);
+  }, []), f = D(() => {
+    n({ start: null, end: null }), a(!1);
+  }, []), S = D(
+    (d) => Y(d, o),
     [o]
   );
-  return W(() => {
-    const a = () => {
-      l && s(!1);
+  return U(() => {
+    const d = () => {
+      i && a(!1);
+    };
+    return window.addEventListener("mouseup", d), () => window.removeEventListener("mouseup", d);
+  }, [i]), U(() => {
+    const d = (t) => {
+      e.current && !e.current.contains(t.target) && f();
     };
-    return window.addEventListener("mouseup", a), () => window.removeEventListener("mouseup", a);
-  }, [l]), {
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [e, f]), {
     selection: o,
-    isSelecting: l,
-    isCellSelected: f,
-    handleCellMouseDown: u,
-    handleCellMouseEnter: b,
-    handleMouseUp: i,
-    clearSelection: h,
+    isSelecting: i,
+    isCellSelected: S,
+    handleCellMouseDown: C,
+    handleCellMouseEnter: u,
+    handleMouseUp: h,
+    clearSelection: f,
     setSelection: n
   };
 }
-function Q({
-  selection: o,
-  getValue: n,
-  setValues: l,
-  rowCount: s,
-  colCount: u
+function te({
+  selection: e,
+  getValue: o,
+  setValues: n,
+  setSelection: i,
+  rowCount: a,
+  colCount: C
 }) {
-  const b = x(() => {
-    const e = L(o);
-    if (!e.start || !e.end) return [];
-    const C = [];
-    for (let M = e.start.row; M <= e.end.row; M++) {
-      const S = [];
-      for (let g = e.start.col; g <= e.end.col; g++)
-        S.push(n({ row: M, col: g }));
-      C.push(S);
+  const u = D(() => {
+    const t = B(e);
+    if (!t.start || !t.end) return [];
+    const M = [];
+    for (let w = t.start.row; w <= t.end.row; w++) {
+      const g = [];
+      for (let s = t.start.col; s <= t.end.col; s++)
+        g.push(o({ row: w, col: s }));
+      M.push(g);
     }
-    return C;
-  }, [o, n]), i = x(async () => {
-    const e = b();
-    if (e.length === 0) return;
-    const C = _(e);
+    return M;
+  }, [e, o]), h = D(async () => {
+    const t = u();
+    if (t.length === 0) return;
+    const M = ee(t);
     try {
-      await navigator.clipboard.writeText(C);
-    } catch (M) {
-      console.error("Clipboard copy failed:", M);
+      await navigator.clipboard.writeText(M);
+    } catch (w) {
+      console.error("Clipboard copy failed:", w);
     }
-  }, [b]), h = x(async () => {
-    if (o.start)
+  }, [u]), f = D(async () => {
+    if (e.start)
       try {
-        const e = await navigator.clipboard.readText(), C = X(e);
-        if (C.length === 0) return;
-        const M = o.start.row, S = o.start.col, g = [];
-        C.forEach((w, p) => {
-          const d = M + p;
-          d >= s || w.forEach((c, N) => {
-            const D = S + N;
-            D >= u || g.push({ coord: { row: d, col: D }, value: c });
+        const t = await navigator.clipboard.readText(), M = Z(t);
+        if (M.length === 0) return;
+        const w = e.start.row, g = e.start.col, s = [];
+        M.forEach((y, m) => {
+          const p = w + m;
+          p >= a || y.forEach((N, F) => {
+            const r = g + F;
+            r >= C || s.push({ coord: { row: p, col: r }, value: N });
           });
-        }), g.length > 0 && l(g);
-      } catch (e) {
-        console.error("Clipboard paste failed:", e);
+        }), s.length > 0 && n(s);
+      } catch (t) {
+        console.error("Clipboard paste failed:", t);
+      }
+  }, [e.start, n, a, C]), S = D(() => {
+    const t = B(e);
+    if (!t.start || !t.end) return;
+    const M = [];
+    for (let w = t.start.row; w <= t.end.row; w++)
+      for (let g = t.start.col; g <= t.end.col; g++)
+        M.push({ coord: { row: w, col: g }, value: "" });
+    M.length > 0 && n(M);
+  }, [e, n]), d = D(
+    (t) => {
+      if (!(t.target instanceof HTMLInputElement && !t.target.readOnly)) {
+        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key)) {
+          t.preventDefault();
+          const w = B(e).start ?? { row: 0, col: 0 };
+          let g = w.row, s = w.col;
+          switch (t.key) {
+            case "ArrowUp":
+              g = Math.max(0, w.row - 1);
+              break;
+            case "ArrowDown":
+              g = Math.min(a - 1, w.row + 1);
+              break;
+            case "ArrowLeft":
+              s = Math.max(0, w.col - 1);
+              break;
+            case "ArrowRight":
+              s = Math.min(C - 1, w.col + 1);
+              break;
+          }
+          i({
+            start: { row: g, col: s },
+            end: { row: g, col: s }
+          });
+          return;
+        }
+        (t.ctrlKey || t.metaKey) && t.key === "c" && (t.preventDefault(), h()), (t.ctrlKey || t.metaKey) && t.key === "v" && (t.preventDefault(), f()), (t.key === "Backspace" || t.key === "Delete") && (t.preventDefault(), S());
       }
-  }, [o.start, l, s, u]), f = x(() => {
-    const e = L(o);
-    if (!e.start || !e.end) return;
-    const C = [];
-    for (let M = e.start.row; M <= e.end.row; M++)
-      for (let S = e.start.col; S <= e.end.col; S++)
-        C.push({ coord: { row: M, col: S }, value: "" });
-    C.length > 0 && l(C);
-  }, [o, l]), a = x(
-    (e) => {
-      (e.ctrlKey || e.metaKey) && e.key === "c" && (e.preventDefault(), i()), (e.ctrlKey || e.metaKey) && e.key === "v" && (e.preventDefault(), h()), (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), f());
     },
-    [i, h, f]
+    [
+      h,
+      f,
+      S,
+      e,
+      i,
+      a,
+      C
+    ]
   );
   return {
-    handleCopy: i,
-    handlePaste: h,
-    handleKeyDown: a
+    handleCopy: h,
+    handlePaste: f,
+    handleKeyDown: d
   };
 }
-function Y(o) {
-  if (o.trim() === "") return null;
-  const n = Number(o);
-  return isNaN(n) ? null : n;
+function ne(e) {
+  if (e.trim() === "") return null;
+  const o = Number(e);
+  return isNaN(o) ? null : o;
 }
-function H(o) {
-  if (o.length === 0) return null;
-  const n = o.map(Y);
-  if (n.some((u) => u === null)) return null;
-  const l = n;
-  if (l.length === 1)
-    return { numbers: l, diff: 0 };
-  const s = l[1] - l[0];
-  for (let u = 2; u < l.length; u++)
-    if (l[u] - l[u - 1] !== s)
-      return { numbers: l, diff: 0 };
-  return { numbers: l, diff: s };
+function q(e) {
+  if (e.length === 0) return null;
+  const o = e.map(ne);
+  if (o.some((a) => a === null)) return null;
+  const n = o;
+  if (n.length === 1)
+    return { numbers: n, diff: 0 };
+  const i = n[1] - n[0];
+  for (let a = 2; a < n.length; a++)
+    if (n[a] - n[a - 1] !== i)
+      return { numbers: n, diff: 0 };
+  return { numbers: n, diff: i };
 }
-function Z({
-  selection: o,
-  getValue: n,
-  setValues: l
+function le({
+  selection: e,
+  getValue: o,
+  setValues: n
 }) {
-  const [s, u] = K(null), [b, i] = K([]), [h, f] = K(!1), [a, e] = K(null), C = x((w) => {
-    u(w), f(!0), i([]), e(null);
-  }, []), M = x(
-    (w) => {
-      if (!h || !o.start) return;
-      const p = L(o);
-      if (!p.start || !p.end) return;
-      e(w);
-      const d = {
-        row: Math.min(p.start.row, w.row),
-        col: Math.min(p.start.col, w.col)
-      }, c = {
-        row: Math.max(p.end.row, w.row),
-        col: Math.max(p.end.col, w.col)
+  const [i, a] = L(null), [C, u] = L([]), [h, f] = L(!1), [S, d] = L(null), t = D((s) => {
+    a(s), f(!0), u([]), d(null);
+  }, []), M = D(
+    (s) => {
+      if (!h || !e.start) return;
+      const y = B(e);
+      if (!y.start || !y.end) return;
+      d(s);
+      const m = {
+        row: Math.min(y.start.row, s.row),
+        col: Math.min(y.start.col, s.col)
+      }, p = {
+        row: Math.max(y.end.row, s.row),
+        col: Math.max(y.end.col, s.col)
       }, N = [];
-      for (let D = d.row; D <= c.row; D++)
-        for (let r = d.col; r <= c.col; r++)
-          D >= p.start.row && D <= p.end.row && r >= p.start.col && r <= p.end.col || N.push({ row: D, col: r });
-      i(N);
+      for (let F = m.row; F <= p.row; F++)
+        for (let r = m.col; r <= p.col; r++)
+          F >= y.start.row && F <= y.end.row && r >= y.start.col && r <= y.end.col || N.push({ row: F, col: r });
+      u(N);
     },
-    [h, o]
-  ), S = x(() => {
-    if (!o.start || b.length === 0 || !a) {
-      u(null), i([]), f(!1), e(null);
+    [h, e]
+  ), w = D(() => {
+    if (!e.start || C.length === 0 || !S) {
+      a(null), u([]), f(!1), d(null);
       return;
     }
-    const w = L(o);
-    if (!w.start || !w.end) {
-      u(null), i([]), f(!1), e(null);
+    const s = B(e);
+    if (!s.start || !s.end) {
+      a(null), u([]), f(!1), d(null);
       return;
     }
-    const p = [], d = w.start, c = w.end, N = c.row - d.row + 1, D = c.col - d.col + 1;
-    b.forEach((r) => {
-      let R, k;
-      if (r.row < d.row) {
-        const F = d.row - r.row;
-        R = c.row - (F - 1) % N;
-      } else if (r.row > c.row) {
-        const F = r.row - c.row;
-        R = d.row + (F - 1) % N;
+    const y = [], m = s.start, p = s.end, N = p.row - m.row + 1, F = p.col - m.col + 1;
+    C.forEach((r) => {
+      let v, H;
+      if (r.row < m.row) {
+        const k = m.row - r.row;
+        v = p.row - (k - 1) % N;
+      } else if (r.row > p.row) {
+        const k = r.row - p.row;
+        v = m.row + (k - 1) % N;
       } else
-        R = r.row;
-      if (r.col < d.col) {
-        const F = d.col - r.col;
-        k = c.col - (F - 1) % D;
-      } else if (r.col > c.col) {
-        const F = r.col - c.col;
-        k = d.col + (F - 1) % D;
+        v = r.row;
+      if (r.col < m.col) {
+        const k = m.col - r.col;
+        H = p.col - (k - 1) % F;
+      } else if (r.col > p.col) {
+        const k = r.col - p.col;
+        H = m.col + (k - 1) % F;
       } else
-        k = r.col;
-      let T = n({ row: R, col: k });
-      if (r.row !== R && r.col >= d.col && r.col <= c.col) {
-        const F = [];
-        for (let t = d.row; t <= c.row; t++)
-          F.push(n({ row: t, col: r.col }));
-        const y = H(F);
-        if (y && y.diff !== 0) {
-          if (r.row > c.row) {
-            const t = r.row - c.row;
-            T = String(y.numbers[y.numbers.length - 1] + y.diff * t);
-          } else if (r.row < d.row) {
-            const t = d.row - r.row;
-            T = String(y.numbers[0] - y.diff * t);
+        H = r.col;
+      let T = o({ row: v, col: H });
+      if (r.row !== v && r.col >= m.col && r.col <= p.col) {
+        const k = [];
+        for (let E = m.row; E <= p.row; E++)
+          k.push(o({ row: E, col: r.col }));
+        const c = q(k);
+        if (c && c.diff !== 0) {
+          if (r.row > p.row) {
+            const E = r.row - p.row;
+            T = String(c.numbers[c.numbers.length - 1] + c.diff * E);
+          } else if (r.row < m.row) {
+            const E = m.row - r.row;
+            T = String(c.numbers[0] - c.diff * E);
           }
         }
       }
-      if (r.col !== k && r.row >= d.row && r.row <= c.row) {
-        const F = [];
-        for (let t = d.col; t <= c.col; t++)
-          F.push(n({ row: r.row, col: t }));
-        const y = H(F);
-        if (y && y.diff !== 0) {
-          if (r.col > c.col) {
-            const t = r.col - c.col;
-            T = String(y.numbers[y.numbers.length - 1] + y.diff * t);
-          } else if (r.col < d.col) {
-            const t = d.col - r.col;
-            T = String(y.numbers[0] - y.diff * t);
+      if (r.col !== H && r.row >= m.row && r.row <= p.row) {
+        const k = [];
+        for (let E = m.col; E <= p.col; E++)
+          k.push(o({ row: r.row, col: E }));
+        const c = q(k);
+        if (c && c.diff !== 0) {
+          if (r.col > p.col) {
+            const E = r.col - p.col;
+            T = String(c.numbers[c.numbers.length - 1] + c.diff * E);
+          } else if (r.col < m.col) {
+            const E = m.col - r.col;
+            T = String(c.numbers[0] - c.diff * E);
           }
         }
       }
-      p.push({ coord: r, value: T });
-    }), p.length > 0 && l(p), u(null), i([]), f(!1), e(null);
-  }, [o, b, a, n, l]), g = x(
-    (w) => b.some(
-      (p) => p.row === w.row && p.col === w.col
+      y.push({ coord: r, value: T });
+    }), y.length > 0 && n(y), a(null), u([]), f(!1), d(null);
+  }, [e, C, S, o, n]), g = D(
+    (s) => C.some(
+      (y) => y.row === s.row && y.col === s.col
     ),
-    [b]
+    [C]
   );
-  return W(() => {
-    const w = () => {
-      h && S();
+  return U(() => {
+    const s = () => {
+      h && w();
     };
-    return window.addEventListener("mouseup", w), () => window.removeEventListener("mouseup", w);
-  }, [h, S]), {
-    fillSource: s,
-    fillTargets: b,
+    return window.addEventListener("mouseup", s), () => window.removeEventListener("mouseup", s);
+  }, [h, w]), {
+    fillSource: i,
+    fillTargets: C,
     isDraggingFill: h,
     isFillTarget: g,
-    handleFillHandleMouseDown: C,
+    handleFillHandleMouseDown: t,
     handleCellMouseEnterForFill: M,
-    handleFillMouseUp: S
+    handleFillMouseUp: w
   };
 }
-const V = {
+const re = {
   position: "relative",
   border: "1px solid #d1d5db",
-  padding: 0
-}, oo = {
+  padding: 0,
+  height: "28px",
+  minWidth: "80px"
+}, se = {
   width: "100%",
   height: "100%",
-  paddingLeft: "4px",
-  paddingRight: "4px",
-  paddingTop: "4px",
-  paddingBottom: "4px",
+  padding: "4px",
   textAlign: "right",
   fontSize: "12px",
+  boxSizing: "border-box",
+  cursor: "cell",
   backgroundColor: "transparent",
   outline: "none",
-  cursor: "cell"
-}, no = {
+  border: "none"
+}, ce = {
   position: "absolute",
   bottom: "-2px",
   right: "-2px",
@@ -301,291 +344,353 @@ const V = {
   cursor: "crosshair",
   zIndex: 20,
   backgroundColor: "#3b82f6"
-}, to = {
+}, ie = {
   backgroundColor: "#dbeafe",
   outline: "2px solid #3b82f6",
   outlineOffset: "-2px"
-}, lo = {
+}, ae = {
   backgroundColor: "#eff6ff"
 };
-function eo({
-  coord: o,
-  value: n,
-  isSelected: l,
-  isFillTarget: s,
-  showFillHandle: u,
-  onMouseDown: b,
-  onMouseEnter: i,
+function ue({
+  coord: e,
+  value: o,
+  isSelected: n,
+  isFillTarget: i,
+  showFillHandle: a,
+  onMouseDown: C,
+  onMouseEnter: u,
   onChange: h,
   onFillHandleMouseDown: f,
-  styles: a
+  styles: S
 }) {
-  const e = (c) => {
-    h(o, c.target.value);
-  }, C = (c) => {
-    c.target.classList.contains("fill-handle") || b(o);
-  }, M = (c) => {
-    c.stopPropagation(), c.preventDefault(), f(o);
-  }, S = !!a?.selected, g = !!a?.fillTarget, w = !!a?.fillHandle, p = {
-    ...V,
-    ...l && !S ? to : {},
-    ...s && !g ? lo : {}
-  }, d = {
-    ...no,
-    ...w ? { backgroundColor: void 0 } : {}
+  const [d, t] = L(!1), [M, w] = L(!1), g = P(null);
+  U(() => {
+    n && g.current && (g.current.focus(), d && M && (g.current.select(), w(!1)));
+  }, [n, d, M]), U(() => {
+    !n && d && t(!1);
+  }, [n, d]);
+  const s = (c) => {
+    h(e, c.target.value);
+  }, y = (c) => {
+    c.target.classList.contains("fill-handle") || C(e);
+  }, m = () => {
+    t(!0), w(!0);
+  }, p = () => {
+    t(!1);
+  }, N = (c) => {
+    d ? (c.key === "Enter" || c.key === "Escape") && t(!1) : c.key === "Enter" ? (c.preventDefault(), t(!0), w(!0)) : c.key.length === 1 && !c.ctrlKey && !c.metaKey && (c.preventDefault(), h(e, c.key), t(!0));
+  }, F = (c) => {
+    c.stopPropagation(), c.preventDefault(), f(e);
+  }, r = !!S?.selected, v = !!S?.fillTarget, H = !!S?.fillHandle, T = {
+    ...re,
+    ...n && !r ? ie : {},
+    ...i && !v ? ae : {}
+  }, k = {
+    ...ce,
+    ...H ? { backgroundColor: void 0 } : {}
   };
-  return /* @__PURE__ */ G(
+  return /* @__PURE__ */ I(
     "td",
     {
-      className: I(
-        a?.cell,
-        l && a?.selected,
-        s && a?.fillTarget
+      className: K(
+        S?.cell,
+        n && S?.selected,
+        i && S?.fillTarget
       ),
-      style: p,
-      onMouseDown: C,
-      onMouseEnter: () => i(o),
+      style: T,
+      onMouseDown: y,
+      onMouseEnter: () => u(e),
+      onDoubleClick: m,
       children: [
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ R(
           "input",
           {
+            ref: g,
             type: "text",
-            value: n,
-            onChange: e,
-            style: oo
+            value: o,
+            readOnly: !d,
+            onChange: s,
+            onBlur: p,
+            onKeyDown: N,
+            style: se
           }
         ),
-        u && /* @__PURE__ */ v(
+        a && /* @__PURE__ */ R(
           "div",
           {
-            className: I("fill-handle", a?.fillHandle),
-            style: d,
-            onMouseDown: M
+            className: K("fill-handle", S?.fillHandle),
+            style: k,
+            onMouseDown: F
           }
         )
       ]
     }
   );
 }
-const ro = {
+const fe = {
   outline: "none",
   overflowX: "auto"
-}, so = {
+}, de = {
   borderCollapse: "collapse",
   fontSize: "12px",
   userSelect: "none"
-}, U = {
+}, we = {
   position: "sticky",
   left: 0,
   zIndex: 10,
-  backgroundColor: "#f3f4f6",
   border: "1px solid #d1d5db",
   padding: "6px 8px",
   textAlign: "center",
   fontWeight: 500
-}, co = {
-  backgroundColor: "#dbeafe",
+}, he = {
   border: "1px solid #d1d5db",
   padding: "6px 4px",
   textAlign: "center",
-  fontWeight: 500,
-  color: "#1d4ed8"
-}, io = {
-  backgroundColor: "#f9fafb",
+  fontWeight: 500
+}, pe = {
   border: "1px solid #d1d5db",
   padding: "4px",
   textAlign: "center",
   fontWeight: 500,
   fontSize: "11px"
+}, me = {
+  backgroundColor: "#f3f4f6"
+}, be = {
+  backgroundColor: "#dbeafe",
+  color: "#1d4ed8"
+}, ye = {
+  backgroundColor: "#f9fafb"
 };
-function mo({
-  data: o,
-  onChange: n,
-  rowHeaders: l,
-  colHeaders: s,
-  className: u,
-  rowHeaderTitle: b = "",
-  styles: i
+function ke({
+  data: e,
+  onChange: o,
+  rowHeaders: n,
+  colHeaders: i,
+  className: a,
+  rowHeaderTitle: C = "",
+  styles: u
 }) {
-  const h = $(null), f = o.length, a = q(() => s ? s.reduce(
-    (t, m) => t + m.headers.length,
+  const h = P(null), f = e.length, S = W(() => i ? i.reduce(
+    (l, b) => l + b.headers.length,
     0
-  ) : o[0]?.length ?? 0, [s, o]), e = q(() => s ? s.flatMap((t) => t.headers) : [], [s]), C = x(
-    (t) => t.row < 0 || t.row >= f || t.col < 0 || t.col >= a ? "" : o[t.row]?.[t.col] ?? "",
-    [o, f, a]
-  ), M = x(
-    (t, m) => {
-      const E = o.map(
-        (B, z) => z === t.row ? B.map(
-          (j, A) => A === t.col ? m : j
-        ) : B
+  ) : e[0]?.length ?? 0, [i, e]), d = W(() => i ? i.flatMap((l) => l.headers) : [], [i]), t = W(() => {
+    if (!n) return null;
+    const l = [];
+    return n.forEach((b, x) => {
+      b.headers.forEach((z, A) => {
+        l.push({
+          groupIndex: x,
+          isFirstInGroup: A === 0,
+          groupLabel: b.label,
+          groupRowCount: b.headers.length,
+          rowHeader: z,
+          groupClassName: b.className,
+          groupDescription: b.description
+        });
+      });
+    }), l;
+  }, [n]), M = D(
+    (l) => l.row < 0 || l.row >= f || l.col < 0 || l.col >= S ? "" : e[l.row]?.[l.col] ?? "",
+    [e, f, S]
+  ), w = D(
+    (l, b) => {
+      const x = e.map(
+        (z, A) => A === l.row ? z.map(
+          (G, O) => O === l.col ? b : G
+        ) : z
       );
-      n(E);
+      o(x);
     },
-    [o, n]
-  ), S = x(
-    (t) => {
-      if (t.length === 0) return;
-      const m = o.map((E) => [...E]);
-      t.forEach(({ coord: E, value: B }) => {
-        E.row >= 0 && E.row < f && E.col >= 0 && E.col < a && (m[E.row][E.col] = B);
-      }), n(m);
+    [e, o]
+  ), g = D(
+    (l) => {
+      if (l.length === 0) return;
+      const b = e.map((x) => [...x]);
+      l.forEach(({ coord: x, value: z }) => {
+        x.row >= 0 && x.row < f && x.col >= 0 && x.col < S && (b[x.row][x.col] = z);
+      }), o(b);
     },
-    [o, n, f, a]
+    [e, o, f, S]
   ), {
-    selection: g,
-    isSelecting: w,
-    isCellSelected: p,
-    handleCellMouseDown: d,
-    handleCellMouseEnter: c
-  } = J(), { handleKeyDown: N } = Q({
-    selection: g,
-    getValue: C,
-    setValues: S,
+    selection: s,
+    isSelecting: y,
+    isCellSelected: m,
+    handleCellMouseDown: p,
+    handleCellMouseEnter: N,
+    setSelection: F
+  } = oe({ containerRef: h }), { handleKeyDown: r } = te({
+    selection: s,
+    getValue: M,
+    setValues: g,
+    setSelection: F,
     rowCount: f,
-    colCount: a
+    colCount: S
   }), {
-    isDraggingFill: D,
-    isFillTarget: r,
-    handleFillHandleMouseDown: R,
+    isDraggingFill: v,
+    isFillTarget: H,
+    handleFillHandleMouseDown: T,
     handleCellMouseEnterForFill: k
-  } = Z({
-    selection: g,
-    getValue: C,
-    setValues: S
-  }), T = x(
-    (t) => {
-      D ? k(t) : w && c(t);
+  } = le({
+    selection: s,
+    getValue: M,
+    setValues: g
+  }), c = D(
+    (l) => {
+      v ? k(l) : y && N(l);
     },
     [
-      D,
-      w,
+      v,
+      y,
       k,
-      c
+      N
     ]
-  ), F = x(
-    (t, m) => {
-      M(t, m);
+  ), E = D(
+    (l, b) => {
+      w(l, b);
     },
-    [M]
-  ), y = x(
-    (t) => {
-      if (!g.start) return !1;
-      const m = L(g);
-      return !m.start || !m.end ? !1 : t.row === m.end.row && t.col === m.end.col;
+    [w]
+  ), V = D(
+    (l) => {
+      if (!s.start) return !1;
+      const b = B(s);
+      return !b.start || !b.end ? !1 : l.row === b.end.row && l.col === b.end.col;
     },
-    [g]
-  );
-  return /* @__PURE__ */ v(
+    [s]
+  ), j = (l) => ({
+    ...we,
+    ...!l && !u?.rowHeader ? me : {}
+  }), $ = (l) => ({
+    ...he,
+    ...!l && !u?.colGroup ? be : {}
+  }), X = (l) => ({
+    ...pe,
+    ...!l && !u?.colHeader ? ye : {}
+  });
+  return /* @__PURE__ */ R(
     "div",
     {
       ref: h,
-      className: u,
-      style: ro,
+      className: a,
+      style: fe,
       tabIndex: 0,
-      onKeyDown: N,
-      children: /* @__PURE__ */ G("table", { style: so, children: [
-        /* @__PURE__ */ G("thead", { children: [
-          s && /* @__PURE__ */ G("tr", { children: [
-            l && /* @__PURE__ */ v(
+      onKeyDown: r,
+      children: /* @__PURE__ */ I("table", { style: de, children: [
+        /* @__PURE__ */ I("thead", { children: [
+          i && /* @__PURE__ */ I("tr", { children: [
+            n && /* @__PURE__ */ R(
               "th",
               {
-                className: i?.rowHeader,
-                style: U,
-                children: b
+                colSpan: 2,
+                className: u?.rowHeader,
+                style: j(),
+                children: C
               }
             ),
-            s.map((t, m) => /* @__PURE__ */ v(
+            i.map((l, b) => /* @__PURE__ */ R(
               "th",
               {
-                colSpan: t.headers.length,
-                className: I(i?.colGroup, t.className),
-                style: co,
-                children: t.label
+                colSpan: l.headers.length,
+                className: K(u?.colGroup, l.className),
+                style: $(l.className),
+                title: l.description,
+                children: l.label
               },
-              m
+              b
             ))
           ] }),
-          s && /* @__PURE__ */ G("tr", { children: [
-            l && /* @__PURE__ */ v(
+          i && /* @__PURE__ */ I("tr", { children: [
+            n && /* @__PURE__ */ R(
               "th",
               {
-                className: i?.rowHeader,
-                style: U
+                colSpan: 2,
+                className: u?.rowHeader,
+                style: j()
               }
             ),
-            e.map((t) => /* @__PURE__ */ v(
+            d.map((l) => /* @__PURE__ */ R(
               "th",
               {
-                className: I(i?.colHeader, t.className),
-                style: io,
-                title: t.description,
-                children: t.label
+                className: K(u?.colHeader, l.className),
+                style: X(l.className),
+                title: l.description,
+                children: l.label
               },
-              t.key
+              l.key
             ))
           ] })
         ] }),
-        /* @__PURE__ */ v("tbody", { children: o.map((t, m) => /* @__PURE__ */ G("tr", { children: [
-          l && l[m] && /* @__PURE__ */ v(
-            "td",
-            {
-              className: I(
-                i?.rowHeader,
-                l[m].className
+        /* @__PURE__ */ R("tbody", { children: e.map((l, b) => {
+          const x = t?.[b];
+          return /* @__PURE__ */ I("tr", { children: [
+            x && /* @__PURE__ */ I(Q, { children: [
+              x.isFirstInGroup && /* @__PURE__ */ R(
+                "td",
+                {
+                  rowSpan: x.groupRowCount,
+                  className: K(u?.rowHeader, x.groupClassName),
+                  style: j(x.groupClassName),
+                  title: x.groupDescription,
+                  children: x.groupLabel
+                }
               ),
-              style: U,
-              title: l[m].description,
-              children: l[m].label
-            }
-          ),
-          t.map((E, B) => {
-            const z = { row: m, col: B }, j = p(z), A = r(z), P = y(z);
-            return /* @__PURE__ */ v(
-              eo,
-              {
-                coord: z,
-                value: C(z),
-                isSelected: j,
-                isFillTarget: A,
-                showFillHandle: P && !D,
-                onMouseDown: d,
-                onMouseEnter: T,
-                onChange: F,
-                onFillHandleMouseDown: R,
-                styles: i
-              },
-              B
-            );
-          })
-        ] }, m)) })
+              /* @__PURE__ */ R(
+                "td",
+                {
+                  className: K(u?.rowHeader, x.rowHeader.className),
+                  style: j(x.rowHeader.className),
+                  title: x.rowHeader.description,
+                  children: x.rowHeader.label
+                }
+              )
+            ] }),
+            l.map((z, A) => {
+              const G = { row: b, col: A }, O = m(G), _ = H(G), J = V(G);
+              return /* @__PURE__ */ R(
+                ue,
+                {
+                  coord: G,
+                  value: M(G),
+                  isSelected: O,
+                  isFillTarget: _,
+                  showFillHandle: J && !v,
+                  onMouseDown: p,
+                  onMouseEnter: c,
+                  onChange: E,
+                  onFillHandleMouseDown: T,
+                  styles: u
+                },
+                A
+              );
+            })
+          ] }, b);
+        }) })
       ] })
     }
   );
 }
-function bo(o) {
-  const n = typeof o == "string" ? parseFloat(o.replace(/,/g, "")) : o;
-  return isNaN(n) ? "0" : new Intl.NumberFormat("ko-KR").format(n);
+function Ee(e) {
+  const o = typeof e == "string" ? parseFloat(e.replace(/,/g, "")) : e;
+  return isNaN(o) ? "0" : new Intl.NumberFormat("ko-KR").format(o);
 }
-function xo(o) {
-  const n = parseInt(o.replace(/,/g, ""), 10);
-  return isNaN(n) ? 0 : n;
+function Fe(e) {
+  const o = parseInt(e.replace(/,/g, ""), 10);
+  return isNaN(o) ? 0 : o;
 }
 export {
-  mo as ExcelGrid,
-  eo as GridCell,
-  I as cn,
-  fo as coordToKey,
-  bo as formatCurrency,
-  ho as getCellsInRange,
-  po as getFillTargetCells,
-  O as isCellInRange,
-  wo as keyToCoord,
-  L as normalizeRange,
-  xo as parseCurrency,
-  X as parseTSV,
-  _ as toTSV,
-  Q as useGridClipboard,
-  Z as useGridDragFill,
-  J as useGridSelection
+  ke as ExcelGrid,
+  ue as GridCell,
+  K as cn,
+  ge as coordToKey,
+  Ee as formatCurrency,
+  Me as getCellsInRange,
+  De as getFillTargetCells,
+  Y as isCellInRange,
+  Se as keyToCoord,
+  B as normalizeRange,
+  Fe as parseCurrency,
+  Z as parseTSV,
+  ee as toTSV,
+  te as useGridClipboard,
+  le as useGridDragFill,
+  oe as useGridSelection
 };