@gpa-gemstone/react-forms 1.1.60 → 1.1.62

package/lib/DoubleInput.js

@@ -1,51 +1,55 @@
-"use strict";
-// ******************************************************************************************************
-//  DoubleInput.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/07/2021 - C. Lackner
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-function DoubleInput(props) {
-    return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null, props.Label == null ? (props.Field1 + ' ' + props.Field2) : props.Label),
-        React.createElement("div", { className: "input-group" },
-            React.createElement("input", { type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field1) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
-                    var _a;
-                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field1] = evt.target.value !== '' ? evt.target.value : null, _a)));
-                }, value: props.Record[props.Field1] == null ? '' : props.Record[props.Field1].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
-            React.createElement("input", { type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field2) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
-                    var _a;
-                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field2] = evt.target.value !== '' ? evt.target.value : null, _a)));
-                }, value: props.Record[props.Field2] == null ? '' : props.Record[props.Field2].toString(), disabled: props.Disabled == null ? false : props.Disabled })),
-        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? (props.Field1 + ' ' + props.Field2 + ' is a required field.') : props.Feedback)));
-}
-exports.default = DoubleInput;
+"use strict";
+// ******************************************************************************************************
+//  DoubleInput.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/07/2021 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DoubleInput;
+var React = require("react");
+/**
+ * DoubleInput Component.
+ * A component that renders two input fields, allowing input for two related fields in a single record.
+ */
+function DoubleInput(props) {
+    return (React.createElement("div", { className: "form-group" },
+        React.createElement("label", null, props.Label == null ? (props.Field1 + ' ' + props.Field2) : props.Label),
+        React.createElement("div", { className: "input-group" },
+            React.createElement("input", { type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field1) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
+                    var _a;
+                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field1] = evt.target.value !== '' ? evt.target.value : null, _a)));
+                }, value: props.Record[props.Field1] == null ? '' : props.Record[props.Field1].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
+            React.createElement("input", { type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field2) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
+                    var _a;
+                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field2] = evt.target.value !== '' ? evt.target.value : null, _a)));
+                }, value: props.Record[props.Field2] == null ? '' : props.Record[props.Field2].toString(), disabled: props.Disabled == null ? false : props.Disabled })),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? (props.Field1 + ' ' + props.Field2 + ' is a required field.') : props.Feedback)));
+}

package/lib/EnumCheckBoxes.d.ts

@@ -1,9 +1,41 @@
-/// <reference types="react" />
-export default function EnumCheckBoxes<T>(props: {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Enum: string[];
-    Label?: string;
-    IsDisabled?: (item: string) => boolean;
-}): JSX.Element;
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Array of enumerable values to create checkboxes for
+      * @type {string[]}
+    */
+    Enum: string[];
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Function to determine if a checkbox should be disabled
+      * @param item - The enumeration value
+      * @returns {boolean}
+      * @optional
+    */
+    IsDisabled?: (item: string) => boolean;
+}
+/**
+ * EnumCheckBoxes Component.
+ * Renders a set of checkboxes based on an enumeration, allowing multiple selection.
+ */
+export default function EnumCheckBoxes<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/EnumCheckBoxes.js

