mctable-react 1.0.8 → 1.0.9

package/README.md

@@ -54,6 +54,12 @@ You can also pass `settings`, `license`, or `onReady` if you need deeper access
 
 ## Changelog
 
+```
+v1.0.9
+- CommonJS module format support added
+```
+
+
 ```
 v1.0.8
 - Type exports added from  `mctable`

package/dist/index.cjs

@@ -0,0 +1,345 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  McTable: () => McTableReact,
+  McTableReact: () => McTableReact
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/McTable.tsx
+var React = __toESM(require("react"), 1);
+var import_mctable = require("mctable");
+var import_jsx_runtime = require("react/jsx-runtime");
+var __sigIds = /* @__PURE__ */ new WeakMap();
+var __nextSigId = 1;
+function __getSigId(obj) {
+  const existing = __sigIds.get(obj);
+  if (existing !== void 0) return existing;
+  const next = __nextSigId++;
+  __sigIds.set(obj, next);
+  return next;
+}
+function __isPlainObject(value) {
+  if (!value || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function __signatureValue(value) {
+  if (value === null) return null;
+  const valueType = typeof value;
+  if (valueType === "string" || valueType === "number" || valueType === "boolean") return value;
+  if (valueType === "undefined") return ["u"];
+  if (valueType === "bigint") return ["bi", String(value)];
+  if (valueType === "symbol") return ["sy", String(value)];
+  if (valueType === "function") return ["fn", __getSigId(value)];
+  if (Array.isArray(value)) return value.map(__signatureValue);
+  if (value instanceof Date) return ["d", value.toISOString()];
+  if (!__isPlainObject(value)) {
+    return ["o", __getSigId(value), Object.prototype.toString.call(value)];
+  }
+  const obj = value;
+  const keys = Object.keys(obj).sort();
+  const out = {};
+  for (const key of keys) out[key] = __signatureValue(obj[key]);
+  return out;
+}
+function __stableSignature(value) {
+  try {
+    return JSON.stringify(__signatureValue(value));
+  } catch {
+    return "[unserializable]";
+  }
+}
+function __areRecordsEqual(prevRecords, nextRecords) {
+  if (prevRecords === nextRecords) return true;
+  if (prevRecords.length !== nextRecords.length) return false;
+  for (let index = 0; index < prevRecords.length; index++) {
+    if (__stableSignature(prevRecords[index]) !== __stableSignature(nextRecords[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function __areColumnsEqual(prevColumns, nextColumns) {
+  if (prevColumns === nextColumns) return true;
+  if (prevColumns.length !== nextColumns.length) return false;
+  for (let index = 0; index < prevColumns.length; index++) {
+    if (__stableSignature(prevColumns[index]) !== __stableSignature(nextColumns[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function __getValidationOnlyChanges({
+  prevRecords,
+  prevColumns,
+  nextRecords,
+  nextColumns
+}) {
+  if (__stableSignature(prevRecords) !== __stableSignature(nextRecords)) return null;
+  if (prevColumns.length !== nextColumns.length) return null;
+  const validationChanges = [];
+  for (let index = 0; index < prevColumns.length; index++) {
+    const prevColumn = prevColumns[index];
+    const nextColumn = nextColumns[index];
+    const { validation: prevValidation, ...prevColumnWithoutValidation } = prevColumn;
+    const { validation: nextValidation, ...nextColumnWithoutValidation } = nextColumn;
+    if (__stableSignature(prevColumnWithoutValidation) !== __stableSignature(nextColumnWithoutValidation)) {
+      return null;
+    }
+    const prevRequired = prevValidation?.required;
+    const nextRequired = nextValidation?.required;
+    const prevTypeMatch = prevValidation?.typeMatch;
+    const nextTypeMatch = nextValidation?.typeMatch;
+    if (prevRequired === nextRequired && prevTypeMatch === nextTypeMatch) {
+      continue;
+    }
+    const settings = {
+      name: nextColumn.name
+    };
+    if (prevRequired !== nextRequired) {
+      settings.required = nextRequired ?? null;
+    }
+    if (prevTypeMatch !== nextTypeMatch) {
+      settings.typeMatch = nextTypeMatch ?? null;
+    }
+    validationChanges.push({
+      position: index + 1,
+      settings
+    });
+  }
+  if (validationChanges.length === 0) return null;
+  return validationChanges;
+}
+function __getWidthOnlyChanges({
+  prevRecords,
+  prevColumns,
+  nextRecords,
+  nextColumns
+}) {
+  if (__stableSignature(prevRecords) !== __stableSignature(nextRecords)) return null;
+  if (prevColumns.length !== nextColumns.length) return null;
+  const widthChanges = [];
+  for (let index = 0; index < prevColumns.length; index++) {
+    const prevColumn = prevColumns[index];
+    const nextColumn = nextColumns[index];
+    const { width: _prevWidth, ...prevColumnWithoutWidth } = prevColumn;
+    const { width: _nextWidth, ...nextColumnWithoutWidth } = nextColumn;
+    if (__stableSignature(prevColumnWithoutWidth) !== __stableSignature(nextColumnWithoutWidth)) {
+      return null;
+    }
+    if (prevColumn.width !== nextColumn.width) {
+      widthChanges.push({
+        position: index + 1,
+        width: nextColumn.width ?? "reset"
+      });
+    }
+  }
+  if (widthChanges.length === 0) return null;
+  return widthChanges;
+}
+var __nextInstanceId = 1;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var McTableReact = React.forwardRef(
+  ({
+    records,
+    columns,
+    settings,
+    license,
+    onReady,
+    onColumnResizeStart,
+    onColumnResizing,
+    onColumnResizeEnd,
+    onRowResizeStart,
+    onRowResizing,
+    onRowResizeEnd,
+    className,
+    style
+  }, ref) => {
+    const containerRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const instanceIdRef = React.useRef(null);
+    const lastDataRef = React.useRef({
+      records: records ?? [],
+      columns: columns ?? []
+    });
+    const [readyTick, setReadyTick] = React.useState(0);
+    const effectiveSettings = React.useMemo(() => {
+      const hasAnyResizeCallback = onColumnResizeStart !== void 0 || onColumnResizing !== void 0 || onColumnResizeEnd !== void 0 || onRowResizeStart !== void 0 || onRowResizing !== void 0 || onRowResizeEnd !== void 0;
+      if (!settings && !hasAnyResizeCallback) return void 0;
+      if (!hasAnyResizeCallback) return settings;
+      const nextEvents = {
+        ...settings?.events ?? {}
+      };
+      if (onColumnResizeStart !== void 0) nextEvents.onColumnResizeStart = onColumnResizeStart;
+      if (onColumnResizing !== void 0) nextEvents.onColumnResizing = onColumnResizing;
+      if (onColumnResizeEnd !== void 0) nextEvents.onColumnResizeEnd = onColumnResizeEnd;
+      if (onRowResizeStart !== void 0) nextEvents.onRowResizeStart = onRowResizeStart;
+      if (onRowResizing !== void 0) nextEvents.onRowResizing = onRowResizing;
+      if (onRowResizeEnd !== void 0) nextEvents.onRowResizeEnd = onRowResizeEnd;
+      return {
+        ...settings ?? {},
+        events: nextEvents
+      };
+    }, [
+      settings,
+      onColumnResizeStart,
+      onColumnResizing,
+      onColumnResizeEnd,
+      onRowResizeStart,
+      onRowResizing,
+      onRowResizeEnd
+    ]);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        table: tableRef.current,
+        api: tableRef.current?.api ?? null
+      }),
+      [readyTick]
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (typeof window === "undefined") return;
+      if (tableRef.current) {
+        return;
+      }
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const instanceId = __nextInstanceId++;
+      instanceIdRef.current = instanceId;
+      const initialRecords = records ?? lastDataRef.current.records;
+      const initialColumns = columns ?? lastDataRef.current.columns;
+      const instance = new import_mctable.McTable({
+        container,
+        records: initialRecords,
+        columns: initialColumns,
+        settings: effectiveSettings,
+        license
+      });
+      tableRef.current = instance;
+      setReadyTick((x) => x + 1);
+      onReady?.(instance);
+      return () => {
+        const current = tableRef.current;
+        const currentInstanceId = instanceIdRef.current;
+        tableRef.current = null;
+        instanceIdRef.current = null;
+        setReadyTick((x) => x + 1);
+        try {
+          const anyTable = current;
+          if (typeof anyTable?.destroy === "function") anyTable.destroy();
+          else if (typeof anyTable?.dispose === "function") anyTable.dispose();
+        } catch {
+        }
+        if (containerRef.current) {
+          containerRef.current.innerHTML = "";
+        }
+      };
+    }, []);
+    React.useEffect(() => {
+      const table = tableRef.current;
+      if (!table) {
+        return;
+      }
+      const prevRecords = lastDataRef.current.records;
+      const prevColumns = lastDataRef.current.columns;
+      const nextRecords = records !== void 0 ? records : prevRecords;
+      const nextColumns = columns !== void 0 ? columns : prevColumns;
+      const recordsChanged = records !== void 0 && (nextRecords.length !== prevRecords.length || !__areRecordsEqual(prevRecords, nextRecords));
+      const columnsChanged = columns !== void 0 && (nextColumns.length !== prevColumns.length || !__areColumnsEqual(prevColumns, nextColumns));
+      const didChange = recordsChanged || columnsChanged;
+      if (!didChange) {
+        return;
+      }
+      if (records !== void 0) {
+        lastDataRef.current.records = nextRecords;
+      }
+      if (columns !== void 0) {
+        lastDataRef.current.columns = nextColumns;
+      }
+      const widthOnlyChanges = __getWidthOnlyChanges({
+        prevRecords,
+        prevColumns,
+        nextRecords,
+        nextColumns
+      });
+      const validationOnlyChanges = __getValidationOnlyChanges({
+        prevRecords,
+        prevColumns,
+        nextRecords,
+        nextColumns
+      });
+      if (widthOnlyChanges) {
+        for (const change of widthOnlyChanges) {
+          table.api.setContentColumnWidth(change);
+        }
+      } else if (validationOnlyChanges) {
+        for (const change of validationOnlyChanges) {
+          table.api.updateContentColumnSettings(change.settings);
+        }
+      } else {
+        table.api.setData({
+          data: {
+            records: lastDataRef.current.records,
+            columns: lastDataRef.current.columns
+          }
+        });
+      }
+    }, [records, columns]);
+    React.useEffect(() => {
+      const table = tableRef.current;
+      if (!table) return;
+      if (!effectiveSettings) return;
+      table.api.updateSettings(effectiveSettings);
+    }, [effectiveSettings]);
+    const combinedClassName = ["mctable-react", className].filter(Boolean).join(" ");
+    const combinedStyle = {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      flex: "1 1 auto",
+      minWidth: 0,
+      minHeight: 0,
+      alignItems: "stretch",
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className: combinedClassName, style: combinedStyle });
+  }
+);
+McTableReact.displayName = "McTable";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  McTable,
+  McTableReact
+});

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MctColumn, MctInitSettings, MctLicense, McTable, MctRow, MctApi } from 'mctable';
+export { McTableCtor, MctApi, MctColumn, MctColumnData, MctInitSettings, MctLicense, MctRow, MctScrollPosition, MctSettingDeleteMethod, MctSettingResizeHandleDimension, MctSettingScrollOverflow, MctSettingScrollOverflowOption, MctSettingScrollStop, MctSettingScrollStopOption, MctSettingScrollTransition } from 'mctable';
+
+type McTableReactHandle = {
+    table: McTable | null;
+    api: MctApi | null;
+};
+type McTableReactProps = {
+    records?: any[];
+    columns?: MctColumn[];
+    settings?: MctInitSettings;
+    license?: MctLicense;
+    onReady?: (table: McTable) => void;
+    onColumnResizeStart?: (currentColumnWidth: number, column: MctColumn) => void;
+    onColumnResizing?: (currentColumnWidth: number, column: MctColumn) => void;
+    onColumnResizeEnd?: (newColumnWidth: number, column: MctColumn) => void;
+    onRowResizeStart?: (currentRowHeight: number, row: MctRow) => void;
+    onRowResizing?: (currentRowHeight: number, row: MctRow) => void;
+    onRowResizeEnd?: (newRowHeight: number, row: MctRow) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const McTableReact: React.ForwardRefExoticComponent<McTableReactProps & React.RefAttributes<McTableReactHandle>>;
+
+export { McTableReact as McTable, McTableReact, type McTableReactHandle, type McTableReactProps };

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "mctable-react",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -16,7 +19,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsup src/index.ts --format esm --dts --clean --out-dir dist --external react --external react-dom --external react/jsx-runtime --external react/jsx-dev-runtime",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --out-dir dist --external react --external react-dom --external react/jsx-runtime --external react/jsx-dev-runtime",
     "start": "vite --open",
     "release:npm": "npm pack --pack-destination .",
     "prepack": "npm run build"