@topgrid/grid-pro-master 0.1.0

package/dist/index.mjs

@@ -0,0 +1,559 @@
+import { checkLicense, useLicenseStatus, Watermark } from '@topgrid/grid-license';
+import { forwardRef, useState, useEffect, useImperativeHandle, Fragment, useCallback, useRef } from 'react';
+import { useReactTable, getExpandedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { getStorage, readJson, writeJson } from '@topgrid/grid-core/internal/storage';
+export { ColumnPinGrid, TreeGrid } from '@topgrid/grid-core';
+
+// src/index.ts
+var INDENT_PX = 16;
+function ExpandToggleCell({ isExpanded, depth, onToggle }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { paddingLeft: `${depth * INDENT_PX}px` }, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onToggle(e);
+      },
+      className: "text-gray-500 hover:text-gray-700 focus:outline-none",
+      "aria-label": isExpanded ? "\uC811\uAE30" : "\uD3BC\uCE58\uAE30",
+      "aria-expanded": isExpanded,
+      children: isExpanded ? "\u25BC" : "\u25B6"
+    }
+  ) });
+}
+function DetailRow({ row, colSpan, renderDetailRow }) {
+  return /* @__PURE__ */ jsx("tr", { "data-detail-row": true, className: "bg-gray-50", children: /* @__PURE__ */ jsx("td", { colSpan, className: "px-4 py-2", children: renderDetailRow(row) }) });
+}
+function shouldToggleExpand(key) {
+  return key === "Enter" || key === " ";
+}
+function useRowKeyboardNav(row, enabled) {
+  const canExpand = row.getCanExpand();
+  const onKeyDown = useCallback(
+    (event) => {
+      if (shouldToggleExpand(event.key)) {
+        event.preventDefault();
+        row.toggleExpanded();
+      }
+    },
+    // Re-create only when row reference changes (row.toggleExpanded is bound to the row instance).
+    [row]
+  );
+  if (enabled === false || !canExpand) {
+    return {};
+  }
+  return { tabIndex: 0, onKeyDown };
+}
+var EXPAND_COLUMN_ID = "__expand__";
+function buildExpandColumn(renderDetailRowProvided) {
+  if (!renderDetailRowProvided) return null;
+  return {
+    id: EXPAND_COLUMN_ID,
+    header: () => null,
+    cell: ({ row }) => /* @__PURE__ */ jsx(
+      ExpandToggleCell,
+      {
+        isExpanded: row.getIsExpanded(),
+        depth: row.depth,
+        onToggle: () => row.toggleExpanded()
+      }
+    ),
+    size: 40,
+    enableSorting: false,
+    enableColumnFilter: false
+  };
+}
+function keysToExpandedState(keys) {
+  return keys.reduce((acc, key) => {
+    acc[key] = true;
+    return acc;
+  }, {});
+}
+function expandedStateToKeys(state) {
+  if (state === true) return [];
+  return Object.keys(state).filter((k) => state[k] === true);
+}
+function MasterRow({
+  row,
+  renderDetailRow,
+  colCount,
+  onRowClick,
+  onRowDoubleClick,
+  onCellClick
+}) {
+  const keyboardProps = useRowKeyboardNav(row, renderDetailRow !== void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ...keyboardProps,
+        className: "border-b border-gray-100 hover:bg-gray-50 focus:outline-none focus-visible:outline-2 focus-visible:outline-blue-500",
+        onClick: onRowClick !== void 0 ? (e) => onRowClick(row.original, e) : void 0,
+        onDoubleClick: onRowDoubleClick !== void 0 ? (e) => onRowDoubleClick(row.original, e) : void 0,
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "px-4 py-2",
+            onClick: onCellClick !== void 0 ? (e) => onCellClick(cell, row.original, e) : void 0,
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        ))
+      }
+    ),
+    row.getIsExpanded() && renderDetailRow !== void 0 && /* @__PURE__ */ jsx(
+      DetailRow,
+      {
+        row,
+        colSpan: colCount,
+        renderDetailRow
+      }
+    )
+  ] });
+}
+function MasterDetailGridInner(props, ref) {
+  const _lic = useLicenseStatus();
+  const { renderDetailRow, masterDetail } = props;
+  const isControlled = masterDetail?.expandedRowKeys !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState(
+    () => isControlled ? keysToExpandedState(masterDetail.expandedRowKeys) : {}
+  );
+  useEffect(() => {
+    if (isControlled && masterDetail?.expandedRowKeys !== void 0) {
+      setInternalExpanded(keysToExpandedState(masterDetail.expandedRowKeys));
+    }
+  }, [masterDetail?.expandedRowKeys]);
+  const expanded = internalExpanded;
+  function handleExpandedChange(updaterOrValue) {
+    setInternalExpanded((prev) => {
+      const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+      if (masterDetail?.onExpandChange !== void 0) {
+        masterDetail.onExpandChange(expandedStateToKeys(next));
+      }
+      return next;
+    });
+  }
+  const expandCol = buildExpandColumn(renderDetailRow !== void 0);
+  const effectiveColumns = expandCol ? [expandCol, ...props.columns] : [...props.columns];
+  const table = useReactTable({
+    data: props.data,
+    columns: effectiveColumns,
+    state: {
+      expanded
+    },
+    onExpandedChange: handleExpandedChange,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    // C-29 spread-skip for exactOptionalPropertyTypes: true
+    ...props.getSubRows !== void 0 ? { getSubRows: props.getSubRows } : {},
+    ...props.debug !== void 0 ? { debugTable: props.debug } : {}
+  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      addRow: (seed) => {
+        if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+          if (props.onAddRow === void 0) {
+            console.warn("[tomis/grid-pro-master] addRow called but onAddRow prop is not provided.");
+          }
+        }
+        props.onAddRow?.(seed);
+      },
+      deleteRow: (rowId) => {
+        if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+          if (props.onDeleteRow === void 0) {
+            console.warn("[tomis/grid-pro-master] deleteRow called but onDeleteRow prop is not provided.");
+          }
+        }
+        props.onDeleteRow?.(rowId);
+      },
+      updateRow: (rowId, patch) => {
+        if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+          if (props.onUpdateRow === void 0) {
+            console.warn("[tomis/grid-pro-master] updateRow called but onUpdateRow prop is not provided.");
+          }
+        }
+        props.onUpdateRow?.(rowId, patch);
+      },
+      scrollTo: (_index) => {
+      },
+      getSelection: () => {
+        return table.getSelectedRowModel().rows.map((r) => r.original);
+      },
+      clearSelection: () => {
+        table.setRowSelection({});
+      },
+      refresh: () => {
+        table.resetRowSelection();
+      },
+      expandAll: () => {
+        table.toggleAllRowsExpanded(true);
+      },
+      collapseAll: () => {
+        table.toggleAllRowsExpanded(false);
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table]
+  );
+  const headerGroups = table.getHeaderGroups();
+  const rows = table.getRowModel().rows;
+  const colCount = effectiveColumns.length;
+  return /* @__PURE__ */ jsxs("div", { className: `${props.className ?? ""} relative`.trim(), children: [
+    /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-100", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: "px-4 py-2 text-left font-semibold text-gray-700",
+          style: header.column.id === EXPAND_COLUMN_ID ? { width: 40 } : void 0,
+          children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "px-4 py-8 text-center text-gray-400", children: props.emptyText ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) }) : rows.map((row) => /* @__PURE__ */ jsx(
+        MasterRow,
+        {
+          row,
+          renderDetailRow,
+          colCount,
+          onRowClick: props.onRowClick,
+          onRowDoubleClick: props.onRowDoubleClick,
+          onCellClick: props.onCellClick
+        },
+        row.id
+      )) })
+    ] }),
+    _lic.watermarkRequired && /* @__PURE__ */ jsx(Watermark, { required: true })
+  ] });
+}
+var MasterDetailGrid = forwardRef(MasterDetailGridInner);
+function useContextMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [targetRow, setTargetRow] = useState(null);
+  const [targetCell, setTargetCell] = useState(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const openAt = useCallback(
+    (x, y, row, cell) => {
+      setPosition({ x, y });
+      setTargetRow(row);
+      setTargetCell(cell);
+      setFocusedIndex(-1);
+      setIsOpen(true);
+    },
+    []
+  );
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setTargetRow(null);
+    setTargetCell(null);
+    setFocusedIndex(-1);
+  }, []);
+  return {
+    isOpen,
+    position,
+    targetRow,
+    targetCell,
+    openAt,
+    close,
+    focusedIndex,
+    setFocusedIndex
+  };
+}
+function clampPosition(x, y, menuWidth, menuHeight) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  return {
+    x: x + menuWidth > vw ? Math.max(0, vw - menuWidth) : x,
+    y: y + menuHeight > vh ? Math.max(0, vh - menuHeight) : y
+  };
+}
+function ContextMenuPortalInner(props) {
+  const { isOpen, position, items, targetRow, targetCell, onClose } = props;
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleMouseDown(e) {
+      if (menuRef.current !== null && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const estimatedHeight = items.length * 32 + 8;
+  const estimatedWidth = 200;
+  const { x, y } = clampPosition(position.x, position.y, estimatedWidth, estimatedHeight);
+  const menu = /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: menuRef,
+      role: "menu",
+      className: "fixed z-50 bg-white border border-gray-200 rounded shadow-lg py-1 text-sm min-w-[160px]",
+      style: { left: x, top: y },
+      children: items.map((item, index) => {
+        if (item.separator === true) {
+          return /* @__PURE__ */ jsx("li", { role: "separator", children: /* @__PURE__ */ jsx("hr", { className: "my-1 border-gray-200" }) }, index);
+        }
+        const isDisabled = typeof item.disabled === "function" ? item.disabled(targetRow) : item.disabled ?? false;
+        return /* @__PURE__ */ jsx("li", { role: "menuitem", "aria-disabled": isDisabled, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: [
+              "w-full flex items-center gap-2 px-3 py-1.5 text-left text-gray-700",
+              "hover:bg-gray-100 focus:bg-gray-100 focus:outline-none",
+              isDisabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "cursor-pointer"
+            ].join(" "),
+            disabled: isDisabled,
+            onClick: isDisabled ? void 0 : (e) => {
+              item.onClick(targetRow, targetCell, e.nativeEvent);
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+              item.shortcut !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-gray-400 shrink-0", children: item.shortcut })
+            ]
+          }
+        ) }, index);
+      })
+    }
+  );
+  return createPortal(menu, document.body);
+}
+function ContextMenuPortal(props) {
+  return ContextMenuPortalInner(props);
+}
+function parseShortcut(shortcut) {
+  if (shortcut.trim() === "") return null;
+  const parts = shortcut.split("+");
+  const keyPart = parts[parts.length - 1];
+  if (keyPart === void 0 || keyPart.trim() === "") {
+    if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+      console.warn(`[tomis/grid-pro-master] Invalid shortcut grammar: "${shortcut}". Key part is empty.`);
+    }
+    return null;
+  }
+  const modifiers = parts.slice(0, -1).map((m) => m.toLowerCase());
+  const validModifiers = /* @__PURE__ */ new Set(["ctrl", "alt", "shift"]);
+  for (const mod of modifiers) {
+    if (!validModifiers.has(mod)) {
+      if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+        console.warn(`[tomis/grid-pro-master] Invalid shortcut modifier: "${mod}" in "${shortcut}". Valid modifiers: Ctrl, Alt, Shift.`);
+      }
+      return null;
+    }
+  }
+  return {
+    ctrl: modifiers.includes("ctrl"),
+    alt: modifiers.includes("alt"),
+    shift: modifiers.includes("shift"),
+    key: keyPart.toLowerCase()
+  };
+}
+function matchesShortcut(e, parsed) {
+  return e.ctrlKey === parsed.ctrl && e.altKey === parsed.alt && e.shiftKey === parsed.shift && e.key.toLowerCase() === parsed.key;
+}
+function ContextMenuGridInner(props, ref) {
+  const { contextMenuItems, ...rest } = props;
+  const { isOpen, position, targetRow, targetCell, openAt, close } = useContextMenu();
+  const table = useReactTable({
+    data: rest.data,
+    columns: rest.columns,
+    getCoreRowModel: getCoreRowModel(),
+    // C-29 spread-skip for exactOptionalPropertyTypes: true
+    ...rest.getSubRows !== void 0 ? { getSubRows: rest.getSubRows } : {},
+    ...rest.debug !== void 0 ? { debugTable: rest.debug } : {}
+  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      addRow: (seed) => {
+        if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+          if (props.onAddRow === void 0) {
+            console.warn("[tomis/grid-pro-master] addRow called but onAddRow prop is not provided.");
+          }
+        }
+        props.onAddRow?.(seed);
+      },
+      deleteRow: (rowId) => {
+        if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+          if (props.onDeleteRow === void 0) {
+            console.warn("[tomis/grid-pro-master] deleteRow called but onDeleteRow prop is not provided.");
+          }
+        }
+        props.onDeleteRow?.(rowId);
+      },
+      updateRow: (rowId, patch) => {
+        if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production") {
+          if (props.onUpdateRow === void 0) {
+            console.warn("[tomis/grid-pro-master] updateRow called but onUpdateRow prop is not provided.");
+          }
+        }
+        props.onUpdateRow?.(rowId, patch);
+      },
+      scrollTo: (_index) => {
+      },
+      getSelection: () => {
+        return table.getSelectedRowModel().rows.map((r) => r.original);
+      },
+      clearSelection: () => {
+        table.setRowSelection({});
+      },
+      refresh: () => {
+        table.resetRowSelection();
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table]
+  );
+  const headerGroups = table.getHeaderGroups();
+  const rows = table.getRowModel().rows;
+  const colCount = rest.columns.length;
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      close();
+      return;
+    }
+    if (contextMenuItems === void 0 || contextMenuItems.length === 0) return;
+    if (targetRow === null || targetCell === null) return;
+    for (const item of contextMenuItems) {
+      if (item.separator === true || item.shortcut === void 0) continue;
+      const parsed = parseShortcut(item.shortcut);
+      if (parsed === null) continue;
+      if (matchesShortcut(e, parsed)) {
+        const isDisabled = typeof item.disabled === "function" ? item.disabled(targetRow) : item.disabled ?? false;
+        if (!isDisabled) {
+          item.onClick(targetRow, targetCell, new MouseEvent("click"));
+          close();
+        }
+        e.preventDefault();
+        return;
+      }
+    }
+  }
+  function handleCellContextMenu(e, row, cell) {
+    if (contextMenuItems === void 0 || contextMenuItems.length === 0) return;
+    e.preventDefault();
+    openAt(e.clientX, e.clientY, row, cell);
+  }
+  return (
+    // tabIndex={0} makes the wrapper focusable for onKeyDown (D5).
+    // focus:outline-none suppresses default browser focus ring on the container.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: ["focus:outline-none", rest.className].filter(Boolean).join(" "),
+        tabIndex: contextMenuItems !== void 0 ? 0 : void 0,
+        onKeyDown: contextMenuItems !== void 0 ? handleKeyDown : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+            /* @__PURE__ */ jsx("thead", { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-100", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: "px-4 py-2 text-left font-semibold text-gray-700",
+                children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+              },
+              header.id
+            )) }, headerGroup.id)) }),
+            /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "px-4 py-8 text-center text-gray-400", children: rest.emptyText ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) }) : rows.map((row) => /* @__PURE__ */ jsx(
+              "tr",
+              {
+                className: "border-b border-gray-100 hover:bg-gray-50",
+                onClick: rest.onRowClick !== void 0 ? (e) => rest.onRowClick(row.original, e) : void 0,
+                onDoubleClick: rest.onRowDoubleClick !== void 0 ? (e) => rest.onRowDoubleClick(row.original, e) : void 0,
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: "px-4 py-2",
+                    onClick: rest.onCellClick !== void 0 ? (e) => rest.onCellClick(cell, row.original, e) : void 0,
+                    onContextMenu: contextMenuItems !== void 0 ? (e) => handleCellContextMenu(e, row.original, cell) : void 0,
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  },
+                  cell.id
+                ))
+              },
+              row.id
+            )) })
+          ] }),
+          isOpen && targetRow !== null && targetCell !== null && contextMenuItems !== void 0 && /* @__PURE__ */ jsx(
+            ContextMenuPortal,
+            {
+              isOpen,
+              position,
+              items: contextMenuItems,
+              targetRow,
+              targetCell,
+              onClose: close
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+var ContextMenuGrid = forwardRef(ContextMenuGridInner);
+function isDev() {
+  return typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";
+}
+function useExpandedPersistence(options) {
+  const { storageKey, storageType = "localStorage", initialExpanded = {} } = options;
+  const storageRef = useRef(null);
+  const warnedUnavailable = useRef(false);
+  if (storageRef.current === null) {
+    storageRef.current = getStorage(storageType);
+    if (storageRef.current === null && !warnedUnavailable.current) {
+      warnedUnavailable.current = true;
+      if (isDev()) {
+        console.warn(
+          "[tomis/grid-pro-master] useExpandedPersistence: storage unavailable, falling back to in-memory."
+        );
+      }
+    }
+  }
+  const [expanded, setExpandedInternal] = useState(() => {
+    const stored = readJson(storageRef.current, storageKey);
+    return stored !== null ? stored : initialExpanded;
+  });
+  useEffect(() => {
+    const nextStorage = getStorage(storageType);
+    if (nextStorage === null && !warnedUnavailable.current) {
+      warnedUnavailable.current = true;
+      if (isDev()) {
+        console.warn(
+          "[tomis/grid-pro-master] useExpandedPersistence: storage unavailable, falling back to in-memory."
+        );
+      }
+    }
+    storageRef.current = nextStorage;
+  }, [storageType]);
+  const setExpanded = useCallback(
+    (updated) => {
+      setExpandedInternal((prev) => {
+        const next = typeof updated === "function" ? updated(prev) : updated;
+        writeJson(
+          storageRef.current,
+          storageKey,
+          next,
+          isDev() ? "tomis/grid-pro-master useExpandedPersistence" : void 0
+        );
+        return next;
+      });
+    },
+    // storageKey changes are intentionally NOT in deps — changing the key is an unusual
+    // operation; consumers should remount to switch keys. This avoids stale-closure risk.
+    [storageKey]
+    // eslint-disable-line react-hooks/exhaustive-deps -- storageRef intentionally omitted (stable ref)
+  );
+  return [expanded, setExpanded];
+}
+checkLicense();
+
+export { ContextMenuGrid, MasterDetailGrid, useExpandedPersistence };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map