@heartlandone/vega-react 2.78.0 → 2.79.0

package/dist/components.d.ts

@@ -79,6 +79,9 @@ export declare const VegaRichTextEditor: import("react").ForwardRefExoticCompone
 export declare const VegaRichTextEditorToolbarButton: import("react").ForwardRefExoticComponent<VegaReactComponentWithNativeEvent<JSX.VegaRichTextEditorToolbarButton, Omit<import("react").HTMLAttributes<HTMLVegaRichTextEditorToolbarButtonElement>, "style">, "onClick"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaRichTextEditorToolbarButtonElement>>;
 export declare const VegaRichTextImageEditor: import("react").ForwardRefExoticComponent<VegaReactComponentWithNativeEvent<JSX.VegaRichTextImageEditor, Omit<import("react").HTMLAttributes<HTMLVegaRichTextImageEditorElement>, "style">, "onChange"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaRichTextImageEditorElement>>;
 export declare const VegaRichTextLinkEditor: import("react").ForwardRefExoticComponent<VegaReactComponentWithNativeEvent<JSX.VegaRichTextLinkEditor, Omit<import("react").HTMLAttributes<HTMLVegaRichTextLinkEditorElement>, "style">, "onChange"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaRichTextLinkEditorElement>>;
+export declare const VegaRichTextTableProperties: import("react").ForwardRefExoticComponent<JSX.VegaRichTextTableProperties & Omit<import("react").HTMLAttributes<HTMLVegaRichTextTablePropertiesElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaRichTextTablePropertiesElement>>;
+export declare const VegaRichTextTableSelectionWidget: import("react").ForwardRefExoticComponent<JSX.VegaRichTextTableSelectionWidget & Omit<import("react").HTMLAttributes<HTMLVegaRichTextTableSelectionWidgetElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaRichTextTableSelectionWidgetElement>>;
+export declare const VegaRichTextTableSetting: import("react").ForwardRefExoticComponent<JSX.VegaRichTextTableSetting & Omit<import("react").HTMLAttributes<HTMLVegaRichTextTableSettingElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaRichTextTableSettingElement>>;
 export declare const VegaSectionTitle: import("react").ForwardRefExoticComponent<JSX.VegaSectionTitle & Omit<import("react").HTMLAttributes<HTMLVegaSectionTitleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSectionTitleElement>>;
 export declare const VegaSegmentControl: import("react").ForwardRefExoticComponent<VegaReactComponentWithNativeEvent<JSX.VegaSegmentControl, Omit<import("react").HTMLAttributes<HTMLVegaSegmentControlElement>, "style">, "onChange"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSegmentControlElement>>;
 export declare const VegaSelectionChip: import("react").ForwardRefExoticComponent<VegaReactComponentWithNativeEvent<JSX.VegaSelectionChip, Omit<import("react").HTMLAttributes<HTMLVegaSelectionChipElement>, "style">, "onChange"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSelectionChipElement>>;

package/dist/components.js

