@heartlandone/vega-react 1.44.2 → 1.45.0

package/dist/components.d.ts

@@ -22,6 +22,7 @@ export declare const VegaCounterBadge: import("react").ForwardRefExoticComponent
 export declare const VegaDatePicker: import("react").ForwardRefExoticComponent<JSX.VegaDatePicker & Omit<import("react").HTMLAttributes<HTMLVegaDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaDatePickerElement>>;
 export declare const VegaDialog: import("react").ForwardRefExoticComponent<JSX.VegaDialog & Omit<import("react").HTMLAttributes<HTMLVegaDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaDialogElement>>;
 export declare const VegaDropdown: import("react").ForwardRefExoticComponent<JSX.VegaDropdown & Omit<import("react").HTMLAttributes<HTMLVegaDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaDropdownElement>>;
+export declare const VegaFieldError: import("react").ForwardRefExoticComponent<JSX.VegaFieldError & Omit<import("react").HTMLAttributes<HTMLVegaFieldErrorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaFieldErrorElement>>;
 export declare const VegaFieldLabel: import("react").ForwardRefExoticComponent<JSX.VegaFieldLabel & Omit<import("react").HTMLAttributes<HTMLVegaFieldLabelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaFieldLabelElement>>;
 export declare const VegaFlex: import("react").ForwardRefExoticComponent<JSX.VegaFlex & Omit<import("react").HTMLAttributes<HTMLVegaFlexElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaFlexElement>>;
 export declare const VegaFooter: import("react").ForwardRefExoticComponent<JSX.VegaFooter & Omit<import("react").HTMLAttributes<HTMLVegaFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaFooterElement>>;

package/dist/components.js

@@ -26,6 +26,7 @@ export const VegaCounterBadge = /*@__PURE__*/ createReactComponent('vega-counter
 export const VegaDatePicker = /*@__PURE__*/ createReactComponent('vega-date-picker');
 export const VegaDialog = /*@__PURE__*/ createReactComponent('vega-dialog');
 export const VegaDropdown = /*@__PURE__*/ createReactComponent('vega-dropdown');
+export const VegaFieldError = /*@__PURE__*/ createReactComponent('vega-field-error');
 export const VegaFieldLabel = /*@__PURE__*/ createReactComponent('vega-field-label');
 export const VegaFlex = /*@__PURE__*/ createReactComponent('vega-flex');
 export const VegaFooter = /*@__PURE__*/ createReactComponent('vega-footer');

package/dist/testing/index.d.ts

@@ -0,0 +1 @@
+export * from "./utils";

package/dist/testing/index.js

@@ -0,0 +1 @@
+export * from "./utils";

package/dist/testing/utils.d.ts

@@ -0,0 +1,8 @@
+import type { RenderResult } from "@testing-library/react";
+export declare type Nullable<T> = T | undefined | null;
+export declare function waitForVegaReady(renderResult: RenderResult, delay?: number): Promise<RenderResult>;
+export declare type MockedResizeObserverController = {
+    hide: (selector: string, container?: HTMLElement) => void;
+    show: (selector: string, container?: HTMLElement) => void;
+};
+export declare function mockResizeObserver(): MockedResizeObserverController;

package/dist/testing/utils.js

@@ -0,0 +1,100 @@
+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());
+    });
+};
+import { waitFor } from "@testing-library/react";
+export function waitForVegaReady(renderResult, delay = 300) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield waitFor(() => {
+            renderResult.baseElement
+                .querySelectorAll("*:not(.hydrated)")
+                // eslint-disable-next-line unicorn/no-array-for-each
+                .forEach((element) => {
+                if (element.tagName.startsWith("VEGA")) {
+                    throw new Error("Vega component is not rendered yet, retrying...");
+                }
+            });
+        });
+        /*
+           * The following code is added to load the vega component, and the attribute value is set after each component is loaded.
+           * To determine whether there is a hydrated style that cannot meet the requirements after the component is loaded,
+           * It need to set the sleep time to ensure that each attribute of the vega component is fully loaded
+           *
+           code link: ./node_modules/@heartlandone/vega-react/dist/react-component-lib/utils/attachProps.js(line 28-33)}
+          */
+        yield sleep(delay);
+        return renderResult;
+    });
+}
+export function mockResizeObserver() {
+    const resizeObserverElementMap = new Map();
+    global.ResizeObserver = class {
+        constructor(callback) {
+            this.observedElements = [];
+            this.callback = callback;
+        }
+        observe(element) {
+            if (!this.isObserved(element)) {
+                resizeObserverElementMap.set(element, this);
+                this.observedElements.push(element);
+            }
+        }
+        unobserve(element) {
+            if (this.isObserved(element)) {
+                resizeObserverElementMap.delete(element);
+                this.observedElements = this.observedElements.filter((observedElement) => observedElement !== element);
+            }
+        }
+        disconnect() {
+            for (const element of this.observedElements) {
+                resizeObserverElementMap.delete(element);
+            }
+            this.observedElements = [];
+        }
+        show() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.callback([{ contentRect: { height: 100 } }], this);
+        }
+        hide() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.callback([{ contentRect: { height: 0 } }], this);
+        }
+        isObserved(element) {
+            return this.observedElements.includes(element);
+        }
+    };
+    return {
+        show: (selector, container) => {
+            (container || document)
+                .querySelectorAll(selector)
+                // eslint-disable-next-line unicorn/no-array-for-each
+                .forEach((el) => {
+                const resizeObserver = resizeObserverElementMap.get(el);
+                if (resizeObserver) {
+                    resizeObserver.show();
+                }
+            });
+        },
+        hide: (selector, container) => {
+            (container || document)
+                .querySelectorAll(selector)
+                // eslint-disable-next-line unicorn/no-array-for-each
+                .forEach((el) => {
+                const resizeObserver = resizeObserverElementMap.get(el);
+                if (resizeObserver) {
+                    resizeObserver.hide();
+                }
+            });
+        },
+    };
+}
+function sleep(ms) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heartlandone/vega-react",
   "sideEffects": false,
-  "version": "1.44.2",
+  "version": "1.45.0",
   "description": "React specific wrapper for @heartlandone/vega",
   "scripts": {
     "stencil-postbuild": "node ./src/scripts/stencil-post-build-script.js",
@@ -26,6 +26,7 @@
     "directory": "dist"
   },
   "devDependencies": {
+    "@testing-library/react": "12.1.2",
     "@types/jest": "23.3.9",
     "@types/node": "^15.14.9",
     "@types/react": "^16.7.0",
@@ -38,7 +39,7 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@heartlandone/vega": "1.44.2"
+    "@heartlandone/vega": "1.45.0"
   },
   "peerDependencies": {
     "react": ">=16.7.0",