@heartlandone/vega-react 1.46.0 → 1.47.0

package/dist/components.d.ts

@@ -22,6 +22,8 @@ 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 VegaDropdownGroup: import("react").ForwardRefExoticComponent<JSX.VegaDropdownGroup & Omit<import("react").HTMLAttributes<HTMLVegaDropdownGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaDropdownGroupElement>>;
+export declare const VegaDropdownItem: import("react").ForwardRefExoticComponent<JSX.VegaDropdownItem & Omit<import("react").HTMLAttributes<HTMLVegaDropdownItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaDropdownItemElement>>;
 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>>;
@@ -55,6 +57,7 @@ export declare const VegaRadioGroup: import("react").ForwardRefExoticComponent<J
 export declare const VegaSidenav: import("react").ForwardRefExoticComponent<JSX.VegaSidenav & Omit<import("react").HTMLAttributes<HTMLVegaSidenavElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSidenavElement>>;
 export declare const VegaSidenavGroup: import("react").ForwardRefExoticComponent<JSX.VegaSidenavGroup & Omit<import("react").HTMLAttributes<HTMLVegaSidenavGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSidenavGroupElement>>;
 export declare const VegaSidenavLink: import("react").ForwardRefExoticComponent<JSX.VegaSidenavLink & Omit<import("react").HTMLAttributes<HTMLVegaSidenavLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSidenavLinkElement>>;
+export declare const VegaSlotContainer: import("react").ForwardRefExoticComponent<JSX.VegaSlotContainer & Omit<import("react").HTMLAttributes<HTMLVegaSlotContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaSlotContainerElement>>;
 export declare const VegaStepper: import("react").ForwardRefExoticComponent<JSX.VegaStepper & Omit<import("react").HTMLAttributes<HTMLVegaStepperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaStepperElement>>;
 export declare const VegaTabGroup: import("react").ForwardRefExoticComponent<JSX.VegaTabGroup & Omit<import("react").HTMLAttributes<HTMLVegaTabGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaTabGroupElement>>;
 export declare const VegaTabGroupPanel: import("react").ForwardRefExoticComponent<JSX.VegaTabGroupPanel & Omit<import("react").HTMLAttributes<HTMLVegaTabGroupPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLVegaTabGroupPanelElement>>;

package/dist/components.js

@@ -3,6 +3,8 @@
 /* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';
 import { defineCustomElements } from '@heartlandone/vega/loader';
+import { setVegaEnv } from '@heartlandone/vega';
+setVegaEnv({ framework: "react" });
 defineCustomElements();
 export const VegaAccordion = /*@__PURE__*/ createReactComponent('vega-accordion');
 export const VegaAppFooter = /*@__PURE__*/ createReactComponent('vega-app-footer');
@@ -26,6 +28,8 @@ 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 VegaDropdownGroup = /*@__PURE__*/ createReactComponent('vega-dropdown-group');
+export const VegaDropdownItem = /*@__PURE__*/ createReactComponent('vega-dropdown-item');
 export const VegaFieldError = /*@__PURE__*/ createReactComponent('vega-field-error');
 export const VegaFieldLabel = /*@__PURE__*/ createReactComponent('vega-field-label');
 export const VegaFlex = /*@__PURE__*/ createReactComponent('vega-flex');
