@revolist/revogrid-react 3.0.52 → 4.11.20

package/dist/revogrid-react.js

@@ -0,0 +1,260 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineCustomElements } from "@revolist/revogrid/loader";
+export * from "@revolist/revogrid/loader";
+export * from "@revolist/revogrid";
+import { createRoot } from "react-dom/client";
+import React, { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+const dashToPascalCase = (str) => str.toLowerCase().split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("");
+const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+const attachProps = (node, newProps, oldProps = {}) => {
+  if (node instanceof Element) {
+    const className = getClassName(node.classList, newProps, oldProps);
+    if (className !== "") {
+      node.className = className;
+    }
+    Object.keys(newProps).forEach((name) => {
+      if (name === "children" || name === "style" || name === "ref" || name === "class" || name === "className" || name === "forwardedRef") {
+        return;
+      }
+      if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+        const eventName = name.substring(2);
+        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+        if (!isCoveredByReact(eventNameLc)) {
+          syncEvent(node, eventNameLc, newProps[name]);
+        }
+      } else {
+        node[name] = newProps[name];
+        const propType = typeof newProps[name];
+        if (propType === "string") {
+          node.setAttribute(camelToDashCase(name), newProps[name]);
+        }
+      }
+    });
+  }
+};
+const getClassName = (classList, newProps, oldProps) => {
+  const newClassProp = newProps.className || newProps.class;
+  const oldClassProp = oldProps.className || oldProps.class;
+  const currentClasses = arrayToMap(classList);
+  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(" ") : []);
+  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(" ") : []);
+  const finalClassNames = [];
+  currentClasses.forEach((currentClass) => {
+    if (incomingPropClasses.has(currentClass)) {
+      finalClassNames.push(currentClass);
+      incomingPropClasses.delete(currentClass);
+    } else if (!oldPropClasses.has(currentClass)) {
+      finalClassNames.push(currentClass);
+    }
+  });
+  incomingPropClasses.forEach((s) => finalClassNames.push(s));
+  return finalClassNames.join(" ");
+};
+const transformReactEventName = (eventNameSuffix) => {
+  switch (eventNameSuffix) {
+    case "doubleclick":
+      return "dblclick";
+  }
+  return eventNameSuffix;
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+const isCoveredByReact = (eventNameSuffix) => {
+  if (typeof document === "undefined") {
+    return true;
+  } else {
+    const eventName = "on" + transformReactEventName(eventNameSuffix);
+    let isSupported = eventName in document;
+    if (!isSupported) {
+      const element = document.createElement("div");
+      element.setAttribute(eventName, "return;");
+      isSupported = typeof element[eventName] === "function";
+    }
+    return isSupported;
+  }
+};
+const syncEvent = (node, eventName, newEventHandler) => {
+  const eventStore = node.__events || (node.__events = {});
+  const oldEventHandler = eventStore[eventName];
+  if (oldEventHandler) {
+    node.removeEventListener(eventName, oldEventHandler);
+  }
+  node.addEventListener(
+    eventName,
+    eventStore[eventName] = function handler(e) {
+      if (newEventHandler) {
+        newEventHandler.call(this, e);
+      }
+    }
+  );
+};
+const arrayToMap = (arr) => {
+  const map = /* @__PURE__ */ new Map();
+  arr.forEach((s) => map.set(s, s));
+  return map;
+};
+const setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref != null) {
+    ref.current = value;
+  }
+};
+const mergeRefs = (...refs) => {
+  return (value) => {
+    refs.forEach((ref) => {
+      setRef(ref, value);
+    });
+  };
+};
+const createForwardRef = (ReactComponent, displayName) => {
+  const forwardRef = (props, ref) => {
+    return /* @__PURE__ */ jsx(ReactComponent, { ...props, forwardedRef: ref });
+  };
+  forwardRef.displayName = displayName;
+  return React.forwardRef(forwardRef);
+};
+const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+  if (defineCustomElement !== void 0) {
+    defineCustomElement();
+  }
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component {
+    constructor(props) {
+      super(props);
+      __publicField(this, "componentEl");
+      __publicField(this, "setComponentElRef", (element) => {
+        this.componentEl = element;
+      });
+    }
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+    componentDidUpdate(prevProps) {
+      attachProps(this.componentEl, this.props, prevProps);
+    }
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+      let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+        const value = cProps[name];
+        if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (typeof document !== "undefined" && isCoveredByReact(eventName)) {
+            acc[name] = value;
+          }
+        } else {
+          const type = typeof value;
+          if (type === "string" || type === "boolean" || type === "number") {
+            acc[camelToDashCase(name)] = value;
+          }
+        }
+        return acc;
+      }, {});
+      const newProps = {
+        ...propsToPass,
+        ref: mergeRefs(forwardedRef, this.setComponentElRef),
+        style
+      };
+      return createElement(tagName, newProps, children);
+    }
+    static get displayName() {
+      return displayName;
+    }
+  };
+  return createForwardRef(ReactComponent, displayName);
+};
+function TemplateConstructor(el, ReactComponent, initialProps, lastEl = null) {
+  var _a;
+  if (!el) {
+    (_a = lastEl == null ? void 0 : lastEl.destroy) == null ? void 0 : _a.call(lastEl);
+    return null;
+  }
+  if (!el._root) {
+    el._root = createRoot(el);
+  }
+  const renderComponent = (props) => {
+    var _a2;
+    const vNode = createElement(ReactComponent, props);
+    (_a2 = el._root) == null ? void 0 : _a2.render(vNode);
+  };
+  renderComponent(initialProps);
+  const update = (newProps) => {
+    renderComponent(newProps);
+  };
+  const destroy = () => {
+    var _a2;
+    (_a2 = el._root) == null ? void 0 : _a2.unmount();
+    el._root = void 0;
+  };
+  return { update, destroy };
+}
+const Template = (ReactComponent, customProps) => {
+  return (h, p, addition) => {
+    const props = customProps ? { ...customProps, ...p } : p;
+    props.addition = addition;
+    let lastEl = null;
+    return h("span", {
+      key: `${p.prop}-${p.rowIndex || 0}`,
+      ref: (el) => {
+        lastEl = TemplateConstructor(el, ReactComponent, props, lastEl);
+      }
+    });
+  };
+};
+class EditorAdapter {
+  constructor(EditorComponent, column, save, close) {
+    __publicField(this, "element", null);
+    __publicField(this, "editCell");
+    __publicField(this, "renderedComponent", null);
+    this.EditorComponent = EditorComponent;
+    this.column = column;
+    this.save = save;
+    this.close = close;
+  }
+  // optional, called after editor rendered
+  componentDidRender() {
+  }
+  // optional, called after editor destroyed
+  disconnectedCallback() {
+    var _a;
+    (_a = this.renderedComponent) == null ? void 0 : _a.destroy();
+    this.renderedComponent = null;
+  }
+  render(h) {
+    var _a;
+    return h("span", {
+      key: `${this.column.prop}-${((_a = this.editCell) == null ? void 0 : _a.rowIndex) || 0}`,
+      ref: (el) => this.renderedComponent = TemplateConstructor(
+        el,
+        this.EditorComponent,
+        {
+          ...this.editCell,
+          column: this.column,
+          save: this.save,
+          close: this.close
+        },
+        this.renderedComponent
+      )
+    });
+  }
+}
+const Editor = (EditorComponent) => {
+  return function(column, save, close) {
+    return new EditorAdapter(EditorComponent, column, save, close);
+  };
+};
+const RevoGrid = /* @__PURE__ */ createReactComponent("revo-grid", void 0, void 0, defineCustomElements);
+export {
+  Editor,
+  EditorAdapter,
+  RevoGrid,
+  Template
+};

