@gpa-gemstone/react-forms 1.1.81 → 1.1.83

package/lib/CheckBox.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CheckBox;
 var React = require("react");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function CheckBox(props) {
     var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
@@ -48,7 +48,7 @@ function CheckBox(props) {
     var showLabel = props.Label !== "";
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
-    return (React.createElement("div", { className: "form-check", "data-help": guid },
+    return (React.createElement("div", { className: "form-check" },
         React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 record[props.Field] = evt.target.checked;
@@ -58,10 +58,10 @@ function CheckBox(props) {
             React.createElement("label", { className: 'form-check-label' },
                 showLabel ? label : '',
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                     : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null));
 }

package/lib/DatePicker.js

@@ -38,7 +38,7 @@ var React = require("react");
 var moment = require("moment");
 var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 /**
  * Component that allows a user to pick a date or datetime.
@@ -51,19 +51,16 @@ function DateTimePicker(props) {
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
     // State and ref declarations.
     var divRef = React.useRef(null);
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
-    var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
-    var _e = React.useState(""), feedbackMessage = _e[0], setFeedbackMessage = _e[1];
-    var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
-    var _g = React.useState(0), top = _g[0], setTop = _g[1];
-    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
+    var _b = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _b[0], setBoxRecord = _b[1];
+    var _c = React.useState(parse(props.Record)), pickerRecord = _c[0], setPickerRecord = _c[1];
+    var _d = React.useState(""), feedbackMessage = _d[0], setFeedbackMessage = _d[1];
+    var _e = React.useState(false), showOverlay = _e[0], setShowOverlay = _e[1];
+    var _f = React.useState(0), top = _f[0], setTop = _f[1];
+    var _g = React.useState(0), left = _g[0], setLeft = _g[1];
     var allowNull = React.useMemo(function () { var _a; return (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false; }, [props.AllowEmpty]);
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
     React.useEffect(function () {
         if (props.Record[props.Field] !== null) {
             setPickerRecord(parse(props.Record));
@@ -84,6 +81,24 @@ function DateTimePicker(props) {
         setLeft(node.left + 0.5 * node.width);
         setTop(node.top + node.height + 10);
     });
+    //Effect to set top and left on a scroll event
+    React.useEffect(function () {
+        function updatePosition() {
+            if (divRef.current != null) {
+                var node = (0, helper_functions_1.GetNodeSize)(divRef.current);
+                setLeft(node.left + 0.5 * node.width);
+                setTop(node.top + node.height + 10);
+            }
+        }
+        document.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        updatePosition(); // Initial update
+        return function () {
+            document.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, []);
+    //Effect to handle click events on the window
     React.useEffect(function () {
         if (showOverlay) {
             window.addEventListener('click', onWindowClick);
@@ -203,12 +218,12 @@ function DateTimePicker(props) {
         showHelpIcon || showLabel ?
             React.createElement("label", { className: 'd-flex align-items-center' },
                 showLabel ? label : '',
-                showHelpIcon ? React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                showHelpIcon ? React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
                     React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
-        React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control ".concat(IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
+        React.createElement("input", { className: "gpa-gemstone-datetime form-control ".concat(IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
                 valueChange(evt.target.value);
             }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
         React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),

package/lib/DateTimeUI/DateTimePopup.js

@@ -50,9 +50,9 @@ function DateTimePopup(props) {
     }, [props.Type]);
     if (!props.Show)
         return null;
-    var l = Math.max(props.Center - 0.5 * width, 0);
+    var left = Math.max(props.Center - 0.5 * width, 0);
     return (React.createElement(react_portal_1.Portal, null,
-        React.createElement(WrapperDiv, { Top: props.Top, Left: l, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
+        React.createElement(WrapperDiv, { Top: props.Top, Left: left, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
             showDate ? React.createElement(Calender_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null,
             showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter, Accuracy: props.Accuracy }) : null)));
 }

package/lib/Input.js

@@ -37,7 +37,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Input;
 var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function Input(props) {
@@ -107,12 +107,12 @@ function Input(props) {
             React.createElement("label", { className: 'd-flex align-items-center' },
                 showLabel ? label : '',
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                     : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
-        React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled, onBlur: onBlur, step: 'any' }),
+        React.createElement("input", { type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled, onBlur: onBlur, step: 'any' }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
 }

package/lib/InputWithButton.js

@@ -34,7 +34,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function InputWithButton(props) {
@@ -96,13 +96,13 @@ function InputWithButton(props) {
             React.createElement("label", { className: 'd-flex align-items-center' },
                 showLabel ? label : '',
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
         React.createElement("div", { className: "input-group" },
-            React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.InputDisabled == null ? false : props.InputDisabled, onBlur: onBlur, step: 'any' }),
+            React.createElement("input", { type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.InputDisabled == null ? false : props.InputDisabled, onBlur: onBlur, step: 'any' }),
             React.createElement("div", { className: "input-group-prepend" },
                 React.createElement("button", { className: props.BtnClass != null ? props.BtnClass : "btn btn-outline-secondary", style: props.BtnStyle, disabled: props.BtnDisabled == null ? false : props.BtnDisabled, type: "button", onClick: function (evt) { return props.OnBtnClick(evt); } }, props.BtnLabel)),
             React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback))));

package/lib/MultiInput.js

@@ -44,7 +44,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var Input_1 = require("./Input");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 //Only supporting string/number arrays for now
@@ -60,9 +60,9 @@ function MultiInput(props) {
     return (React.createElement(React.Fragment, null,
         fieldArray.length === 0 ?
             React.createElement(React.Fragment, null,
-                React.createElement("label", { className: 'd-flex align-items-center', "data-help": guid.current }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
+                React.createElement("label", { className: 'd-flex align-items-center' }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
                     props.Help != null ?
-                        React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                        React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
                             React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                         : null,
                     React.createElement("button", { className: 'btn', onClick: function () {
@@ -72,7 +72,7 @@ function MultiInput(props) {
                         " ",
                         React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
                         " ")),
-                React.createElement(HelperMessage_1.default, { Show: showHelp && props.Help != null, Target: guid.current }, props.Help))
+                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid.current, Class: "info", Position: "bottom" }, props.Help))
             : null,
         fieldArray.map(function (r, index) {
             var _a, _b;

package/lib/MutliCheckBoxSelect.js

@@ -24,7 +24,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var react_portal_1 = require("react-portal");
 var _ = require("lodash");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
@@ -38,6 +38,7 @@ var MultiSelect = function (props) {
     var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
     var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
     var _e = React.useState(""), guid = _e[0], setGuid = _e[1];
+    var helperGuid = React.useState("")[0];
     var showLabel = React.useMemo(function () { return props.Label !== ""; }, [props.Label]);
     var showHelpIcon = React.useMemo(function () { return props.Help !== undefined; }, [props.Help]);
     var selectedOptions = React.useMemo(function () { return props.Options.filter(function (opt) { return opt.Selected; }); }, [props.Options]);
@@ -98,20 +99,20 @@ var MultiSelect = function (props) {
                 showLabel ?
                     (props.Label === undefined ? 'Select' : props.Label) : '',
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helperGuid },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                     : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helperGuid, Class: "info", Position: "bottom" }, props.Help)
             : null,
         ((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
-            React.createElement(HelperMessage_1.default, { Show: showItems, Target: guid },
+            React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "bottom" },
                 React.createElement("p", null, "Selected Options:"),
                 selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Text); }),
                 selectedOptions.length > 10 ? React.createElement("p", null, "and ".concat(selectedOptions.length - 10, " other(s)")) : null)
             : null,
         React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
-            React.createElement("button", { "data-help": guid, type: "button", style: { padding: '.375rem .75rem', fontSize: '1rem', color: 'currentColor', backgroundColor: 'inherit' }, className: "btn border form-control dropdown-toggle", onClick: HandleShow, onMouseEnter: function () { return setShowItems(true); }, onMouseLeave: function () { return setShowItems(false); } },
+            React.createElement("button", { "data-tooltip": guid, type: "button", style: { padding: '.375rem .75rem', fontSize: '1rem', color: 'currentColor', backgroundColor: 'inherit' }, className: "btn border form-control dropdown-toggle", onClick: HandleShow, onMouseEnter: function () { return setShowItems(true); }, onMouseLeave: function () { return setShowItems(false); } },
                 props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length ? props.Options.filter(function (x) { return x.Selected; }).length : 'All ',
                 ' ',
                 " Selected"),

package/lib/RadioButtons.js

@@ -36,20 +36,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RadioButtons;
 var React = require("react");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function RadioButtons(props) {
     var _a;
     var guid = React.useRef((0, helper_functions_1.CreateGuid)());
     var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     var showHelpIcon = props.Help !== undefined;
-    return (React.createElement("div", { className: "form-group", "data-help": guid.current },
+    return (React.createElement("div", { className: "form-group" },
         React.createElement("label", { className: "form-check-label w-100 d-flex align-items-center" }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
             showHelpIcon ?
                 React.createElement(React.Fragment, null,
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })),
-                    React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help))
+                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "bottom" }, props.Help))
                 : null),
         props.Options.map(function (option, index) {
             var _a;

package/lib/SearchableSelect.js

@@ -64,7 +64,7 @@ function SearchableSelect(props) {
         handle.then(function (d) {
             setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
             setLoading(false);
-        });
+        }).catch(function () { return setLoading(false); });
         return callback;
     }, [search]);
     var handleOnBlur = React.useCallback(function () {

package/lib/Select.js

@@ -37,7 +37,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Select;
 var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function Select(props) {
@@ -84,13 +84,13 @@ function Select(props) {
             React.createElement("label", { className: 'd-flex align-items-center' },
                 showLabel ? label : '',
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                     : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
-        React.createElement("select", { "data-help": guid, className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
+        React.createElement("select", { className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
             ((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
             props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
 }

package/lib/StylableSelect.d.ts

@@ -16,10 +16,10 @@ interface IProps<T> {
     Field: keyof T;
     /**
         * Label to display for the form, defaults to the Field prop
-        * @type {string}
+        * @type {string | JSX.Element}
         * @optional
     */
-    Label?: string;
+    Label?: string | JSX.Element;
     /**
       * Help message or element to display
       * @type {string | JSX.Element}

package/lib/StylableSelect.js

@@ -35,7 +35,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = StylableSelect;
 var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var lodash_1 = require("lodash");
 var react_portal_1 = require("react-portal");
@@ -122,13 +122,13 @@ function StylableSelect(props) {
             React.createElement("label", { className: 'd-flex align-items-center' },
                 props.Label === undefined ? props.Field : props.Label,
                 props.Help !== undefined ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                     : null) : null,
         props.Help !== undefined ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
-        React.createElement("button", { type: "button", style: __assign({ border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
+        React.createElement("button", { type: "button", style: __assign({ border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
             React.createElement("div", { style: props.Style }, selected)),
         React.createElement(react_portal_1.Portal, null,
             React.createElement("div", { ref: tableContainer, className: 'popover', style: {
@@ -140,7 +140,7 @@ function StylableSelect(props) {
                     zIndex: 9999,
                     top: "".concat(position.Top, "px"),
                     left: "".concat(position.Left, "px"),
-                    width: "".concat(position.Width, "px"),
+                    minWidth: "".concat(position.Width, "px"),
                     maxWidth: '100%'
                 } },
                 React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },

package/lib/TextArea.js

@@ -38,7 +38,7 @@ exports.default = TextArea;
 // ******************************************************************************************************
 var React = require("react");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function TextArea(props) {
     // Internal ref and state hooks for managing the component state.
@@ -64,16 +64,16 @@ function TextArea(props) {
     var showLabel = props.Label !== "";
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
-    return (React.createElement("div", { className: "form-group", "data-help": guid.current },
+    return (React.createElement("div", { className: "form-group" },
         showHelpIcon || showLabel ?
             React.createElement("label", { className: 'd-flex align-items-center' },
                 showLabel ? label : '',
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
                     : null) : null,
         showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "bottom" }, props.Help)
             : null,
         React.createElement("textarea", { rows: props.Rows, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal == null ? '' : heldVal, disabled: props.Disabled == null ? false : props.Disabled }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));

package/lib/TimePicker.js

@@ -35,7 +35,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DatePicker;
 var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function DatePicker(props) {
@@ -46,10 +46,10 @@ function DatePicker(props) {
         (props.Help != null || props.Label !== "") ?
             React.createElement("label", { className: 'd-flex align-items-center' }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
                 props.Help != null ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : React.createElement(React.Fragment, null))
             : React.createElement(React.Fragment, null),
-        React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help),
+        React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "bottom" }, props.Help),
         React.createElement("input", { className: 'form-control' + (props.Valid(props.Field) ? '' : ' is-invalid'), type: "time", step: props.Step === null ? 60 : props.Step, onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 if (evt.target.value !== '')

package/lib/ToggleSwitch.js

@@ -36,14 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ToggleSwitch;
 var React = require("react");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
+var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function ToggleSwitch(props) {
     var helpID = React.useRef((0, helper_functions_1.CreateGuid)());
     var switchID = React.useRef((0, helper_functions_1.CreateGuid)());
     var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
     var showHelpIcon = props.Help !== undefined;
-    return (React.createElement("div", { className: "custom-control custom-switch", "data-help": helpID.current, style: props.Style },
+    return (React.createElement("div", { className: "custom-control custom-switch", style: props.Style },
         React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 record[props.Field] = evt.target.checked;
@@ -53,8 +53,8 @@ function ToggleSwitch(props) {
             props.Label == null ? props.Field : props.Label,
             showHelpIcon ?
                 React.createElement(React.Fragment, null,
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpID.current },
                         React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })),
-                    React.createElement(HelperMessage_1.default, { Show: showHelp, Target: helpID.current, Zindex: 9999 }, props.Help))
+                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpID.current, Zindex: 9999, Class: "info", Position: "bottom" }, props.Help))
                 : null)));
 }

package/lib/ToolTip.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    Show: boolean;
+    Position?: ('top' | 'bottom' | 'left' | 'right');
+    Target?: string;
+    Zindex?: number;
+    Class?: 'primary' | 'secondary' | 'success' | 'danger' | 'info';
+}
+export declare const Tooltip: React.FunctionComponent<IProps>;
+export default Tooltip;

package/lib/ToolTip.js

@@ -0,0 +1,136 @@
+"use strict";
+// ******************************************************************************************************
+//  ToolTip.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/14/2021 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var React = require("react");
+var styled_components_1 = require("styled-components");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var react_portal_1 = require("react-portal");
+var lodash_1 = require("lodash");
+// The styled tooltip wrapper component.
+var PopoverDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    display: inline-block;\n    font-size: 13px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    max-width: 100%;\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    padding: 0.1em;\n  }\n"], ["\n  & {\n    display: inline-block;\n    font-size: 13px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    max-width: 100%;\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    padding: 0.1em;\n  }\n"])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return props.BgColor; }, function (props) { return props.Color; }, function (props) { return "1px solid ".concat(props.Color); });
+//Arrow needs to be a styled div as the arrow class has pseduo elements
+var Arrow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &.arrow {\n    ", "\n    &::after {\n      content: '';\n      position: absolute;\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  }\n"], ["\n  &.arrow {\n    ", "\n    &::after {\n      content: '';\n      position: absolute;\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  }\n"])), function (props) { return (props.Position === 'left' || props.Position === 'right')
+    ? "top: calc(".concat(props.ArrowPositionPercent, "% - 1em);")
+    : "left: calc(".concat(props.ArrowPositionPercent, "% - 1em);"); }, function (props) { return props.Position === 'top' && "border-top-color: ".concat(props.BackgroundColor, ";"); }, function (props) { return props.Position === 'bottom' && "border-bottom-color:  ".concat(props.BackgroundColor, ";"); }, function (props) { return props.Position === 'left' && "border-left-color: ".concat(props.BackgroundColor, ";"); }, function (props) { return props.Position === 'right' && "border-right-color: ".concat(props.BackgroundColor, ";"); });
+var defaultTargetPosition = { Top: -999, Left: -999, Width: 0, Height: 0 };
+// The other element needs to have data-tooltip attribute equal the target prop used for positioning
+var Tooltip = function (props) {
+    var _a;
+    var position = (_a = props.Position) !== null && _a !== void 0 ? _a : 'top';
+    var toolTip = React.useRef(null);
+    var _b = React.useState(0), top = _b[0], setTop = _b[1];
+    var _c = React.useState(0), left = _c[0], setLeft = _c[1];
+    var _d = React.useState(50), arrowPositionPercent = _d[0], setArrowPositionPercent = _d[1];
+    var _e = React.useState(defaultTargetPosition), targetPosition = _e[0], setTargetPosition = _e[1];
+    var alertRef = React.useRef(null);
+    var _f = React.useState('green'), backgroundColor = _f[0], setBackgroundColor = _f[1];
+    var _g = React.useState('red'), color = _g[0], setColor = _g[1];
+    var alarmClass = React.useMemo(function () { return props.Class != null ? "alert-".concat(props.Class, " d-none") : 'popover d-none'; }, [props.Class]);
+    React.useLayoutEffect(function () {
+        if (alertRef.current == null)
+            return;
+        var style = getComputedStyle(alertRef.current);
+        setBackgroundColor(style.backgroundColor);
+        setColor(style.color);
+    });
+    React.useEffect(function () {
+        var target = document.querySelectorAll("[data-tooltip".concat(props.Target === undefined ? '' : "=\"".concat(props.Target, "\""), "]"));
+        if (target.length === 0) {
+            setTargetPosition(defaultTargetPosition);
+            return;
+        }
+        var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
+        var newPosition = { Height: targetLocation.height, Top: targetLocation.top, Left: targetLocation.left, Width: targetLocation.width };
+        if (!(0, lodash_1.isEqual)(newPosition, targetPosition))
+            setTargetPosition(newPosition);
+    }, [props.Show, props.Target, targetPosition]);
+    React.useLayoutEffect(function () {
+        var _a = getPosition(toolTip, targetPosition, position), t = _a[0], l = _a[1], arrowLeft = _a[2];
+        setTop(t);
+        setLeft(l);
+        setArrowPositionPercent(arrowLeft);
+    }, [targetPosition, props === null || props === void 0 ? void 0 : props.children, position]);
+    var zIndex = (props.Zindex === undefined ? 9999 : props.Zindex);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: alarmClass, ref: alertRef }),
+        React.createElement(react_portal_1.Portal, null,
+            React.createElement(PopoverDiv, { className: "popover bs-popover-".concat(position), Show: props.Show, Top: top, Left: left, ref: toolTip, Zindex: zIndex, BgColor: backgroundColor, Color: color },
+                React.createElement(Arrow, { className: 'arrow', Position: position, ArrowPositionPercent: arrowPositionPercent, BackgroundColor: backgroundColor, Color: color }),
+                React.createElement("div", { className: 'popover-body', style: { backgroundColor: backgroundColor, color: color } }, props.children)))));
+};
+exports.Tooltip = Tooltip;
+//Helper function
+var getPosition = function (toolTip, targetPosition, position) {
+    if (toolTip.current === null)
+        return [-999, -999];
+    var tipLocation = (0, helper_functions_1.GetNodeSize)(toolTip.current);
+    var offset = 5;
+    var top = 0;
+    var left = 0;
+    var windowWidth = window.innerWidth;
+    if (position === 'left') {
+        top = targetPosition.Top + 0.5 * targetPosition.Height - 0.5 * tipLocation.height;
+        left = targetPosition.Left - tipLocation.width - offset;
+    }
+    else if (position === 'right') {
+        top = targetPosition.Top + 0.5 * targetPosition.Height - 0.5 * tipLocation.height;
+        left = targetPosition.Left + targetPosition.Width + offset;
+    }
+    else if (position === 'top' || position === undefined) {
+        top = targetPosition.Top - tipLocation.height - offset;
+        left = targetPosition.Left + 0.5 * targetPosition.Width - 0.5 * tipLocation.width;
+        // If tooltip goes beyond right viewport boundary adjust left position to fit
+        if (left + tipLocation.width > windowWidth)
+            left = windowWidth - tipLocation.width - offset;
+        // If tooltip goes beyond left viewport boundary adjust left position to fit
+        if (left < 0)
+            left = offset;
+    }
+    else if (position === 'bottom') {
+        top = targetPosition.Top + targetPosition.Height + offset;
+        left = targetPosition.Left + 0.5 * targetPosition.Width - 0.5 * tipLocation.width;
+        //If tooltip goes beyond right viewport boundary adjust left position to fit
+        if (left + tipLocation.width >= windowWidth)
+            left = windowWidth - tipLocation.width - offset;
+        //If tooltip goes beyond left viewport boundary adjust left position to fit
+        if (left <= 0)
+            left = offset;
+    }
+    var arrowPositionPercent = 50; // Default to center
+    if (position === 'top' || position === 'bottom') {
+        var targetCenter = targetPosition.Left + 0.5 * targetPosition.Width;
+        arrowPositionPercent = ((targetCenter - left) / tipLocation.width) * 100;
+    }
+    else if (position === 'left' || position === 'right') {
+        var targetCenter = targetPosition.Top + 0.5 * targetPosition.Height;
+        arrowPositionPercent = ((targetCenter - top) / tipLocation.height) * 100;
+    }
+    return [top, left, arrowPositionPercent];
+};
+exports.default = exports.Tooltip;
+var templateObject_1, templateObject_2;

package/lib/index.d.ts

@@ -18,4 +18,5 @@ import InputWithButton from './InputWithButton';
 import RadioButtons from './RadioButtons';
 import FileUpload from './FileUpload';
 import MultiInput from './MultiInput';
-export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, ToggleSwitch, InputWithButton, RadioButtons, FileUpload, MultiInput };
+import ToolTip from './ToolTip';
+export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, ToggleSwitch, InputWithButton, RadioButtons, FileUpload, MultiInput, ToolTip };

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiInput = exports.FileUpload = exports.RadioButtons = exports.InputWithButton = exports.ToggleSwitch = exports.SearchableSelect = exports.ColorPicker = exports.StylableSelect = exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
+exports.ToolTip = exports.MultiInput = exports.FileUpload = exports.RadioButtons = exports.InputWithButton = exports.ToggleSwitch = exports.SearchableSelect = exports.ColorPicker = exports.StylableSelect = exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
 var CheckBox_1 = require("./CheckBox");
 exports.CheckBox = CheckBox_1.default;
 var Input_1 = require("./Input");
@@ -63,3 +63,5 @@ var FileUpload_1 = require("./FileUpload");
 exports.FileUpload = FileUpload_1.default;
 var MultiInput_1 = require("./MultiInput");
 exports.MultiInput = MultiInput_1.default;
+var ToolTip_1 = require("./ToolTip");
+exports.ToolTip = ToolTip_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.81",
+  "version": "1.1.83",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,8 +45,8 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.81",
-    "@gpa-gemstone/gpa-symbols": "0.0.47",
+    "@gpa-gemstone/application-typings": "0.0.82",
+    "@gpa-gemstone/gpa-symbols": "0.0.48",
     "@gpa-gemstone/helper-functions": "0.0.37",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",

package/lib/HelperMessage.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /**
-    * Flag to show the helper message
-    * @type {boolean}
-   */
-    Show: boolean;
-    /**
-    * Value of the target element's data-help attribute
-    * @type {string}
-    * @optional
-    */
-    Target?: string;
-    /**
-    * z-index for the helper message
-    * @type {number}
-   */
-    Zindex?: number;
-}
-/**
- * HelperMessage Component.
- * Displays a floating message box.
- */
-declare const HelperMessage: React.FunctionComponent<IProps>;
-export default HelperMessage;

package/lib/HelperMessage.js

@@ -1,90 +0,0 @@
-"use strict";
-// ******************************************************************************************************
-//  HelperMessage.tsx - Gbtc
-//
-//  Copyright © 2021, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  05/05/2021 - C. Lackner
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var styled_components_1 = require("styled-components");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var react_portal_1 = require("react-portal");
-var lodash_1 = require("lodash");
-// Styled component for the wrapper of the helper message.
-var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    border: 1px solid transparent;\n  }\n  ", ""], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    border: 1px solid transparent;\n  }\n  ", ""
-    /**
-     * HelperMessage Component.
-     * Displays a floating message box.
-     */
-])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return "".concat(props.Width, "px"); }, function (props) { return "\n    &::before {\n     border-left: 8px solid transparent;\n     border-right: 8px solid transparent;\n     border-bottom: 8px solid var(--info);\n     left: ".concat(props.TargetLeft - props.Left + props.TargetWidth / 2, "px;\n     top: -6px;\n     margin-left: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  "); });
-/**
- * HelperMessage Component.
- * Displays a floating message box.
- */
-var HelperMessage = function (props) {
-    var helpMessage = React.useRef(null);
-    // State variables for positioning and sizing the helper message.
-    var _a = React.useState(0), top = _a[0], setTop = _a[1];
-    var _b = React.useState(0), left = _b[0], setLeft = _b[1];
-    // State variables for the target element's position and size.
-    var _c = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _c[0], setTargetPosition = _c[1];
-    // Effect for updating the target element's position and size.
-    React.useEffect(function () {
-        var target = document.querySelectorAll("[data-help".concat(props.Target === undefined ? '' : "=\"".concat(props.Target, "\""), "]"));
-        if (target.length === 0) {
-            setTargetPosition({ Height: 0, Top: -999, Left: -999, Width: 0 });
-            return;
-        }
-        var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
-        var newPosition = { Height: targetLocation.height, Top: targetLocation.top, Left: targetLocation.left, Width: targetLocation.width };
-        if (!(0, lodash_1.isEqual)(newPosition, targetPosition))
-            setTargetPosition(newPosition);
-    }, [props.Show]);
-    React.useLayoutEffect(function () {
-        var _a = UpdatePosition(helpMessage, targetPosition), t = _a[0], l = _a[1];
-        setTop(t);
-        setLeft(l);
-    }, [targetPosition]);
-    var zIndex = (props.Zindex === undefined ? 9999 : props.Zindex);
-    return (React.createElement(react_portal_1.Portal, null,
-        React.createElement(WrapperDiv, { className: 'bg-info', Show: props.Show, Top: top, Left: left, ref: helpMessage, Zindex: zIndex, TargetLeft: targetPosition.Left, TargetWidth: targetPosition.Width, Width: targetPosition.Width }, props.children)));
-};
-var UpdatePosition = function (helpMessage, targetPosition) {
-    if (helpMessage.current === null)
-        return [-999, -999];
-    var offset = 5;
-    var windowWidth = window.innerWidth;
-    var top = targetPosition.Top + targetPosition.Height + offset;
-    var left = targetPosition.Left;
-    var width = targetPosition.Width;
-    // If tooltip goes beyond the right viewport boundary, adjust the left position to fit
-    if (left + width >= windowWidth)
-        left = windowWidth - width - offset;
-    // If tooltip goes beyond the left viewport boundary, adjust the left position to fit
-    if (left <= 0)
-        left = offset;
-    return [top, left, width];
-};
-exports.default = HelperMessage;
-var templateObject_1;