@@ -59,6 +63,7 @@ export const VegaRadioGroup = /*@__PURE__*/ createReactComponent('vega-radio-gro
 export const VegaSidenav = /*@__PURE__*/ createReactComponent('vega-sidenav');
 export const VegaSidenavGroup = /*@__PURE__*/ createReactComponent('vega-sidenav-group');
 export const VegaSidenavLink = /*@__PURE__*/ createReactComponent('vega-sidenav-link');
+export const VegaSlotContainer = /*@__PURE__*/ createReactComponent('vega-slot-container');
 export const VegaStepper = /*@__PURE__*/ createReactComponent('vega-stepper');
 export const VegaTabGroup = /*@__PURE__*/ createReactComponent('vega-tab-group');
 export const VegaTabGroupPanel = /*@__PURE__*/ createReactComponent('vega-tab-group-panel');

package/dist/hooks/use-vega-ref.d.ts

@@ -10,6 +10,7 @@ export declare type VegaRef<T> = {
  * See more info here: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
  * Link issue: https://gethired.atlassian.net/browse/VD-1297
  *
+ * @param {() => void} callback - The `callback` parameter is a function that will be called when the `vegaRef` is available.
  * @returns {VegaRef} a callback function of type `VegaRef<T>`.
  */
-export declare function useVegaRef<T>(): VegaRef<T>;
+export declare function useVegaRef<T>(callback?: (ref: T) => void): VegaRef<T>;

package/dist/hooks/use-vega-ref.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 /**
  * useVegaRef returns a callback that can be used to store a reference to a DOM node.
  * It will be overridden to type {@link VegaRef} which value is stored by the callback
@@ -8,13 +8,21 @@ import { useCallback, useState } from "react";
  * See more info here: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
  * Link issue: https://gethired.atlassian.net/browse/VD-1297
  *
+ * @param {() => void} callback - The `callback` parameter is a function that will be called when the `vegaRef` is available.
  * @returns {VegaRef} a callback function of type `VegaRef<T>`.
  */
-export function useVegaRef() {
+export function useVegaRef(callback) {
     const [refState, setRefState] = useState(undefined);
     const refCallback = useCallback((node) => {
         setRefState(node);
     }, []);
     refCallback.current = refState;
+    if (callback) {
+        useEffect(() => {
+            if (refState) {
+                callback(refState);
+            }
+        }, [refState]);
+    }
     return refCallback;
 }

package/dist/react-component-lib/createComponent.js

@@ -12,6 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { createElement } from 'react';
 import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
 import { FeatureFlag } from '@heartlandone/vega';
+import { VegaSlotContainer } from "../components";
+const COMPONENT_WITH_SLOT_WRAPPER = new Set(["vega-table-cell"]);
 export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
     if (defineCustomElement !== undefined) {
         defineCustomElement();
@@ -64,6 +66,17 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
             const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            /**
+             * The function will return the children wrapped in a VegaSlotContainer component if the tagName is
+             * in the [COMPONENT_WITH_SLOT_WRAPPER]{@link COMPONENT_WITH_SLOT_WRAPPER}
+             *
+             * To fix issue https://gethired.atlassian.net/browse/VD-1957
+             *
+             * @param {React.ReactNode} children - Children nodes of the component
+             */
+            const renderChildrenWithSlotWrapper = (children) => {
+                return COMPONENT_WITH_SLOT_WRAPPER.has(tagName) ? (React.createElement(VegaSlotContainer, null, children)) : (children);
+            };
             /**
              * We use createElement here instead of
              * React.createElement to work around a
@@ -71,7 +84,8 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
              * React.createElement causes all elements to be rendered
              * as <tagname> instead of the actual Web Component.
              */
-            return (!FeatureFlag.isEnabled('VEGA_REACT.PREVENT_SSR') || this.state.canRender) ? createElement(tagName, newProps, children) : React.createElement(React.Fragment, null);
+            return !FeatureFlag.isEnabled("VEGA_REACT.PREVENT_SSR") ||
+                this.state.canRender ? (createElement(tagName, newProps, renderChildrenWithSlotWrapper(children))) : (React.createElement(React.Fragment, null));
         }
         static get displayName() {
             return displayName;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heartlandone/vega-react",
   "sideEffects": false,
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "React specific wrapper for @heartlandone/vega",
   "scripts": {
     "stencil-postbuild": "node ./src/scripts/stencil-post-build-script.js",
@@ -39,7 +39,7 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@heartlandone/vega": "1.46.0"
+    "@heartlandone/vega": "1.47.0"
   },
   "peerDependencies": {
     "react": ">=16.7.0",