@gpa-gemstone/react-forms 1.1.112 → 1.1.114

package/lib/ColorPicker.js

@@ -37,26 +37,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ColorPicker;
 var React = require("react");
 var react_color_1 = require("react-color");
 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");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var ToolTip_1 = require("./ToolTip");
+var HelpIcon_1 = require("./HelpIcon");
 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;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: currentColor;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: currentColor;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"])), function (props) { return props.Show ? 'auto' : 'none'; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); });
-function ColorPicker(props) {
+var ColorPicker = function (props) {
     var _a, _b, _c, _d, _e;
-    var guid = React.useState(helper_functions_1.CreateGuid)[0];
-    var _f = React.useState(false), showHelp = _f[0], setShowHelp = _f[1];
     var toolTipRef = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var _g = React.useState(0), top = _g[0], setTop = _g[1];
-    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
-    var _j = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _j[0], setTargetPosition = _j[1];
-    var _k = React.useState(false), show = _k[0], setShow = _k[1];
+    var _f = React.useState(0), top = _f[0], setTop = _f[1];
+    var _g = React.useState(0), left = _g[0], setLeft = _g[1];
+    var _h = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _h[0], setTargetPosition = _h[1];
+    var _j = React.useState(false), show = _j[0], setShow = _j[1];
     var colors = (_a = props.Colors) !== null && _a !== void 0 ? _a : [
         "#A30000", "#0029A3", "#007A29", "#d3d3d3", "#FF0000",
         "#0066CC", "#33CC33", "#4287f5", "#edc240", "#afd8f8",
@@ -76,16 +72,14 @@ function ColorPicker(props) {
             setLeft(l);
         }
     });
+    // Variables to control the rendering of label and help icon.
+    var showLabel = props.Label !== "";
     var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { className: "form-group ", style: props.Style },
-        props.Help !== undefined || props.Label !== "" ?
+        showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
-                React.createElement("span", null, props.Label !== "" ? label : ''),
-                props.Help !== undefined && (React.createElement("span", { className: "ml-2 d-flex align-items-center", 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,
-        props.Help !== undefined ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
+                React.createElement("span", null, showLabel ? label : ''),
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
         React.createElement("button", { disabled: (_b = props.Disabled) !== null && _b !== void 0 ? _b : false, ref: buttonRef, className: "btn btn-block form-control".concat(props.Valid == null || props.Valid(props.Field) ? '' : ' is-invalid'), "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: __assign(__assign({}, props.Style), { backgroundColor: props.Record[props.Field], color: "#ffffff" }) }, (_c = props.Record[props.Field]) !== null && _c !== void 0 ? _c : ""),
         React.createElement(react_portal_1.Portal, null, !((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
@@ -97,7 +91,7 @@ function ColorPicker(props) {
                     }, triangle: (_e = props.Triangle) !== null && _e !== void 0 ? _e : 'hide' }))
             : React.createElement(React.Fragment, null)),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
-}
+};
 var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, targetWidth) {
     if (ref.current === null)
         return [-999, -999];
@@ -127,4 +121,5 @@ var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, target
     }
     return result;
 };
+exports.default = ColorPicker;
 var templateObject_1;

package/lib/DateTimeUI/DateTimePicker.js

@@ -41,7 +41,7 @@ var moment = require("moment");
 var DateTimePopup_1 = require("./DateTimePopup");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var ToolTip_1 = require("../ToolTip");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("../HelpIcon");
 /**
  * Component that allows a user to pick a date or datetime.
 */
@@ -59,14 +59,12 @@ function DateTimePickerBase(props) {
     var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
     // Parse the date from the record.
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
-    var helpGuid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _e = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _e[0], setBoxRecord = _e[1];
-    var _f = React.useState(parse(props.Record)), pickerRecord = _f[0], setPickerRecord = _f[1];
-    var _g = React.useState(""), feedbackMessage = _g[0], setFeedbackMessage = _g[1];
-    var _h = React.useState(0), top = _h[0], setTop = _h[1];
-    var _j = React.useState(0), left = _j[0], setLeft = _j[1];
+    var _d = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _d[0], setBoxRecord = _d[1];
+    var _e = React.useState(parse(props.Record)), pickerRecord = _e[0], setPickerRecord = _e[1];
+    var _f = React.useState(""), feedbackMessage = _f[0], setFeedbackMessage = _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 allowNull = React.useMemo(function () { var _a; return (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false; }, [props.AllowEmpty]);
     React.useEffect(function () {
         if (props.Record[props.Field] != null) {
@@ -170,7 +168,6 @@ function DateTimePickerBase(props) {
     }
     // Variables for rendering labels and help icons.
     var showLabel = props.Label !== "";
-    var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
     var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
     var IsValid = function () {
@@ -199,14 +196,10 @@ function DateTimePickerBase(props) {
         setIsTextOverflowing(inputWidth > width);
     }, [width, boxRecord, step]);
     return (React.createElement("div", { className: "form-group", ref: divRef },
-        showHelpIcon || showLabel ?
+        showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpGuid },
-                    React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
-            : null,
-        showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpGuid, Class: "info", Position: "top" }, props.Help)
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
         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);

package/lib/HelpIcon.d.ts

@@ -0,0 +1,29 @@
+interface IProps {
+    /**
+     * Help content to display in the tooltip.
+     * If undefined, nothing is rendered.
+     * @type {string | JSX.Element}
+     */
+    Help?: string | JSX.Element;
+    /**
+     * Optional icon size in pixels. Defaults to 20.
+     * @type {number}
+     */
+    Size?: number;
+    /**
+     * Optional icon color. Defaults to 'var(--info)'.
+     * @type {string}
+     */
+    Color?: string;
+    /**
+     * Optional CSS class for the icon.
+     * @type {string}
+     */
+    Class?: string;
+}
+/**
+ * HelpIcon component.
+ * Renders a question-mark icon that displays a tooltip on hover.
+ */
+declare const HelpIcon: (props: IProps) => JSX.Element | null;
+export default HelpIcon;

package/lib/HelpIcon.js

@@ -0,0 +1,44 @@
+"use strict";
+// ******************************************************************************************************
+//  HelpIcon.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:
+//  ----------------------------------------------------------------------------------------------------
+//  02/19/2026 - Preston Crawford
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var ToolTip_1 = require("./ToolTip");
+/**
+ * HelpIcon component.
+ * Renders a question-mark icon that displays a tooltip on hover.
+ */
+var HelpIcon = function (props) {
+    var _a, _b, _c;
+    var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
+    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
+    if (props.Help == null || props.Help === '')
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: (_a = props.Class) !== null && _a !== void 0 ? _a : "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
+            React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: (_b = props.Color) !== null && _b !== void 0 ? _b : "var(--info)", Size: (_c = props.Size) !== null && _c !== void 0 ? _c : 20 })),
+        React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "top" }, props.Help)));
+};
+exports.default = HelpIcon;