@@ -86,6 +86,9 @@ export const VegaRichTextEditor = /*@__PURE__*/ createReactComponent('vega-rich-
 export const VegaRichTextEditorToolbarButton = /*@__PURE__*/ createReactComponent('vega-rich-text-editor-toolbar-button');
 export const VegaRichTextImageEditor = /*@__PURE__*/ createReactComponent('vega-rich-text-image-editor');
 export const VegaRichTextLinkEditor = /*@__PURE__*/ createReactComponent('vega-rich-text-link-editor');
+export const VegaRichTextTableProperties = /*@__PURE__*/ createReactComponent('vega-rich-text-table-properties');
+export const VegaRichTextTableSelectionWidget = /*@__PURE__*/ createReactComponent('vega-rich-text-table-selection-widget');
+export const VegaRichTextTableSetting = /*@__PURE__*/ createReactComponent('vega-rich-text-table-setting');
 export const VegaSectionTitle = /*@__PURE__*/ createReactComponent('vega-section-title');
 export const VegaSegmentControl = /*@__PURE__*/ createReactComponent('vega-segment-control');
 export const VegaSelectionChip = /*@__PURE__*/ createReactComponent('vega-selection-chip');

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./components";
+export { VegaPopover } from "./overrides/vega-popover";
 export * from "./hooks/use-vega-ref";
 export * from "./global";

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from "./components";
+export { VegaPopover } from "./overrides/vega-popover";
 export * from "./hooks/use-vega-ref";
 export * from "./global";

package/dist/overrides/vega-popover/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { StencilReactExternalProps } from "../../react-component-lib/utils";
+import type { JSX } from "@heartlandone/vega";
+declare type VegaPopoverProps = React.PropsWithChildren<StencilReactExternalProps<JSX.VegaPopover, HTMLVegaPopoverElement>>;
+declare type VegaPopoverComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<VegaPopoverProps> & React.RefAttributes<HTMLVegaPopoverElement>>;
+export declare const VegaPopover: VegaPopoverComponent;
+export {};

package/dist/overrides/vega-popover/index.js

@@ -0,0 +1,151 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import ReactDOM from "react-dom";
+import { createReactComponent } from "../../react-component-lib";
+import { setRef, } from "../../react-component-lib/utils";
+const VegaPopoverBase = createReactComponent("vega-popover");
+/** Splits children into `[slot="popover"]` overlay nodes and all others (trigger etc.). */
+function splitChildren(children) {
+    const popover = [];
+    const other = [];
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+            other.push(child);
+            return;
+        }
+        const slot = child.props
+            .slot;
+        (slot === "popover" ? popover : other).push(child);
+    });
+    return [popover, other];
+}
+class VegaPopoverInner extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.host = null;
+        this.popoverMount = null;
+        this.contentBox = null;
+        this.contentBoxObserver = null;
+        this.isUnmounting = false;
+        this.disconnectContentBoxObserver = () => {
+            if (this.contentBoxObserver) {
+                this.contentBoxObserver.disconnect();
+                this.contentBoxObserver = null;
+            }
+        };
+        this.syncContentBox = () => {
+            var _a, _b, _c;
+            const nextContentBox = (_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("vega-popover-content-box")) !== null && _c !== void 0 ? _c : null;
+            if (this.contentBox === nextContentBox) {
+                this.ensurePopoverMount();
+                return;
+            }
+            this.contentBox = nextContentBox;
+            this.ensurePopoverMount();
+        };
+        this.ensurePopoverMount = () => {
+            if (!this.contentBox || !this.popoverMount) {
+                return;
+            }
+            if (this.popoverMount.parentElement !== this.contentBox) {
+                this.contentBox.appendChild(this.popoverMount);
+            }
+        };
+        this.attachContentBoxObserver = (host) => {
+            this.disconnectContentBoxObserver();
+            if (typeof MutationObserver === "undefined" || !host.shadowRoot) {
+                return;
+            }
+            this.contentBoxObserver = new MutationObserver(() => {
+                this.syncContentBox();
+            });
+            this.contentBoxObserver.observe(host.shadowRoot, {
+                childList: true,
+                subtree: true,
+            });
+        };
+        this.connectHost = (host) => {
+            // Reset the unmounting flag so re-connections work after React 18 StrictMode
+            // simulates unmount+remount on the same class instance.
+            this.isUnmounting = false;
+            // Re-create popoverMount if componentWillUnmount destroyed it (StrictMode remount).
+            let needsRender = false;
+            if (!this.popoverMount && typeof document !== "undefined") {
+                this.popoverMount = document.createElement("div");
+                this.popoverMount.setAttribute("slot", "popover");
+                needsRender = true;
+            }
+            const ready = typeof host.componentOnReady === "function"
+                ? host.componentOnReady()
+                : Promise.resolve();
+            void ready.then(() => {
+                if (this.host !== host || this.isUnmounting) {
+                    return;
+                }
+                this.syncContentBox();
+                this.attachContentBoxObserver(host);
+                // If popoverMount was recreated we need a new render pass so the portal
+                // picks up the fresh mount node.
+                if (needsRender) {
+                    this.forceUpdate();
+                }
+            });
+        };
+        this.setHostRef = (el) => {
+            const { forwardedRef } = this.props;
+            setRef(forwardedRef, el);
+            if (this.host === el) {
+                return;
+            }
+            if (el === null && this.host !== null && !this.isUnmounting) {
+                return;
+            }
+            if (this.host && el !== this.host) {
+                this.disconnectContentBoxObserver();
+            }
+            this.host = el;
+            if (el) {
+                this.connectHost(el);
+            }
+            else {
+                this.contentBox = null;
+            }
+        };
+        if (typeof document !== "undefined") {
+            this.popoverMount = document.createElement("div");
+            this.popoverMount.setAttribute("slot", "popover");
+        }
+    }
+    componentWillUnmount() {
+        var _a;
+        this.isUnmounting = true;
+        this.disconnectContentBoxObserver();
+        if ((_a = this.popoverMount) === null || _a === void 0 ? void 0 : _a.parentElement) {
+            this.popoverMount.parentElement.removeChild(this.popoverMount);
+        }
+        this.host = null;
+        this.popoverMount = null;
+        this.contentBox = null;
+    }
+    render() {
+        const _a = this.props, { children, forwardedRef } = _a, restProps = __rest(_a, ["children", "forwardedRef"]);
+        const [popoverChildren, otherChildren] = splitChildren(children);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(VegaPopoverBase, Object.assign({}, restProps, { ref: this.setHostRef }), otherChildren),
+            popoverChildren.length > 0 &&
+                this.popoverMount &&
+                ReactDOM.createPortal(popoverChildren, this.popoverMount)));
+    }
+}
+export const VegaPopover = React.forwardRef((props, ref) => React.createElement(VegaPopoverInner, Object.assign({}, props, { forwardedRef: ref })));
+VegaPopover.displayName = "VegaPopover";