package/dist/revogrid-react.umd.cjs

@@ -0,0 +1,272 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@revolist/revogrid/loader"), require("@revolist/revogrid"), require("react-dom/client"), require("react"), require("react/jsx-runtime")) : typeof define === "function" && define.amd ? define(["exports", "@revolist/revogrid/loader", "@revolist/revogrid", "react-dom/client", "react", "react/jsx-runtime"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ReactDatagrid = {}, global.RevogridLoader, global.Revogrid, global.ReactDOM, global.React, global.ReactJSXR));
+})(this, function(exports2, loader, revogrid, client, React, jsxRuntime) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+  const dashToPascalCase = (str) => str.toLowerCase().split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("");
+  const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+  const attachProps = (node, newProps, oldProps = {}) => {
+    if (node instanceof Element) {
+      const className = getClassName(node.classList, newProps, oldProps);
+      if (className !== "") {
+        node.className = className;
+      }
+      Object.keys(newProps).forEach((name) => {
+        if (name === "children" || name === "style" || name === "ref" || name === "class" || name === "className" || name === "forwardedRef") {
+          return;
+        }
+        if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2);
+          const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+          if (!isCoveredByReact(eventNameLc)) {
+            syncEvent(node, eventNameLc, newProps[name]);
+          }
+        } else {
+          node[name] = newProps[name];
+          const propType = typeof newProps[name];
+          if (propType === "string") {
+            node.setAttribute(camelToDashCase(name), newProps[name]);
+          }
+        }
+      });
+    }
+  };
+  const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(" ") : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(" ") : []);
+    const finalClassNames = [];
+    currentClasses.forEach((currentClass) => {
+      if (incomingPropClasses.has(currentClass)) {
+        finalClassNames.push(currentClass);
+        incomingPropClasses.delete(currentClass);
+      } else if (!oldPropClasses.has(currentClass)) {
+        finalClassNames.push(currentClass);
+      }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(" ");
+  };
+  const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+      case "doubleclick":
+        return "dblclick";
+    }
+    return eventNameSuffix;
+  };
+  /**
+   * Checks if an event is supported in the current execution environment.
+   * @license Modernizr 3.0.0pre (Custom Build) | MIT
+   */
+  const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === "undefined") {
+      return true;
+    } else {
+      const eventName = "on" + transformReactEventName(eventNameSuffix);
+      let isSupported = eventName in document;
+      if (!isSupported) {
+        const element = document.createElement("div");
+        element.setAttribute(eventName, "return;");
+        isSupported = typeof element[eventName] === "function";
+      }
+      return isSupported;
+    }
+  };
+  const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
+    if (oldEventHandler) {
+      node.removeEventListener(eventName, oldEventHandler);
+    }
+    node.addEventListener(
+      eventName,
+      eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+          newEventHandler.call(this, e);
+        }
+      }
+    );
+  };
+  const arrayToMap = (arr) => {
+    const map = /* @__PURE__ */ new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+  };
+  const setRef = (ref, value) => {
+    if (typeof ref === "function") {
+      ref(value);
+    } else if (ref != null) {
+      ref.current = value;
+    }
+  };
+  const mergeRefs = (...refs) => {
+    return (value) => {
+      refs.forEach((ref) => {
+        setRef(ref, value);
+      });
+    };
+  };
+  const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(ReactComponent, { ...props, forwardedRef: ref });
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+  };
+  const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== void 0) {
+      defineCustomElement();
+    }
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+      constructor(props) {
+        super(props);
+        __publicField(this, "componentEl");
+        __publicField(this, "setComponentElRef", (element) => {
+          this.componentEl = element;
+        });
+      }
+      componentDidMount() {
+        this.componentDidUpdate(this.props);
+      }
+      componentDidUpdate(prevProps) {
+        attachProps(this.componentEl, this.props, prevProps);
+      }
+      render() {
+        const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+        let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+          const value = cProps[name];
+          if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+            const eventName = name.substring(2).toLowerCase();
+            if (typeof document !== "undefined" && isCoveredByReact(eventName)) {
+              acc[name] = value;
+            }
+          } else {
+            const type = typeof value;
+            if (type === "string" || type === "boolean" || type === "number") {
+              acc[camelToDashCase(name)] = value;
+            }
+          }
+          return acc;
+        }, {});
+        const newProps = {
+          ...propsToPass,
+          ref: mergeRefs(forwardedRef, this.setComponentElRef),
+          style
+        };
+        return React.createElement(tagName, newProps, children);
+      }
+      static get displayName() {
+        return displayName;
+      }
+    };
+    return createForwardRef(ReactComponent, displayName);
+  };
+  function TemplateConstructor(el, ReactComponent, initialProps, lastEl = null) {
+    var _a;
+    if (!el) {
+      (_a = lastEl == null ? void 0 : lastEl.destroy) == null ? void 0 : _a.call(lastEl);
+      return null;
+    }
+    if (!el._root) {
+      el._root = client.createRoot(el);
+    }
+    const renderComponent = (props) => {
+      var _a2;
+      const vNode = React.createElement(ReactComponent, props);
+      (_a2 = el._root) == null ? void 0 : _a2.render(vNode);
+    };
+    renderComponent(initialProps);
+    const update = (newProps) => {
+      renderComponent(newProps);
+    };
+    const destroy = () => {
+      var _a2;
+      (_a2 = el._root) == null ? void 0 : _a2.unmount();
+      el._root = void 0;
+    };
+    return { update, destroy };
+  }
+  const Template = (ReactComponent, customProps) => {
+    return (h, p, addition) => {
+      const props = customProps ? { ...customProps, ...p } : p;
+      props.addition = addition;
+      let lastEl = null;
+      return h("span", {
+        key: `${p.prop}-${p.rowIndex || 0}`,
+        ref: (el) => {
+          lastEl = TemplateConstructor(el, ReactComponent, props, lastEl);
+        }
+      });
+    };
+  };
+  class EditorAdapter {
+    constructor(EditorComponent, column, save, close) {
+      __publicField(this, "element", null);
+      __publicField(this, "editCell");
+      __publicField(this, "renderedComponent", null);
+      this.EditorComponent = EditorComponent;
+      this.column = column;
+      this.save = save;
+      this.close = close;
+    }
+    // optional, called after editor rendered
+    componentDidRender() {
+    }
+    // optional, called after editor destroyed
+    disconnectedCallback() {
+      var _a;
+      (_a = this.renderedComponent) == null ? void 0 : _a.destroy();
+      this.renderedComponent = null;
+    }
+    render(h) {
+      var _a;
+      return h("span", {
+        key: `${this.column.prop}-${((_a = this.editCell) == null ? void 0 : _a.rowIndex) || 0}`,
+        ref: (el) => this.renderedComponent = TemplateConstructor(
+          el,
+          this.EditorComponent,
+          {
+            ...this.editCell,
+            column: this.column,
+            save: this.save,
+            close: this.close
+          },
+          this.renderedComponent
+        )
+      });
+    }
+  }
+  const Editor = (EditorComponent) => {
+    return function(column, save, close) {
+      return new EditorAdapter(EditorComponent, column, save, close);
+    };
+  };
+  const RevoGrid = /* @__PURE__ */ createReactComponent("revo-grid", void 0, void 0, loader.defineCustomElements);
+  exports2.Editor = Editor;
+  exports2.EditorAdapter = EditorAdapter;
+  exports2.RevoGrid = RevoGrid;
+  exports2.Template = Template;
+  Object.keys(loader).forEach((k) => {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k))
+      Object.defineProperty(exports2, k, {
+        enumerable: true,
+        get: () => loader[k]
+      });
+  });
+  Object.keys(revogrid).forEach((k) => {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k))
+      Object.defineProperty(exports2, k, {
+        enumerable: true,
+        get: () => revogrid[k]
+      });
+  });
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/package.json