package/lib/Input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Function to determine the validity of a field
       * @param field - Field of the record to check
@@ -43,6 +43,11 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
       * @optional
     */
     DefaultValue?: number;
+    /**
+     * Optional reference to internal input for features like autocomplete.
+     * @type {React.RefObject<HTMLInputElement>}
+     * @optional
+     */
+    InputRef?: React.RefObject<HTMLInputElement>;
 }
 export default function Input<T>(props: IProps<T>): JSX.Element;
-export {};

package/lib/Input.js

@@ -37,18 +37,11 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Input;
 var React = require("react");
-var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 function Input(props) {
     var internal = React.useRef(false);
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
-    var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
-    // Effect to generate a unique ID for the component.
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
+    var _a = React.useState(''), heldVal = _a[0], setHeldVal = _a[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
     // Handle changes to the record's field value.
     React.useEffect(function () {
         var rawValue = props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
@@ -102,18 +95,13 @@ function Input(props) {
     }
     // Variables to control the rendering of label and help icon.
     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 " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.Style },
-        showHelpIcon || showLabel ?
+        showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", 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,
-        showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
-        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("input", { ref: props.InputRef, 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,17 +34,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 function InputWithButton(props) {
     var internal = React.useRef(false);
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
-    var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
+    var _a = React.useState(''), heldVal = _a[0], setHeldVal = _a[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
     React.useEffect(function () {
         if (!internal.current) {
             setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
@@ -89,19 +83,12 @@ function InputWithButton(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 " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.InputStyle },
-        showHelpIcon || showLabel ?
-            React.createElement("label", { className: 'd-flex align-items-center' },
+        showLabel ?
+            React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon ?
-                    React.createElement("span", { className: "ml-2 d-flex align-items-center", 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(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
         React.createElement("div", { className: "input-group" },
             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' }),

package/lib/MultiInput.js

@@ -44,34 +44,25 @@ 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 ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelpIcon_1 = require("./HelpIcon");
 //Only supporting string/number arrays for now
 function MultiInput(props) {
-    var _a;
-    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     var fieldArray = props.Record[props.Field];
     if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
         console.warn("MultiInput: ".concat(props.Field.toString(), " is not of type array."));
         return React.createElement(React.Fragment, null);
     }
+    // Variables to control the rendering of label and help icon.
+    var showLabel = props.Label !== "";
+    var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement(React.Fragment, null,
         fieldArray.length === 0 ?
-            React.createElement(React.Fragment, null,
-                React.createElement("label", { className: 'd-flex align-items-center' },
-                    React.createElement("span", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
-                    props.Help != null ?
-                        React.createElement("span", { className: "ml-2 d-flex align-items-center", 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,
-                    React.createElement("button", { className: 'btn', onClick: function () {
-                            var _a;
-                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
-                        } },
-                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
-                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
+            React.createElement(React.Fragment, null, showLabel ?
+                React.createElement("label", { className: "d-flex align-items-center" },
+                    React.createElement("span", null, showLabel ? label : ''),
+                    React.createElement(HelpIcon_1.default, { Help: props.Help }))
+                : null)
             : null,
         fieldArray.map(function (r, index) {
             var _a, _b, _c, _d, _e, _f;

package/lib/MultiSearchableSelect.js

@@ -44,34 +44,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var SearchableSelect_1 = require("./SearchableSelect");
-var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelpIcon_1 = require("./HelpIcon");
 //Only supporting string/number arrays for now
 function MultiSearchableSelect(props) {
-    var _a;
-    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     var fieldArray = props.Record[props.Field];
     if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
         console.warn("MultiInput: ".concat(props.Field.toString(), " is not of type array."));
         return React.createElement(React.Fragment, null);
     }
+    // Variables to control the rendering of label and help icon.
+    var showLabel = props.Label !== "";
+    var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement(React.Fragment, null,
         fieldArray.length === 0 ?
-            React.createElement(React.Fragment, null,
-                React.createElement("label", { className: 'd-flex align-items-center' },
-                    React.createElement("span", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
-                    props.Help != null ?
-                        React.createElement("span", { className: "ml-2 d-flex align-items-center", 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,
-                    React.createElement("button", { className: 'btn', onClick: function () {
-                            var _a;
-                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)), 0, { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
-                        } },
-                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
-                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
+            React.createElement(React.Fragment, null, showLabel ?
+                React.createElement("label", { className: "d-flex align-items-center" },
+                    React.createElement("span", null, showLabel ? label : ''),
+                    React.createElement(HelpIcon_1.default, { Help: props.Help }))
+                : null)
             : null,
         fieldArray.map(function (r, index) {
             var _a, _b, _c, _d, _e, _f;

package/lib/MutliCheckBoxSelect.js

@@ -27,7 +27,7 @@ var React = require("react");
 var ToolTip_1 = require("./ToolTip");
 var react_portal_1 = require("react-portal");
 var _ = require("lodash");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 var MultiSelect = function (props) {
     var _a;
     // State hooks for managing the visibility of the dropdown and help message.
@@ -35,14 +35,11 @@ var MultiSelect = function (props) {
     var selectTable = React.useRef(null);
     var tableContainer = React.useRef(null);
     var _b = React.useState(false), show = _b[0], setShow = _b[1];
-    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
-    var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
+    var _c = React.useState(false), showItems = _c[0], setShowItems = _c[1];
     var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var helperGuid = React.useState((0, helper_functions_1.CreateGuid)())[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]);
-    var _e = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _e[0], setPosition = _e[1];
+    var _d = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _d[0], setPosition = _d[1];
     React.useEffect(function () {
         var updatePosition = _.debounce(function () {
             if (multiSelect.current != null) {
@@ -90,17 +87,11 @@ var MultiSelect = function (props) {
         };
     }, []);
     return (React.createElement("div", { className: "form-group" },
-        showLabel || showHelpIcon ?
+        showLabel ?
             React.createElement("label", { className: 'd-flex align-items-center' },
                 React.createElement("span", null, showLabel ?
                     (props.Label === undefined ? 'Select' : props.Label) : ''),
-                showHelpIcon ?
-                    React.createElement("span", { className: "ml-2 d-flex align-items-center", 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(ToolTip_1.default, { Show: showHelp, Target: helperGuid, Class: "info", Position: "top" }, props.Help)
-            : null,
+                React.createElement(HelpIcon_1.default, { Help: props.Help })) : null,
         ((_a = props.ShowToolTip) !== null && _a !== void 0 ? _a : false) ?
             React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "top" },
                 React.createElement("p", null, "Selected Options:"),

package/lib/RadioButtons.js

@@ -35,24 +35,13 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RadioButtons;
 var React = require("react");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var ToolTip_1 = require("./ToolTip");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 function RadioButtons(props) {
-    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
-    // Variables to control the rendering of label and help icon.
-    var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { className: "form-group", style: props.Style },
         React.createElement("label", { className: "form-check-label w-100 d-flex align-items-center" },
             React.createElement("span", null, label),
-            showHelpIcon ?
-                React.createElement(React.Fragment, null,
-                    React.createElement("span", { className: "ml-2 d-flex align-items-center", 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 })),
-                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help))
-                : null),
+            React.createElement(HelpIcon_1.default, { Help: props.Help })),
         props.Options.map(function (option, index) {
             var _a;
             return (React.createElement("div", { key: index, className: "form-check ".concat(props.Position == 'vertical' ? '' : 'form-check-inline') },

package/lib/Select.js

@@ -37,13 +37,9 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Select;
 var React = require("react");
-var ToolTip_1 = require("./ToolTip");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 function Select(props) {
     var _a;
-    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     // Effect to validate the current value against the available options.
     React.useEffect(function () {
         var _a;
@@ -74,17 +70,12 @@ function Select(props) {
     }
     // Variables to control the rendering of label and help icon.
     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" },
-        showHelpIcon || showLabel ?
+        showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", 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,
-        showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
         React.createElement("select", { className: "form-control", onChange: function (evt) {
                 var val = evt.target.value;

package/lib/StylableSelect.js

@@ -35,12 +35,11 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = StylableSelect;
 var React = require("react");
-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");
 var _ = require("lodash");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 function StylableSelect(props) {
     var _a, _b, _c, _d;
     // State hooks and ref for managing component state and interactions.
@@ -129,17 +128,12 @@ function StylableSelect(props) {
     };
     // Variables to control the rendering of label and help icon.
     var showLabel = props.Label !== "";
-    var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { ref: stylableSelect, className: "form-group", style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
-        showHelpIcon || showLabel ?
+        showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon && (React.createElement("span", { onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid, className: "ml-2 d-flex align-items-center" },
-                    React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
-            : null,
-        props.Help !== undefined ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
         React.createElement("button", { type: "button", style: __assign({ padding: '.375rem .75rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "dropdown-toggle form-control ".concat(((_c = (_b = props.Valid) === null || _b === void 0 ? void 0 : _b.call(props, props.Field)) !== null && _c !== void 0 ? _c : true) ? '' : 'is-invalid'), onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
             React.createElement("div", { style: props.Style }, (_d = props.Options[selectedOptionIndex]) === null || _d === void 0 ? void 0 : _d.Element)),

package/lib/TextArea.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Number of rows for the textarea
       * @type {number}
@@ -23,6 +24,17 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
       * @optional
     */
     Help?: string | JSX.Element;
+    /**
+     * Optional reference to internal text area for features like autocomplete.
+     * @type {React.RefObject<HTMLTextAreaElement>}
+     * @optional
+     */
+    TextAreaRef?: React.RefObject<HTMLTextAreaElement>;
+    /**
+     * Optional setting to enable/disable spellcheck.
+     * @type {boolean}
+     * @optional
+     */
+    SpellCheck?: boolean;
 }
 export default function TextArea<T>(props: IProps<T>): JSX.Element;
-export {};

package/lib/TextArea.js

@@ -38,14 +38,14 @@ exports.default = TextArea;
 // ******************************************************************************************************
 var React = require("react");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var ToolTip_1 = require("./ToolTip");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
 function TextArea(props) {
+    var _a;
     // Internal ref and state hooks for managing the component state.
     var internal = React.useRef(false);
     var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
-    var _b = React.useState(''), heldVal = _b[0], setHeldVal = _b[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1];
     // Effect to handle changes to the record's field value.
     React.useEffect(function () {
         if (!internal.current) {
@@ -62,18 +62,13 @@ function TextArea(props) {
     }
     // Variables to control the rendering of label and help icon.
     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" },
-        showHelpIcon || showLabel ?
+        showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", 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 }))))
+                React.createElement(HelpIcon_1.default, { Help: props.Help }))
             : null,
-        showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, 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("textarea", { ref: props.TextAreaRef, 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, spellCheck: (_a = props.SpellCheck) !== null && _a !== void 0 ? _a : true }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
 }