package/dist/overrides/vega-popover/test/vega-popover.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * NOTE: This test file is for vega-popover React wrapper.
+ * It validates portal wrapping and slot-based child routing.
+ * Tests use the real VegaPopover component with mocked Shadow DOM support.
+ */
+import "jest";

package/dist/overrides/vega-popover/test/vega-popover.test.js

@@ -0,0 +1,108 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * NOTE: This test file is for vega-popover React wrapper.
+ * It validates portal wrapping and slot-based child routing.
+ * Tests use the real VegaPopover component with mocked Shadow DOM support.
+ */
+import "jest";
+import React from "react";
+import ReactDOM from "react-dom";
+import { VegaPopover } from "../index";
+// @ts-ignore - @testing-library/react is installed and resolved by jest, but TypeScript LSP may not find it
+import { render, waitFor } from "@testing-library/react";
+jest.mock("@heartlandone/vega", () => ({
+    FeatureFlag: {
+        isEnabled: () => false,
+    },
+}), { virtual: true });
+/**
+ * Helper to inject a mocked Shadow DOM structure into an element.
+ * Used for jsdom compatibility where native Shadow DOM is not supported.
+ */
+function injectShadowRootMock(element) {
+    if (!element.shadowRoot) {
+        const contentBox = document.createElement("vega-popover-content-box");
+        Object.defineProperty(element, "shadowRoot", {
+            configurable: true,
+            value: {
+                querySelector: (selector) => {
+                    return selector === "vega-popover-content-box" ? contentBox : null;
+                },
+            },
+        });
+        element.componentOnReady = () => Promise.resolve(element);
+    }
+    return element;
+}
+describe("VegaPopover (React portal wrapper)", () => {
+    beforeEach(() => {
+        // Mock createElement to inject shadowRoot on vega-popover elements
+        const originalCreateElement = document.createElement;
+        jest
+            .spyOn(document, "createElement")
+            .mockImplementation(function (tagName, ...args) {
+            const element = originalCreateElement.call(document, tagName, ...args);
+            if (tagName.toLowerCase() === "vega-popover") {
+                injectShadowRootMock(element);
+            }
+            return element;
+        });
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+        document.body.innerHTML = "";
+    });
+    test("creates host and content-box portals for trigger and popover content", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const createPortalSpy = jest.spyOn(ReactDOM, "createPortal");
+        createPortalSpy.mockImplementation((children) => children);
+        render(React.createElement(VegaPopover, { placement: "top", alignment: "start" },
+            React.createElement("button", { slot: "popover-content" }, "Click Me"),
+            React.createElement("div", { slot: "popover" }, "Popover Content")));
+        const host = document.querySelector("vega-popover");
+        const contentBox = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("vega-popover-content-box");
+        expect(host).toBeTruthy();
+        expect(contentBox).toBeTruthy();
+        yield waitFor(() => {
+            expect(createPortalSpy).toHaveBeenCalled();
+            const containers = createPortalSpy.mock.calls.map((call) => call[1]);
+            expect(containers).toContain(host);
+            expect(containers).toContain(contentBox);
+        });
+    }));
+    test("routes children by slot to the expected portal container", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        const createPortalSpy = jest.spyOn(ReactDOM, "createPortal");
+        createPortalSpy.mockImplementation((children) => children);
+        render(React.createElement(VegaPopover, { placement: "top", alignment: "start" },
+            React.createElement("button", { slot: "popover-content" }, "Trigger Button"),
+            React.createElement("div", { slot: "popover" }, "Popover Body")));
+        const host = document.querySelector("vega-popover");
+        const contentBox = (_b = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("vega-popover-content-box");
+        yield waitFor(() => {
+            expect(createPortalSpy.mock.calls.length).toBeGreaterThanOrEqual(2);
+        });
+        const hostPortalCall = createPortalSpy.mock.calls.find((call) => call[1] === host);
+        const contentPortalCall = createPortalSpy.mock.calls.find((call) => call[1] === contentBox);
+        expect(hostPortalCall).toBeTruthy();
+        expect(contentPortalCall).toBeTruthy();
+        const hostChildren = hostPortalCall
+            ? React.Children.toArray(hostPortalCall[0])
+            : [];
+        const contentChildren = contentPortalCall
+            ? React.Children.toArray(contentPortalCall[0])
+            : [];
+        if (hostChildren[0] && contentChildren[0]) {
+            expect(hostChildren[0].props.children).toBe("Trigger Button");
+            expect(contentChildren[0].props.children).toBe("Popover Body");
+        }
+    }));
+});