@@ -1,47 +1,80 @@
 {
   "name": "@revolist/revogrid-react",
   "sideEffects": false,
-  "version": "3.0.52",
-  "description": "React wrapper for RevoGrid component",
-  "license": "MIT",
+  "version": "4.11.20",
+  "description": "React DataGrid Spreadsheet component with native cell render support",
+  "main": "./dist/react-datagrid.umd.cjs",
+  "module": "./dist/react-datagrid.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-datagrid.js",
+      "require": "./dist/react-datagrid.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "type": "module",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "release": "npm run build && npm publish --public --tag pre-release",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "revo-grid",
+    "revolist",
+    "csv",
+    "datagrid",
+    "datalist",
+    "datamanager",
+    "editable",
+    "excel",
+    "excel-grid",
+    "export",
+    "fast-grid",
+    "filtering",
+    "grid",
+    "gridjs",
+    "grouping",
+    "infinity-grid",
+    "rangeedit",
+    "reactive",
+    "spreadsheet",
+    "stenciljs",
+    "storybook",
+    "treeview",
+    "virtualgrid",
+    "virtual",
+    "virtual-scroll",
+    "react",
+    "react-grid",
+    "react-datagrid"
+  ],
+  "author": "revolist",
   "repository": {
     "type": "git",
-    "url": "https://github.com/revolist/revogrid-react.git"
+    "url": "https://github.com/revolist/react-datagrid.git"
   },
   "bugs": {
     "url": "https://github.com/revolist/revogrid/issues"
   },
   "homepage": "https://github.com/revolist/revogrid#readme",