@@ -1,58 +1,65 @@
-"use strict";
-// ******************************************************************************************************
-//  EnumCheckBoxes.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/22/2020 - Billy Ernest
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-function EnumCheckBoxes(props) {
-    /* tslint:disable-next-line:no-bitwise */
-    var EquateFlag = function (index) { return ((props.Record[props.Field] / Math.pow(2, index)) & 1) !== 0; };
-    var DecrementFlag = function (index) { return props.Record[props.Field] - Math.pow(2, index); };
-    var IncrementFlag = function (index) { return props.Record[props.Field] + Math.pow(2, index); };
-    return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null, props.Label == null ? props.Field : props.Label),
-        React.createElement("br", null),
-        React.createElement("div", { className: "form-check form-check-inline" },
-            React.createElement("input", { className: "form-check-input", type: "checkbox", checked: props.Record[props.Field] === (Math.pow(2, props.Enum.length) - 1), onChange: function (evt) {
-                    var _a;
-                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? Math.pow(2, props.Enum.length) - 1 : 0, _a)));
-                } }),
-            React.createElement("label", { className: "form-check-label" }, "All")),
-        props.Enum.map(function (flag, i) { return (React.createElement("div", { key: i, className: "form-check form-check-inline" },
-            React.createElement("input", { className: "form-check-input", type: "checkbox", checked: EquateFlag(i), disabled: props.IsDisabled !== undefined ? props.IsDisabled(flag) : false, onChange: function (evt) {
-                    var _a;
-                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? IncrementFlag(i) : DecrementFlag(i), _a)));
-                } }),
-            React.createElement("label", { className: "form-check-label" }, flag))); })));
-}
-exports.default = EnumCheckBoxes;
+"use strict";
+// ******************************************************************************************************
+//  EnumCheckBoxes.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/22/2020 - Billy Ernest
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EnumCheckBoxes;
+var React = require("react");
+/**
+ * EnumCheckBoxes Component.
+ * Renders a set of checkboxes based on an enumeration, allowing multiple selection.
+ */
+function EnumCheckBoxes(props) {
+    // Determine if an enum flag is set.
+    /* tslint:disable-next-line:no-bitwise */
+    var EquateFlag = function (index) { return ((props.Record[props.Field] / Math.pow(2, index)) & 1) !== 0; };
+    // Turn off a flag in the enumeration.
+    var DecrementFlag = function (index) { return props.Record[props.Field] - Math.pow(2, index); };
+    // Turn on a flag in the enumeration.
+    var IncrementFlag = function (index) { return props.Record[props.Field] + Math.pow(2, index); };
+    return (React.createElement("div", { className: "form-group" },
+        React.createElement("label", null, props.Label == null ? props.Field : props.Label),
+        React.createElement("br", null),
+        React.createElement("div", { className: "form-check form-check-inline" },
+            React.createElement("input", { className: "form-check-input", type: "checkbox", checked: props.Record[props.Field] === (Math.pow(2, props.Enum.length) - 1), onChange: function (evt) {
+                    var _a;
+                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? Math.pow(2, props.Enum.length) - 1 : 0, _a)));
+                } }),
+            React.createElement("label", { className: "form-check-label" }, "All")),
+        props.Enum.map(function (flag, i) { return (React.createElement("div", { key: i, className: "form-check form-check-inline" },
+            React.createElement("input", { className: "form-check-input", type: "checkbox", checked: EquateFlag(i), disabled: props.IsDisabled !== undefined ? props.IsDisabled(flag) : false, onChange: function (evt) {
+                    var _a;
+                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? IncrementFlag(i) : DecrementFlag(i), _a)));
+                } }),
+            React.createElement("label", { className: "form-check-label" }, flag))); })));
+}

package/lib/HelperMessage.d.ts

@@ -1,10 +1,37 @@
-import * as React from 'react';
-interface IProps {
-    Show: boolean;
-    Target?: string;
-    Zindex?: number;
-    Color?: string;
-    Background?: string;
-}
-declare const HelperMessage: React.FunctionComponent<IProps>;
-export default HelperMessage;
+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;
+    /**
+    * Text color for the helper message
+    * @type {string}
+    * @optional
+   */
+    Color?: string;
+    /**
+    * Background color for the helper message
+    * @type {string}
+    * @optional
+    */
+    Background?: string;
+}
+/**
+ * HelperMessage Component.
+ * Displays a floating message box.
+ */
+declare const HelperMessage: React.FunctionComponent<IProps>;
+export default HelperMessage;

package/lib/HelperMessage.js