package/dist/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@heartlandone/vega-react",
+  "version": "2.78.0",
+  "description": "React specific wrapper for @heartlandone/vega",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@heartlandone/vega": "2.78.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.7.0",
+    "react-dom": ">=16.7.0"
+  }
+}

package/dist/utils/spec-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * NOTE: This utility is only for **SPEC** test cases.
+ *
+ * Mocked MutationObserver for testing in jsdom environment.
+ * Provides observe, disconnect, and trigger methods for controlling
+ * mutation observations in tests.
+ *
+ * @callback MutationCallback - The callback function triggered when mutations occur
+ * @returns {jest.Mock} - A Jest mock function constructor for MutationObserver
+ */
+export declare const MockedMutationObserver: jest.Mock;

package/dist/utils/spec-utils.js

@@ -0,0 +1,22 @@
+/**
+ * NOTE: This utility is only for **SPEC** test cases.
+ *
+ * Mocked MutationObserver for testing in jsdom environment.
+ * Provides observe, disconnect, and trigger methods for controlling
+ * mutation observations in tests.
+ *
+ * @callback MutationCallback - The callback function triggered when mutations occur
+ * @returns {jest.Mock} - A Jest mock function constructor for MutationObserver
+ */
+export const MockedMutationObserver = jest.fn(function MutationObserver(callback) {
+    this.observe = jest.fn();
+    this.disconnect = jest.fn();
+    /**
+     * Mock the trigger for spec test to trigger observer callback
+     *
+     * @param {MutationRecord[]} mutations - mocked MutationObserver entries
+     */
+    this.trigger = (mutations) => {
+        callback(mutations, this);
+    };
+});

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@heartlandone/vega-react",
   "sideEffects": false,
-  "version": "2.78.0",
+  "version": "2.79.0",
   "description": "React specific wrapper for @heartlandone/vega",
   "license": "UNLICENSED",
   "scripts": {
     "stencil-postbuild": "node ./src/scripts/stencil-post-build-script.js",
-    "build": "npm run clean && npm run compile && npm run override-type",
+    "build": "npm run clean && npm run compile && npm run override-type && npm run create-dist-package-json",
     "clean": "rm -rf dist",
     "compile": "npm run tsc",
     "tsc": "tsc -p .",
@@ -16,6 +16,8 @@
     "publish:minor": "node ../scripts/publish-version.js minor",
     "publish:major": "node ../scripts/publish-version.js major",
     "override-type": "node ./src/scripts/override-component-native-event-type.js",
+    "create-dist-package-json": "node ./src/scripts/create-dist-package-json.js",
+    "test": "jest",
     "pr-codesandbox-auto": "node ../scripts/pr-codesandbox-auto/change-package-name.js"
   },
   "main": "./dist/index.js",
@@ -38,10 +40,11 @@
     "np": "^3.1.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "ts-jest": "^23.10.5",
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@heartlandone/vega": "2.78.0"
+    "@heartlandone/vega": "2.79.0"
   },
   "peerDependencies": {
     "react": ">=16.7.0",
@@ -53,7 +56,12 @@
     "testPathIgnorePatterns": [
       "node_modules",
       "dist"
-    ]
+    ],
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "tsconfig.test.json"
+      }
+    }
   },
   "resolutions": {
     "yargs-parser": "^21.1.1"