-  "author": "revolist",
-  "scripts": {
-    "build": "npm run clean && npm run compile",
-    "clean": "rm -rf dist",
-    "compile": "npm run tsc",
-    "tsc": "tsc -p .",
-    "rollup": "rollup -c",
-    "serve": "parcel public/index.html"
-  },
-  "main": "./dist/revogrid.js",
-  "module": "./dist/revogrid.js",
-  "types": "./dist/revogrid.d.ts",
-  "files": [
-    "dist/"
-  ],
-  "devDependencies": {
-    "@types/node": "^14.14.32",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.1",
-    "np": "^3.1.0",
-    "parcel-bundler": "^1.12.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "typescript": "^4.2.3"
-  },
+  "license": "MIT",
   "dependencies": {
-    "@stencil/core": "^2.4.0",
-    "@revolist/revogrid": "^3.0.52"
+    "@revolist/revogrid": "4.11.20"
   },
-  "alias": {
-    "@revolist/revogrid-react": "./dist/revogrid.js"
+  "devDependencies": {
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@stencil/core": "^4.17.1",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1"
   }
 }

package/dist/react-component-lib/createComponent.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
-}
-interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
-    forwardedRef: React.RefObject<ElementType>;
-    ref?: React.Ref<any>;
-}
-export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
-export {};