@simplysm/solid 13.0.0-beta.6

package/dist/components/data/sheet/DataSheet.js

@@ -0,0 +1,907 @@
+import { children, createMemo, createSignal, For, Show, splitProps, useContext } from "solid-js";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import {
+  IconArrowsSort,
+  IconChevronDown,
+  IconChevronRight,
+  IconGripVertical,
+  IconSettings,
+  IconSortAscending,
+  IconSortDescending
+} from "@tabler/icons-solidjs";
+import "@simplysm/core-browser";
+import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn";
+import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { Icon } from "../../display/Icon";
+import { Checkbox } from "../../form-control/checkbox/Checkbox";
+import { Pagination } from "../Pagination";
+import { usePersisted } from "../../../hooks/usePersisted";
+import { DialogContext } from "../../disclosure/DialogContext";
+import "./DataSheet.css";
+import {
+  configButtonClass,
+  defaultContainerClass,
+  expandIndentGuideClass,
+  expandIndentGuideLineClass,
+  expandToggleClass,
+  featureCellBodyClickableClass,
+  featureCellBodyWrapperClass,
+  featureCellClickableClass,
+  featureCellWrapperClass,
+  featureTdClass,
+  featureThClass,
+  fixedClass,
+  fixedLastClass,
+  insetContainerClass,
+  insetTableClass,
+  reorderCellWrapperClass,
+  reorderHandleClass,
+  reorderIndicatorClass,
+  resizeIndicatorClass,
+  resizerClass,
+  selectSingleClass,
+  selectSingleSelectedClass,
+  selectSingleUnselectedClass,
+  dataSheetContainerClass,
+  sortableThClass,
+  sortIconClass,
+  summaryThClass,
+  tableClass,
+  tdClass,
+  thClass,
+  thContentClass,
+  toolbarClass
+} from "./DataSheet.styles";
+const DataSheet = (props) => {
+  const [local] = splitProps(props, [
+    "items",
+    "persistKey",
+    "hideConfigBar",
+    "inset",
+    "contentStyle",
+    "sorts",
+    "onSortsChange",
+    "autoSort",
+    "pageIndex",
+    "onPageIndexChange",
+    "totalPageCount",
+    "itemsPerPage",
+    "displayPageCount",
+    "expandedItems",
+    "onExpandedItemsChange",
+    "getChildren",
+    "selectMode",
+    "selectedItems",
+    "onSelectedItemsChange",
+    "autoSelect",
+    "isItemSelectable",
+    "cellClass",
+    "cellStyle",
+    "onItemsReorder",
+    "class",
+    "children"
+  ]);
+  const modal = useContext(DialogContext);
+  const resolved = children(() => local.children);
+  const columnDefs = createMemo(
+    () => resolved.toArray().filter(isDataSheetColumnDef).filter(
+      (col) => !col.hidden
+    )
+  );
+  const [config, setConfig] = local.persistKey != null && local.persistKey !== "" ? usePersisted(`sheet.${local.persistKey}`, { columnRecord: {} }) : createSignal({ columnRecord: {} });
+  const effectiveColumns = createMemo(() => {
+    const cols = columnDefs();
+    const record = config().columnRecord ?? {};
+    return cols.filter((col) => {
+      const saved = record[col.key];
+      return !(saved == null ? void 0 : saved.hidden);
+    }).map((col) => {
+      const saved = record[col.key];
+      if (saved == null) return col;
+      return {
+        ...col,
+        fixed: saved.fixed ?? col.fixed,
+        width: saved.width ?? col.width
+      };
+    }).sort((a, b) => {
+      var _a, _b;
+      const orderA = ((_a = record[a.key]) == null ? void 0 : _a.displayOrder) ?? Infinity;
+      const orderB = ((_b = record[b.key]) == null ? void 0 : _b.displayOrder) ?? Infinity;
+      return orderA - orderB;
+    });
+  });
+  function saveColumnWidth(colKey, width) {
+    const prev = config();
+    const record = { ...prev.columnRecord };
+    record[colKey] = { ...record[colKey], width };
+    setConfig({ ...prev, columnRecord: record });
+  }
+  async function openConfigModal() {
+    if (!modal) return;
+    const { DataSheetConfigDialog } = await import("./DataSheetConfigDialog");
+    const allCols = resolved.toArray().filter(isDataSheetColumnDef);
+    const columnInfos = allCols.filter((col) => !col.collapse).map((col) => ({
+      key: col.key,
+      header: col.header,
+      fixed: col.fixed,
+      hidden: col.hidden,
+      collapse: col.collapse,
+      width: col.width
+    }));
+    const currentConfig = config();
+    const result = await modal.show(
+      () => /* @__PURE__ */ React.createElement(DataSheetConfigDialog, { columnInfos, currentConfig }),
+      {
+        title: "\uC2DC\uD2B8 \uC124\uC815",
+        closeOnBackdrop: true,
+        closeOnEscape: true
+      }
+    );
+    if (result) {
+      setConfig(result);
+    }
+  }
+  const headerTable = createMemo(() => buildHeaderTable(effectiveColumns()));
+  const hasSummary = createMemo(() => effectiveColumns().some((col) => col.summary != null));
+  const [sorts, setSorts] = createControllableSignal({
+    value: () => local.sorts ?? [],
+    onChange: () => local.onSortsChange
+  });
+  function toggleSort(key, multiple) {
+    const current = sorts();
+    const existing = current.find((s) => s.key === key);
+    if (existing) {
+      if (!existing.desc) {
+        const updated = current.map((s) => s.key === key ? { ...s, desc: true } : s);
+        setSorts(multiple ? updated : [{ key, desc: true }]);
+      } else {
+        const updated = current.filter((s) => s.key !== key);
+        setSorts(multiple ? updated : []);
+      }
+    } else {
+      const newSort = { key, desc: false };
+      setSorts(multiple ? [...current, newSort] : [newSort]);
+    }
+  }
+  function getSortDef(key) {
+    return sorts().find((s) => s.key === key);
+  }
+  function getSortIndex(key) {
+    if (sorts().length <= 1) return void 0;
+    const idx = sorts().findIndex((s) => s.key === key);
+    return idx >= 0 ? idx + 1 : void 0;
+  }
+  const sortedItems = createMemo(() => {
+    if (!local.autoSort) return local.items ?? [];
+    return applySorting(local.items ?? [], sorts());
+  });
+  const [currentPage, setCurrentPage] = createControllableSignal({
+    value: () => local.pageIndex ?? 0,
+    onChange: () => local.onPageIndexChange
+  });
+  const effectivePageCount = createMemo(() => {
+    const ipp = local.itemsPerPage;
+    if (ipp != null && ipp !== 0 && (local.items ?? []).length > 0) {
+      return Math.ceil((local.items ?? []).length / ipp);
+    }
+    return local.totalPageCount ?? 0;
+  });
+  const pagedItems = createMemo(() => {
+    const ipp = local.itemsPerPage;
+    if (ipp == null || ipp === 0) return sortedItems();
+    if ((local.items ?? []).length <= 0) return sortedItems();
+    const page = currentPage();
+    return sortedItems().slice(page * ipp, (page + 1) * ipp);
+  });
+  const hasExpandFeature = () => local.getChildren != null;
+  const hasSelectFeature = () => local.selectMode != null;
+  const hasReorderFeature = () => local.onItemsReorder != null;
+  function createTrackedWidth() {
+    const [width, setWidth] = createSignal(0);
+    const register = (el) => {
+      createResizeObserver(el, () => {
+        setWidth(el.offsetWidth);
+      });
+    };
+    return [width, register];
+  }
+  const [expandColWidth, registerExpandColRef] = createTrackedWidth();
+  const [selectColWidth, registerSelectColRef] = createTrackedWidth();
+  const [reorderColWidth, registerReorderColRef] = createTrackedWidth();
+  const selectColLeft = createMemo(() => hasExpandFeature() ? `${expandColWidth()}px` : "0");
+  const reorderColLeft = createMemo(() => {
+    let left = 0;
+    if (hasExpandFeature()) left += expandColWidth();
+    if (hasSelectFeature()) left += selectColWidth();
+    return `${left}px`;
+  });
+  const columnRefs = /* @__PURE__ */ new Map();
+  const [columnWidths, setColumnWidths] = createSignal(/* @__PURE__ */ new Map());
+  const featureColTotalWidth = createMemo(() => {
+    let w = 0;
+    if (hasExpandFeature()) w += expandColWidth();
+    if (hasSelectFeature()) w += selectColWidth();
+    if (hasReorderFeature()) w += reorderColWidth();
+    return w;
+  });
+  const fixedLeftMap = createMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const cols = effectiveColumns();
+    const widths = columnWidths();
+    let left = featureColTotalWidth();
+    for (let c = 0; c < cols.length; c++) {
+      if (!cols[c].fixed) break;
+      map.set(c, left);
+      left += widths.get(c) ?? 0;
+    }
+    return map;
+  });
+  const lastFixedIndex = createMemo(() => {
+    const cols = effectiveColumns();
+    let last = -1;
+    for (let c = 0; c < cols.length; c++) {
+      if (cols[c].fixed) last = c;
+      else break;
+    }
+    return last;
+  });
+  function getFixedStyle(colIndex) {
+    const leftVal = fixedLeftMap().get(colIndex);
+    if (leftVal == null) return void 0;
+    return `left: ${leftVal}px`;
+  }
+  function isLastFixed(colIndex) {
+    return colIndex === lastFixedIndex();
+  }
+  function registerColumnRef(colIndex, el) {
+    columnRefs.set(colIndex, el);
+    createResizeObserver(el, () => {
+      setColumnWidths((prev) => {
+        const next = new Map(prev);
+        next.set(colIndex, el.offsetWidth);
+        return next;
+      });
+    });
+  }
+  const [resizeIndicatorStyle, setResizeIndicatorStyle] = createSignal({
+    display: "none"
+  });
+  function onResizerPointerdown(event, colKey) {
+    event.preventDefault();
+    const target = event.target;
+    target.setPointerCapture(event.pointerId);
+    const th = target.closest("th");
+    const container = th.closest("[data-sheet]").querySelector("[data-sheet-scroll]");
+    const startX = event.clientX;
+    const startWidth = th.offsetWidth;
+    const containerRect = container.getBoundingClientRect();
+    setResizeIndicatorStyle({
+      display: "block",
+      left: `${th.getBoundingClientRect().right - containerRect.left + container.scrollLeft}px`,
+      top: "0",
+      height: `${container.scrollHeight}px`
+    });
+    const onPointerMove = (e) => {
+      const delta = e.clientX - startX;
+      const newWidth = Math.max(30, startWidth + delta);
+      const currentRect = container.getBoundingClientRect();
+      setResizeIndicatorStyle({
+        display: "block",
+        left: `${th.getBoundingClientRect().left - currentRect.left + container.scrollLeft + newWidth}px`,
+        top: "0",
+        height: `${container.scrollHeight}px`
+      });
+    };
+    const onPointerUp = (e) => {
+      const delta = e.clientX - startX;
+      if (delta !== 0) {
+        const newWidth = Math.max(30, startWidth + delta);
+        saveColumnWidth(colKey, `${newWidth}px`);
+      }
+      setResizeIndicatorStyle({ display: "none" });
+      target.removeEventListener("pointermove", onPointerMove);
+      target.removeEventListener("pointerup", onPointerUp);
+    };
+    target.addEventListener("pointermove", onPointerMove);
+    target.addEventListener("pointerup", onPointerUp);
+  }
+  function onResizerDoubleClick(colKey) {
+    saveColumnWidth(colKey, void 0);
+  }
+  const [headerRowHeights, setHeaderRowHeights] = createSignal([]);
+  function registerHeaderRow(rowIndex, el) {
+    createResizeObserver(el, (rect) => {
+      setHeaderRowHeights((prev) => {
+        const next = [...prev];
+        next[rowIndex] = rect.height;
+        return next;
+      });
+    });
+  }
+  const headerRowTops = createMemo(() => {
+    const heights = headerRowHeights();
+    const tops = [];
+    let acc = 0;
+    for (let i = 0; i < heights.length; i++) {
+      tops.push(acc);
+      acc += heights[i] ?? 0;
+    }
+    return tops;
+  });
+  const summaryRowTop = createMemo(() => {
+    const heights = headerRowHeights();
+    return heights.reduce((sum, h) => sum + h, 0);
+  });
+  const [expandedItems, setExpandedItems] = createControllableSignal({
+    value: () => local.expandedItems ?? [],
+    onChange: () => local.onExpandedItemsChange
+  });
+  function toggleExpand(item) {
+    const current = expandedItems();
+    if (current.includes(item)) {
+      setExpandedItems(current.filter((i) => i !== item));
+    } else {
+      setExpandedItems([...current, item]);
+    }
+  }
+  function toggleExpandAll() {
+    if (!local.getChildren) return;
+    const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
+    const isAllExpanded2 = allExpandable.every((item) => expandedItems().includes(item));
+    setExpandedItems(isAllExpanded2 ? [] : allExpandable);
+  }
+  const flatItems = createMemo(() => {
+    return flattenTree(pagedItems(), expandedItems(), local.getChildren);
+  });
+  const [selectedItems, setSelectedItems] = createControllableSignal({
+    value: () => local.selectedItems ?? [],
+    onChange: () => local.onSelectedItemsChange
+  });
+  const [lastClickedRow, setLastClickedRow] = createSignal(null);
+  const [lastClickAction, setLastClickAction] = createSignal("select");
+  function getItemSelectable(item) {
+    if (!local.isItemSelectable) return true;
+    return local.isItemSelectable(item);
+  }
+  function toggleSelect(item) {
+    if (getItemSelectable(item) !== true) return;
+    const isSelected = selectedItems().includes(item);
+    setLastClickAction(isSelected ? "deselect" : "select");
+    if (local.selectMode === "single") {
+      setSelectedItems(isSelected ? [] : [item]);
+    } else {
+      setSelectedItems(isSelected ? selectedItems().filter((i) => i !== item) : [...selectedItems(), item]);
+    }
+  }
+  function toggleSelectAll() {
+    const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
+    const isAllSelected = selectableItems.every((item) => selectedItems().includes(item));
+    setSelectedItems(isAllSelected ? [] : selectableItems);
+  }
+  function rangeSelect(targetRow) {
+    const lastRow = lastClickedRow();
+    if (lastRow == null) return;
+    const start = Math.min(lastRow, targetRow);
+    const end = Math.max(lastRow, targetRow);
+    const rangeItems = displayItems().slice(start, end + 1).map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
+    if (lastClickAction() === "select") {
+      const newItems = [...selectedItems()];
+      for (const item of rangeItems) {
+        if (!newItems.includes(item)) newItems.push(item);
+      }
+      setSelectedItems(newItems);
+    } else {
+      setSelectedItems(selectedItems().filter((item) => !rangeItems.includes(item)));
+    }
+  }
+  function selectItem(item) {
+    if (getItemSelectable(item) !== true) return;
+    if (local.selectMode === "single") {
+      setSelectedItems([item]);
+    } else {
+      if (!selectedItems().includes(item)) {
+        setSelectedItems([...selectedItems(), item]);
+      }
+    }
+  }
+  const [dragState, setDragState] = createSignal(null);
+  function isDescendant(parent, child) {
+    if (!local.getChildren) return false;
+    const childItems = local.getChildren(parent, 0);
+    if (!childItems) return false;
+    for (const c of childItems) {
+      if (c === child) return true;
+      if (isDescendant(c, child)) return true;
+    }
+    return false;
+  }
+  function onReorderPointerDown(e, item) {
+    e.preventDefault();
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    const tableEl = target.closest("table");
+    const tbody = tableEl.querySelector("tbody");
+    const rows = Array.from(tbody.rows);
+    setDragState({ draggingItem: item, targetItem: null, position: null });
+    const onPointerMove = (ev) => {
+      var _a;
+      let foundTarget = null;
+      let foundPosition = null;
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        const rect = row.getBoundingClientRect();
+        if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
+        if (i >= displayItems().length) break;
+        const flat = displayItems()[i];
+        if (flat.item === item) break;
+        if (isDescendant(item, flat.item)) break;
+        const relY = ev.clientY - rect.top;
+        const third = rect.height / 3;
+        if (relY < third) {
+          foundPosition = "before";
+        } else if (relY > third * 2) {
+          foundPosition = "after";
+        } else {
+          foundPosition = local.getChildren ? "inside" : relY < rect.height / 2 ? "before" : "after";
+        }
+        foundTarget = flat.item;
+        break;
+      }
+      setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
+      for (let i = 0; i < rows.length; i++) {
+        rows[i].removeAttribute("data-dragging");
+        rows[i].removeAttribute("data-drag-over");
+        if (i < displayItems().length) {
+          const flat = displayItems()[i];
+          if (flat.item === item) {
+            rows[i].setAttribute("data-dragging", "");
+          }
+          if (flat.item === foundTarget && foundPosition === "inside") {
+            rows[i].setAttribute("data-drag-over", "inside");
+          }
+        }
+      }
+      const indicatorEl = (_a = tableEl.closest("[data-sheet-scroll]")) == null ? void 0 : _a.querySelector("[data-reorder-indicator]");
+      if (indicatorEl) {
+        if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
+          const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
+          if (targetIdx >= 0) {
+            const targetRow = rows[targetIdx];
+            const containerRect = tableEl.closest("[data-sheet-scroll]").getBoundingClientRect();
+            const rowRect = targetRow.getBoundingClientRect();
+            const scrollEl = tableEl.closest("[data-sheet-scroll]");
+            const top = foundPosition === "before" ? rowRect.top - containerRect.top + scrollEl.scrollTop : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
+            indicatorEl.style.display = "block";
+            indicatorEl.style.top = `${top}px`;
+          }
+        } else {
+          indicatorEl.style.display = "none";
+        }
+      }
+    };
+    const onPointerUp = () => {
+      var _a, _b;
+      const state = dragState();
+      if ((state == null ? void 0 : state.targetItem) != null && state.position != null) {
+        (_a = local.onItemsReorder) == null ? void 0 : _a.call(local, {
+          item: state.draggingItem,
+          targetItem: state.targetItem,
+          position: state.position
+        });
+      }
+      for (const row of rows) {
+        row.removeAttribute("data-dragging");
+        row.removeAttribute("data-drag-over");
+      }
+      const indicatorEl = (_b = tableEl.closest("[data-sheet-scroll]")) == null ? void 0 : _b.querySelector("[data-reorder-indicator]");
+      if (indicatorEl) {
+        indicatorEl.style.display = "none";
+      }
+      setDragState(null);
+      target.removeEventListener("pointermove", onPointerMove);
+      target.removeEventListener("pointerup", onPointerUp);
+    };
+    target.addEventListener("pointermove", onPointerMove);
+    target.addEventListener("pointerup", onPointerUp);
+  }
+  function onTableKeyDown(e) {
+    if (e.key !== "Enter" || e.altKey || e.ctrlKey || e.metaKey) return;
+    const focused = document.activeElement;
+    if (!(focused instanceof HTMLElement)) return;
+    const td = focused.closest("td");
+    if (!td) return;
+    const tr = td.closest("tr");
+    if (!tr) return;
+    const tbody = tr.closest("tbody");
+    if (!tbody) return;
+    const rows = tbody.rows;
+    const rowIndex = Array.from(rows).indexOf(tr);
+    if (rowIndex < 0) return;
+    const cellIndex = Array.from(tr.cells).indexOf(td);
+    if (cellIndex < 0) return;
+    const targetRowIndex = e.shiftKey ? rowIndex - 1 : rowIndex + 1;
+    if (targetRowIndex < 0 || targetRowIndex >= rows.length) return;
+    const targetFocusable = rows[targetRowIndex].cells[cellIndex].findFirstFocusableChild();
+    if (!targetFocusable) return;
+    e.preventDefault();
+    targetFocusable.focus();
+  }
+  const displayItems = flatItems;
+  const isExpandColLastFixed = () => hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
+  const isSelectColLastFixed = () => hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
+  const isReorderColLastFixed = () => hasReorderFeature() && lastFixedIndex() < 0;
+  const featureHeaderRowspan = createMemo(() => {
+    const headerRows = headerTable().length;
+    const summaryRow = hasSummary() ? 1 : 0;
+    return headerRows + summaryRow;
+  });
+  const isAllExpanded = createMemo(() => {
+    if (!local.getChildren) return false;
+    const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
+    return allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item));
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-sheet": local.persistKey ?? "",
+      class: twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class)
+    },
+    /* @__PURE__ */ React.createElement(Show, { when: !local.hideConfigBar && (modal != null || effectivePageCount() > 1) }, /* @__PURE__ */ React.createElement("div", { class: toolbarClass }, /* @__PURE__ */ React.createElement(Show, { when: effectivePageCount() > 1 }, /* @__PURE__ */ React.createElement(
+      Pagination,
+      {
+        pageIndex: currentPage(),
+        onPageIndexChange: setCurrentPage,
+        totalPageCount: effectivePageCount(),
+        displayPageCount: local.displayPageCount,
+        size: "sm"
+      }
+    )), /* @__PURE__ */ React.createElement("div", { class: "flex-1" }), /* @__PURE__ */ React.createElement(Show, { when: modal != null }, /* @__PURE__ */ React.createElement("button", { class: configButtonClass, onClick: openConfigModal, title: "\uC2DC\uD2B8 \uC124\uC815", type: "button" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSettings, size: "1em" }))))),
+    /* @__PURE__ */ React.createElement("div", { "data-sheet-scroll": true, class: twMerge(dataSheetContainerClass, "flex-1 min-h-0"), style: local.contentStyle }, /* @__PURE__ */ React.createElement(
+      "table",
+      {
+        class: twMerge(tableClass, local.inset ? insetTableClass : void 0),
+        onKeyDown: onTableKeyDown,
+        onPointerDown: (e) => {
+          if (e.shiftKey && hasSelectFeature()) {
+            e.preventDefault();
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement("colgroup", null, /* @__PURE__ */ React.createElement(Show, { when: hasExpandFeature() }, /* @__PURE__ */ React.createElement("col", null)), /* @__PURE__ */ React.createElement(Show, { when: hasSelectFeature() }, /* @__PURE__ */ React.createElement("col", null)), /* @__PURE__ */ React.createElement(Show, { when: hasReorderFeature() }, /* @__PURE__ */ React.createElement("col", null)), /* @__PURE__ */ React.createElement(For, { each: effectiveColumns() }, (col) => /* @__PURE__ */ React.createElement("col", { style: col.width != null ? { width: col.width } : void 0 }))),
+      /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement(For, { each: headerTable() }, (row, rowIndex) => /* @__PURE__ */ React.createElement("tr", { ref: (el) => registerHeaderRow(rowIndex(), el) }, /* @__PURE__ */ React.createElement(Show, { when: hasExpandFeature() && rowIndex() === 0 }, /* @__PURE__ */ React.createElement(
+        "th",
+        {
+          class: twMerge(
+            featureThClass,
+            fixedClass,
+            "z-[5]",
+            isExpandColLastFixed() ? fixedLastClass : void 0
+          ),
+          rowspan: featureHeaderRowspan(),
+          style: { top: "0", left: "0" },
+          ref: registerExpandColRef
+        },
+        /* @__PURE__ */ React.createElement("div", { class: featureCellWrapperClass }, /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            class: expandToggleClass,
+            onClick: toggleExpandAll,
+            title: isAllExpanded() ? "\uC804\uCCB4 \uC811\uAE30" : "\uC804\uCCB4 \uD3BC\uCE58\uAE30"
+          },
+          /* @__PURE__ */ React.createElement(
+            Icon,
+            {
+              icon: IconChevronDown,
+              size: "1em",
+              class: clsx("transition-transform", isAllExpanded() ? "rotate-0" : "-rotate-90")
+            }
+          )
+        ))
+      )), /* @__PURE__ */ React.createElement(Show, { when: hasSelectFeature() && rowIndex() === 0 }, /* @__PURE__ */ React.createElement(
+        "th",
+        {
+          class: twMerge(
+            featureThClass,
+            fixedClass,
+            "z-[5]",
+            isSelectColLastFixed() ? fixedLastClass : void 0
+          ),
+          rowspan: featureHeaderRowspan(),
+          style: {
+            top: "0",
+            left: selectColLeft()
+          },
+          ref: registerSelectColRef
+        },
+        /* @__PURE__ */ React.createElement(Show, { when: local.selectMode === "multiple" }, /* @__PURE__ */ React.createElement("div", { class: featureCellClickableClass, onClick: () => toggleSelectAll() }, /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            value: (() => {
+              const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
+              return selectableItems.length > 0 && selectableItems.every((item) => selectedItems().includes(item));
+            })(),
+            inset: true,
+            class: "pointer-events-none"
+          }
+        )))
+      )), /* @__PURE__ */ React.createElement(Show, { when: hasReorderFeature() && rowIndex() === 0 }, /* @__PURE__ */ React.createElement(
+        "th",
+        {
+          class: twMerge(
+            featureThClass,
+            fixedClass,
+            "z-[5]",
+            isReorderColLastFixed() ? fixedLastClass : void 0
+          ),
+          rowspan: featureHeaderRowspan(),
+          style: {
+            top: "0",
+            left: reorderColLeft()
+          },
+          ref: registerReorderColRef
+        }
+      )), /* @__PURE__ */ React.createElement(For, { each: row }, (cell, cellColIndex) => /* @__PURE__ */ React.createElement(Show, { when: cell }, (c) => {
+        var _a, _b;
+        const isSortable = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].sortable;
+        const colKey = () => c().colIndex != null ? effectiveColumns()[c().colIndex].key : void 0;
+        const isGroupFixed = () => {
+          if (c().isLastRow) return false;
+          const start = cellColIndex();
+          const span = c().colspan;
+          const cols = effectiveColumns();
+          for (let i = start; i < start + span && i < cols.length; i++) {
+            if (!cols[i].fixed) return false;
+          }
+          return true;
+        };
+        const isCellFixed = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed || isGroupFixed();
+        const isCellLastFixed = () => {
+          if (c().isLastRow && c().colIndex != null) return isLastFixed(c().colIndex);
+          if (isGroupFixed()) {
+            const lastCol = cellColIndex() + c().colspan - 1;
+            return isLastFixed(lastCol);
+          }
+          return false;
+        };
+        const cellStyle = () => {
+          const parts = [];
+          const top = headerRowTops()[rowIndex()];
+          parts.push(`top: ${top}px`);
+          if (c().isLastRow && c().colIndex != null) {
+            const left = getFixedStyle(c().colIndex);
+            if (left != null) parts.push(left);
+            const col = effectiveColumns()[c().colIndex];
+            if (col.width != null) parts.push(`max-width: ${col.width}`);
+          } else if (isGroupFixed()) {
+            const left = getFixedStyle(cellColIndex());
+            if (left != null) parts.push(left);
+          }
+          return parts.length > 0 ? parts.join("; ") : void 0;
+        };
+        return /* @__PURE__ */ React.createElement(
+          "th",
+          {
+            class: twMerge(
+              thClass,
+              fixedClass,
+              isSortable() ? sortableThClass : void 0,
+              isCellFixed() ? "z-[5]" : "z-[3]",
+              isCellLastFixed() ? fixedLastClass : void 0
+            ),
+            colspan: c().colspan > 1 ? c().colspan : void 0,
+            rowspan: c().rowspan > 1 ? c().rowspan : void 0,
+            style: cellStyle(),
+            title: c().isLastRow && c().colIndex != null ? effectiveColumns()[c().colIndex].tooltip ?? c().text : c().text,
+            ref: (el) => {
+              if (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed) {
+                registerColumnRef(c().colIndex, el);
+              }
+            },
+            onClick: (e) => {
+              if (!isSortable()) return;
+              const key = colKey();
+              if (key == null) return;
+              toggleSort(key, e.shiftKey || e.ctrlKey);
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { class: clsx("flex items-center", thContentClass) }, /* @__PURE__ */ React.createElement("div", { class: "flex-1" }, ((_b = (_a = c()).headerContent) == null ? void 0 : _b.call(_a)) ?? c().text), /* @__PURE__ */ React.createElement(Show, { when: isSortable() && colKey() }, (key) => {
+            var _a2, _b2;
+            const sortDef = () => getSortDef(key());
+            const sortIndex = () => getSortIndex(key());
+            return /* @__PURE__ */ React.createElement("div", { class: sortIconClass }, /* @__PURE__ */ React.createElement(Show, { when: ((_a2 = sortDef()) == null ? void 0 : _a2.desc) === false }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSortAscending, size: "1em" })), /* @__PURE__ */ React.createElement(Show, { when: ((_b2 = sortDef()) == null ? void 0 : _b2.desc) === true }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSortDescending, size: "1em" })), /* @__PURE__ */ React.createElement(Show, { when: sortDef() == null }, /* @__PURE__ */ React.createElement(Icon, { icon: IconArrowsSort, size: "1em", class: "opacity-30" })), /* @__PURE__ */ React.createElement(Show, { when: sortIndex() }, (idx) => /* @__PURE__ */ React.createElement("sub", null, idx())));
+          })),
+          /* @__PURE__ */ React.createElement(
+            Show,
+            {
+              when: c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].resizable
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                class: resizerClass,
+                onClick: (e) => e.stopPropagation(),
+                onPointerDown: (e) => onResizerPointerdown(e, effectiveColumns()[c().colIndex].key),
+                onDblClick: (e) => {
+                  e.stopPropagation();
+                  onResizerDoubleClick(effectiveColumns()[c().colIndex].key);
+                }
+              }
+            )
+          )
+        );
+      })))), /* @__PURE__ */ React.createElement(Show, { when: hasSummary() }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(For, { each: effectiveColumns() }, (col, colIndex) => {
+        var _a;
+        const summaryStyle = () => {
+          const parts = [];
+          parts.push(`top: ${summaryRowTop()}px`);
+          const left = getFixedStyle(colIndex());
+          if (left != null) parts.push(left);
+          return parts.join("; ");
+        };
+        return /* @__PURE__ */ React.createElement(
+          "th",
+          {
+            class: twMerge(
+              thClass,
+              summaryThClass,
+              fixedClass,
+              col.fixed ? "z-[5]" : "z-[3]",
+              isLastFixed(colIndex()) ? fixedLastClass : void 0
+            ),
+            style: summaryStyle()
+          },
+          /* @__PURE__ */ React.createElement("div", { class: thContentClass }, (_a = col.summary) == null ? void 0 : _a.call(col))
+        );
+      })))),
+      /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(For, { each: displayItems() }, (flat) => /* @__PURE__ */ React.createElement(
+        "tr",
+        {
+          "data-selected": selectedItems().includes(flat.item) ? "" : void 0,
+          onClick: () => {
+            if (local.autoSelect === "click") {
+              selectItem(flat.item);
+            }
+          },
+          class: local.autoSelect === "click" ? "cursor-pointer" : void 0
+        },
+        /* @__PURE__ */ React.createElement(Show, { when: hasExpandFeature() }, /* @__PURE__ */ React.createElement(
+          "td",
+          {
+            class: twMerge(
+              featureTdClass,
+              fixedClass,
+              "z-[2]",
+              isExpandColLastFixed() ? fixedLastClass : void 0
+            ),
+            style: { left: "0" }
+          },
+          /* @__PURE__ */ React.createElement("div", { class: featureCellBodyWrapperClass }, /* @__PURE__ */ React.createElement(For, { each: Array.from({ length: flat.depth }) }, () => /* @__PURE__ */ React.createElement("div", { class: expandIndentGuideClass }, /* @__PURE__ */ React.createElement("div", { class: expandIndentGuideLineClass }))), /* @__PURE__ */ React.createElement(Show, { when: flat.hasChildren }, /* @__PURE__ */ React.createElement("button", { type: "button", class: expandToggleClass, onClick: () => toggleExpand(flat.item) }, /* @__PURE__ */ React.createElement(
+            Icon,
+            {
+              icon: IconChevronDown,
+              size: "1em",
+              class: clsx(
+                "transition-transform",
+                expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90"
+              )
+            }
+          ))))
+        )),
+        /* @__PURE__ */ React.createElement(Show, { when: hasSelectFeature() }, (() => {
+          const selectable = () => getItemSelectable(flat.item);
+          const isSelected = () => selectedItems().includes(flat.item);
+          const rowIndex = () => displayItems().indexOf(flat);
+          return /* @__PURE__ */ React.createElement(
+            "td",
+            {
+              class: twMerge(
+                featureTdClass,
+                fixedClass,
+                "z-[2]",
+                isSelectColLastFixed() ? fixedLastClass : void 0
+              ),
+              style: {
+                left: selectColLeft()
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              Show,
+              {
+                when: local.selectMode === "multiple",
+                fallback: (
+                  /* single 모드 */
+                  /* @__PURE__ */ React.createElement(Show, { when: selectable() === true }, /* @__PURE__ */ React.createElement("div", { class: featureCellBodyClickableClass, onClick: () => toggleSelect(flat.item) }, /* @__PURE__ */ React.createElement(
+                    "div",
+                    {
+                      class: twMerge(
+                        selectSingleClass,
+                        isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass
+                      )
+                    },
+                    /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronRight, size: "1em" })
+                  )))
+                )
+              },
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  class: featureCellBodyClickableClass,
+                  onClick: (e) => {
+                    if (e.shiftKey) {
+                      rangeSelect(rowIndex());
+                    } else {
+                      toggleSelect(flat.item);
+                    }
+                    setLastClickedRow(rowIndex());
+                  },
+                  title: typeof selectable() === "string" ? selectable() : void 0
+                },
+                /* @__PURE__ */ React.createElement(
+                  Checkbox,
+                  {
+                    value: isSelected(),
+                    disabled: selectable() !== true,
+                    inset: true,
+                    class: twMerge(
+                      "pointer-events-none",
+                      lastClickedRow() === rowIndex() ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700" : void 0
+                    )
+                  }
+                )
+              )
+            )
+          );
+        })()),
+        /* @__PURE__ */ React.createElement(Show, { when: hasReorderFeature() }, /* @__PURE__ */ React.createElement(
+          "td",
+          {
+            class: twMerge(
+              featureTdClass,
+              fixedClass,
+              "z-[2]",
+              isReorderColLastFixed() ? fixedLastClass : void 0
+            ),
+            style: {
+              left: reorderColLeft()
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { class: reorderCellWrapperClass, onPointerDown: (e) => onReorderPointerDown(e, flat.item) }, /* @__PURE__ */ React.createElement("div", { class: reorderHandleClass }, /* @__PURE__ */ React.createElement(Icon, { icon: IconGripVertical, size: "1em" })))
+        )),
+        /* @__PURE__ */ React.createElement(For, { each: effectiveColumns() }, (col, colIndex) => {
+          var _a, _b;
+          return /* @__PURE__ */ React.createElement(
+            "td",
+            {
+              class: twMerge(
+                tdClass,
+                col.fixed ? clsx(fixedClass, "z-[2]") : void 0,
+                isLastFixed(colIndex()) ? fixedLastClass : void 0,
+                col.class,
+                (_a = local.cellClass) == null ? void 0 : _a.call(local, flat.item, col.key)
+              ),
+              style: [
+                getFixedStyle(colIndex()),
+                col.width != null ? `max-width: ${col.width}` : void 0,
+                (_b = local.cellStyle) == null ? void 0 : _b.call(local, flat.item, col.key)
+              ].filter(Boolean).join("; ") || void 0
+            },
+            col.cell({
+              item: flat.item,
+              index: flat.index,
+              depth: flat.depth
+            })
+          );
+        })
+      )))
+    ), /* @__PURE__ */ React.createElement("div", { class: resizeIndicatorClass, style: resizeIndicatorStyle() }), /* @__PURE__ */ React.createElement("div", { "data-reorder-indicator": true, class: reorderIndicatorClass, style: { display: "none" } }))
+  );
+};
+DataSheet.Column = DataSheetColumn;
+export {
+  DataSheet
+};
+//# sourceMappingURL=DataSheet.js.map