@@ -1,83 +1,93 @@
-"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 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    color: ", ";;\n    background: ", ";\n    top: ", ";\n    left: ", ";\n  width: ", ";\n    border: 1px solid transparent;\n  }\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    color: ", ";;\n    background: ", ";\n    top: ", ";\n    left: ", ";\n  width: ", ";\n    border: 1px solid transparent;\n  }\n  \n  ", ""])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { var _a; return (_a = props.Color) !== null && _a !== void 0 ? _a : '#000'; }, function (props) { var _a; return (_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0'; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Width + "px"; }, function (props) {
-    var _a;
-    return "\n    &::before {\n     border-left: 8px solid transparent;\n     border-right: 8px solid transparent;\n     border-bottom: 8px solid " + ((_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0') + ";\n     left: 50%;\n     top: -6px;\n     margin-left: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  ";
-});
-var HelperMessage = function (props) {
-    var helpMessage = React.useRef(null);
-    var _a = React.useState(0), top = _a[0], setTop = _a[1];
-    var _b = React.useState(0), left = _b[0], setLeft = _b[1];
-    var _c = React.useState(0), width = _c[0], setWidth = _c[1];
-    var _d = React.useState(0), targetLeft = _d[0], setTargetLeft = _d[1];
-    var _e = React.useState(0), targetTop = _e[0], setTargetTop = _e[1];
-    var _f = React.useState(0), targetWidth = _f[0], setTargetWidth = _f[1];
-    var _g = React.useState(0), targetHeight = _g[0], setTargetHeight = _g[1];
-    React.useEffect(function () {
-        var target = document.querySelectorAll("[data-help" + (props.Target === undefined ? '' : "=\"" + props.Target + "\"") + "]");
-        if (target.length === 0) {
-            setTargetHeight(0);
-            setTargetWidth(0);
-            setTargetLeft(-999);
-            setTargetTop(-999);
-        }
-        else {
-            var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
-            setTargetHeight(targetLocation.height);
-            setTargetWidth(targetLocation.width);
-            setTargetLeft(targetLocation.left);
-            setTargetTop(targetLocation.top);
-        }
-    }, [props.Show]);
-    React.useLayoutEffect(function () {
-        var _a = UpdatePosition(), t = _a[0], l = _a[1], w = _a[2];
-        setTop(t);
-        setLeft(l);
-        setWidth(w);
-    });
-    var zIndex = (props.Zindex === undefined ? 9999 : props.Zindex);
-    function UpdatePosition() {
-        if (helpMessage.current === null)
-            return [-999, -999];
-        var offset = 5;
-        var result = [0, 0, 0];
-        result[0] = targetTop + targetHeight + offset;
-        result[1] = targetLeft;
-        result[2] = targetWidth;
-        return result;
-    }
-    return (React.createElement(react_portal_1.Portal, null,
-        React.createElement(WrapperDiv, { Show: props.Show, Top: top, Left: left, Width: width, ref: helpMessage, Zindex: zIndex, Color: props.Color, Background: props.Background }, props.children)));
-};
-exports.default = HelperMessage;
-var templateObject_1;
+"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    color: ", ";;\n    background: ", ";\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    color: ", ";;\n    background: ", ";\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) { var _a; return (_a = props.Color) !== null && _a !== void 0 ? _a : '#000'; }, function (props) { var _a; return (_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0'; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return "".concat(props.Width, "px"); }, function (props) {
+    var _a;
+    return "\n    &::before {\n     border-left: 8px solid transparent;\n     border-right: 8px solid transparent;\n     border-bottom: 8px solid ".concat((_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0', ";\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, { Show: props.Show, Top: top, Left: left, ref: helpMessage, Zindex: zIndex, Color: props.Color, Background: props.Background, 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;

package/lib/Input.d.ts

@@ -1,18 +1,80 @@
-import * as React from 'react';
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Valid: (field: keyof T) => boolean;
-    Label?: string;
-    Feedback?: string;
-    Disabled?: boolean;
-    Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
-    Help?: string | JSX.Element;
-    Style?: React.CSSProperties;
-    AllowNull?: boolean;
-    Size?: 'small' | 'large';
-    DefaultValue?: number;
-}
-export default function Input<T>(props: IProps<T>): JSX.Element;
-export {};
+import * as React from 'react';
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Function to determine the validity of a field
+      * @param field - Field of the record to check
+      * @returns {boolean}
+    */
+    Valid: (field: keyof T) => boolean;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Type of the input field
+      * @type {'number' | 'text' | 'password' | 'email' | 'color' | 'integer'}
+      * @optional
+    */
+    Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+    /**
+      * CSS styles to apply to the form group
+      * @type {React.CSSProperties}
+      * @optional
+    */
+    Style?: React.CSSProperties;
+    /**
+      * Flag to allow null values
+      * @type {boolean}
+      * @optional
+    */
+    AllowNull?: boolean;
+    /**
+      * Size of the input field
+      * @type {'small' | 'large'}
+      * @optional
+    */
+    Size?: 'small' | 'large';
+    /**
+      * Default value for the input field if it's null
+      * @type {number}
+      * @optional
+    */
+    DefaultValue?: number;
+}
+export default function Input<T>(props: IProps<T>): JSX.Element;
+export {};