@gpa-gemstone/react-forms 1.1.112 → 1.1.113

package/lib/AutoCompleteInput.d.ts

@@ -0,0 +1,24 @@
+import { IProps as IInputProps } from './Input';
+interface IProps<T> extends Omit<IInputProps<T>, 'Type'> {
+    Options: string[];
+}
+export interface IVariable {
+    Start: number;
+    End: number;
+    Variable: string | null;
+}
+export default function AutoCompleteInput<T>(props: IProps<T>): JSX.Element;
+export declare const getSuggestions: (variable: IVariable, text: string, options: string[]) => {
+    Label: string;
+    Value: string;
+}[];
+export declare const getCurrentVariable: (text: string, selection: number) => {
+    Start: number;
+    End: number;
+    Variable: null;
+} | {
+    Start: number;
+    End: number;
+    Variable: string;
+};
+export {};

package/lib/AutoCompleteInput.js

@@ -0,0 +1,214 @@
+"use strict";
+// ******************************************************************************************************
+//  AutoCompleteInput.tsx - Gbtc
+//
+//  Copyright © 2024, 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/21/2026 - Natalie Beatty
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentVariable = exports.getSuggestions = void 0;
+exports.default = AutoCompleteInput;
+var React = require("react");
+var Input_1 = require("./Input");
+var react_portal_1 = require("react-portal");
+var _ = require("lodash");
+function AutoCompleteInput(props) {
+    var autoCompleteInput = React.useRef(null);
+    var inputElement = React.useRef(null);
+    var tableContainer = React.useRef(null);
+    var selectTable = React.useRef(null);
+    var _a = React.useState([]), suggestions = _a[0], setSuggestions = _a[1];
+    var _b = React.useState(null), position = _b[0], setPosition = _b[1];
+    var _c = React.useState(true), show = _c[0], setShow = _c[1];
+    // Handle showing and hiding of the dropdown.
+    var HandleShow = React.useCallback(function (evt) {
+        var _a;
+        // Ignore if disabled or not a mousedown event
+        if ((props.Disabled === undefined ? false : props.Disabled)
+            || evt.type !== 'mousedown') {
+            return;
+        }
+        //ignore the click if it was inside the table or table container
+        if ((selectTable.current != null && selectTable.current.contains(evt.target)) || (tableContainer.current != null && tableContainer.current.contains(evt.target))) {
+            return;
+        }
+        if (inputElement.current !== null && !((_a = inputElement.current) === null || _a === void 0 ? void 0 : _a.contains(evt.target))) {
+            setShow(false);
+        }
+        else {
+            setShow(true);
+        }
+    }, [props.Disabled]);
+    // update dropdown position
+    React.useLayoutEffect(function () {
+        if ((suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) == 0) {
+            setPosition(null);
+            return;
+        }
+        var updatePosition = _.debounce(function () {
+            if (inputElement.current == null) {
+                return;
+            }
+            var rect = inputElement.current.getBoundingClientRect();
+            setPosition({ Top: rect.bottom, Left: rect.left, Width: rect.width, Height: rect.height });
+        }, 200);
+        var handleScroll = function () {
+            if (tableContainer.current == null)
+                return;
+            updatePosition();
+        };
+        updatePosition();
+        window.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', updatePosition);
+        return function () {
+            window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', updatePosition);
+            updatePosition.cancel();
+        };
+    }, [suggestions]);
+    // listen for changes in input caret position
+    React.useEffect(function () {
+        var autoComplete = inputElement.current;
+        if (autoComplete == null)
+            return;
+        autoComplete.addEventListener("keyup", handleCaretPosition);
+        autoComplete.addEventListener("click", handleCaretPosition);
+        window.addEventListener('mousedown', HandleShow, false);
+        return function () {
+            autoComplete.removeEventListener("keyup", handleCaretPosition);
+            autoComplete.removeEventListener("click", handleCaretPosition);
+            window.removeEventListener('mousedown', HandleShow, false);
+        };
+    }, [HandleShow]);
+    // edit input text when suggestion is selected
+    var handleOptionClick = function (option) {
+        var _a, _b, _c, _d, _e;
+        if (inputElement.current == null)
+            return;
+        var currentPos = (_a = inputElement.current.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        var optionLength = option.Value.length;
+        props.Record[props.Field] = option.Value;
+        props.Setter(props.Record);
+        var textLength = (_c = (_b = inputElement.current.textContent) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+        var newCaretPos = (optionLength > textLength ? textLength - 1 : optionLength + currentPos);
+        (_d = inputElement.current) === null || _d === void 0 ? void 0 : _d.focus();
+        (_e = inputElement.current) === null || _e === void 0 ? void 0 : _e.setSelectionRange(newCaretPos, newCaretPos);
+        setSuggestions([]);
+    };
+    // update variable when caret position changes
+    var handleCaretPosition = function () {
+        var _a, _b, _c, _d, _e;
+        if (inputElement.current !== null) {
+            var selection = ((_a = inputElement.current.selectionStart) !== null && _a !== void 0 ? _a : 0);
+            var variable = (0, exports.getCurrentVariable)((_c = (_b = inputElement.current) === null || _b === void 0 ? void 0 : _b.getAttribute('value')) !== null && _c !== void 0 ? _c : "", selection);
+            var suggests = (0, exports.getSuggestions)(variable, (_e = (_d = inputElement.current) === null || _d === void 0 ? void 0 : _d.getAttribute('value')) !== null && _e !== void 0 ? _e : "", props.Options);
+            setSuggestions(suggests);
+        }
+    };
+    return (React.createElement("div", { ref: autoCompleteInput },
+        React.createElement(Input_1.default, { Valid: props.Valid, Record: props.Record, Setter: props.Setter, Field: props.Field, Feedback: props.Feedback, Style: props.Style, AllowNull: props.AllowNull, Size: props.Size, DefaultValue: props.DefaultValue, InputRef: inputElement }),
+        position == null || !show ? null :
+            React.createElement(react_portal_1.Portal, null,
+                React.createElement("div", { ref: tableContainer, className: 'popover', style: {
+                        maxHeight: window.innerHeight - position.Top,
+                        overflowY: 'auto',
+                        padding: '10 5',
+                        display: 'block',
+                        position: 'absolute',
+                        zIndex: 9999,
+                        top: "".concat(position.Top, "px"),
+                        left: "".concat(position.Left, "px"),
+                        minWidth: "".concat(position.Width, "px"),
+                        maxWidth: '100%'
+                    } },
+                    React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
+                        React.createElement("tbody", null, suggestions.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
+                            React.createElement("tr", { key: i, onMouseDown: function (_) { return handleOptionClick(f); } },
+                                React.createElement("td", null, f.Label))); })))))));
+}
+var getSuggestions = function (variable, text, options) {
+    if (!(variable.Variable != null)) {
+        return [];
+    }
+    // if variable is valid option and hasEndBracket, assume it doesn't need autocompletion.
+    if (options.includes(variable.Variable)) {
+        return [];
+    }
+    if (text === "") {
+        return [];
+    }
+    // Find suggestions for the variable
+    var possibleVariables = options.filter(function (v) { var _a; return v.toLowerCase().includes(((_a = variable.Variable) !== null && _a !== void 0 ? _a : "").toLowerCase()); });
+    var before = text.substring(0, (variable.Start) - 1);
+    var after = text.substring(variable.End);
+    var hasEndBracket = (text[variable.End] === '}');
+    // Generate suggestions
+    var suggestions = possibleVariables.map(function (pv) {
+        // Ensure we have braces around the variable and add closing '}' if it was missing
+        var variableWithBraces = hasEndBracket ? "{".concat(pv) : "{".concat(pv, "}");
+        return { Label: "".concat(variableWithBraces).concat(hasEndBracket ? '}' : ''), Value: "".concat(before).concat(variableWithBraces).concat(after) };
+    });
+    return suggestions;
+};
+exports.getSuggestions = getSuggestions;
+var getCurrentVariable = function (text, selection) {
+    var thisVariable = {
+        Start: 0,
+        End: 0,
+        Variable: null
+    };
+    if (text === "") {
+        return thisVariable;
+    }
+    // easy returns if selection start could not have a curly bracket before it
+    if (selection === null || selection < 0 || selection > text.length) {
+        return thisVariable;
+    }
+    // check backwards from the caret to find the nearest open curly bracket or space
+    var start = selection;
+    while (start > 0) {
+        // check for open curly bracket. if found, assign and break as start of valid variable expression
+        if (/{/g.test(text[start - 1])) {
+            break;
+        }
+        // if space is encountered first, return
+        if (/[\s}]/g.test(text[start - 1])) {
+            return thisVariable;
+        }
+        start--;
+    }
+    // if no variable found, return
+    if (start == 0) {
+        return thisVariable;
+    }
+    thisVariable.Start = start;
+    // then, get the rest of the word.
+    var end = start !== null && start !== void 0 ? start : 0;
+    while (end < text.length) {
+        if (/[}{\s}]/.test(text[end])) {
+            break;
+        }
+        end++;
+    }
+    thisVariable.End = end;
+    // get variable as substring of text
+    var variable = text.substring(start, end);
+    return { Start: thisVariable.Start, End: thisVariable.End, Variable: variable };
+};
+exports.getCurrentVariable = getCurrentVariable;

package/lib/AutoCompleteTextArea.d.ts

@@ -0,0 +1,6 @@
+import { IProps as ITextAreaProps } from './TextArea';
+interface IAutoCompleteProps<T> extends ITextAreaProps<T> {
+    Options: string[];
+}
+export default function AutoCompleteTextArea<T>(props: IAutoCompleteProps<T>): JSX.Element;
+export {};

package/lib/AutoCompleteTextArea.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AutoCompleteTextArea;
+var React = require("react");
+var TextArea_1 = require("./TextArea");
+var react_portal_1 = require("react-portal");
+var _ = require("lodash");
+var AutoCompleteInput_1 = require("./AutoCompleteInput");
+function AutoCompleteTextArea(props) {
+    var autoCompleteTextArea = React.useRef(null);
+    var tableContainer = React.useRef(null);
+    var selectTable = React.useRef(null);
+    var textAreaElement = React.useRef(null);
+    var _a = React.useState([]), suggestions = _a[0], setSuggestions = _a[1];
+    var _b = React.useState(null), position = _b[0], setPosition = _b[1];
+    var _c = React.useState({ Start: 0, End: 0, Variable: "" }), variable = _c[0], setVariable = _c[1];
+    var _d = React.useState(true), show = _d[0], setShow = _d[1];
+    // Handle showing and hiding of the dropdown.
+    var HandleShow = React.useCallback(function (evt) {
+        var _a;
+        // Ignore if disabled or not a mousedown event
+        if ((props.Disabled === undefined ? false : props.Disabled)
+            || evt.type !== 'mousedown') {
+            return;
+        }
+        //ignore the click if it was inside the table or table container
+        if ((selectTable.current != null && selectTable.current.contains(evt.target)) || (tableContainer.current != null && tableContainer.current.contains(evt.target))) {
+            return;
+        }
+        if (textAreaElement.current !== null && !((_a = textAreaElement.current) === null || _a === void 0 ? void 0 : _a.contains(evt.target))) {
+            setShow(false);
+        }
+        else {
+            setShow(true);
+        }
+    }, [props.Disabled]);
+    // add listeners to follow caret
+    React.useEffect(function () {
+        var autoComplete = textAreaElement.current;
+        if (autoComplete == null)
+            return;
+        autoComplete.addEventListener("keyup", handleCaretPosition);
+        autoComplete.addEventListener("click", handleCaretPosition);
+        return function () {
+            autoComplete.removeEventListener("keyup", handleCaretPosition);
+            autoComplete.removeEventListener("click", handleCaretPosition);
+        };
+    }, []);
+    // set position of the suggestion dropdown
+    React.useLayoutEffect(function () {
+        if ((suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) == 0) {
+            setPosition(null);
+            return;
+        }
+        var updatePosition = _.debounce(function () {
+            if (textAreaElement.current == null) {
+                return;
+            }
+            var rect = textAreaElement.current.getBoundingClientRect();
+            var _a = getTextDimensions(textAreaElement, variable.Start - 1, "\n"), caret_X = _a[0], caret_Y = _a[1];
+            setPosition({ Top: rect.top + caret_Y, Left: rect.left + caret_X, Width: rect.width, Height: rect.height });
+        }, 200);
+        var handleScroll = function () {
+            if (tableContainer.current == null)
+                return;
+            updatePosition();
+        };
+        updatePosition();
+        window.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('mousedown', HandleShow, false);
+        return function () {
+            window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('mousedown', HandleShow, false);
+            updatePosition.cancel();
+        };
+    }, [suggestions, HandleShow]);
+    // update variable and suggestions when caret position changes
+    var handleCaretPosition = function () {
+        var _a, _b, _c, _d;
+        if (textAreaElement.current !== null) {
+            var selection = textAreaElement.current.selectionStart;
+            var variable_1 = (0, AutoCompleteInput_1.getCurrentVariable)((_b = (_a = textAreaElement.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "", selection);
+            setVariable(variable_1);
+            var suggests = (0, AutoCompleteInput_1.getSuggestions)(variable_1, (_d = (_c = textAreaElement.current) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : "", props.Options);
+            setSuggestions(suggests);
+        }
+    };
+    // edit text area contents with selected suggestion
+    var handleOptionClick = function (option) {
+        var _a, _b, _c, _d;
+        var currentPos = textAreaElement.current !== null ? textAreaElement.current.selectionStart : 0;
+        var optionLength = option.Value.length;
+        props.Record[props.Field] = option.Value;
+        props.Setter(props.Record);
+        var textLength = textAreaElement.current !== null ? (_b = (_a = textAreaElement.current.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
+        var newCaretPos = (optionLength > textLength ? textLength - 1 : optionLength + currentPos);
+        (_c = textAreaElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+        (_d = textAreaElement.current) === null || _d === void 0 ? void 0 : _d.setSelectionRange(newCaretPos, newCaretPos);
+        setSuggestions([]);
+    };
+    return (React.createElement("div", { ref: autoCompleteTextArea },
+        React.createElement(TextArea_1.default, { Valid: props.Valid, Record: props.Record, Setter: props.Setter, Field: props.Field, Rows: props.Rows, TextAreaRef: textAreaElement, SpellCheck: false }),
+        position == null || !show ? React.createElement(React.Fragment, null) :
+            React.createElement(react_portal_1.Portal, null,
+                React.createElement("div", { ref: tableContainer, className: 'popover', style: {
+                        maxHeight: window.innerHeight - position.Top,
+                        overflowY: 'auto',
+                        padding: '10 5',
+                        display: 'block',
+                        position: 'absolute',
+                        zIndex: 9999,
+                        maxWidth: '100%',
+                        top: "".concat(position.Top, "px"),
+                        left: "".concat(position.Left, "px"),
+                        minWidth: "".concat(position.Width, "px")
+                    } },
+                    React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
+                        React.createElement("tbody", null, suggestions.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
+                            React.createElement("tr", { key: i, onMouseDown: function (_) { return handleOptionClick(f); } },
+                                React.createElement("td", null, f.Label))); })))))));
+}
+var getTextDimensions = function (textArea, selection, prefix) {
+    var _a;
+    if (textArea.current == null)
+        return [0, 0];
+    var textarea = textArea.current;
+    if (textarea.parentNode == null)
+        return [0, 0];
+    var hiddenDiv = document.createElement('div');
+    var style = getComputedStyle(textarea);
+    Array.from(style).forEach(function (propertyName) {
+        var value = style.getPropertyValue(propertyName);
+        hiddenDiv.style.setProperty(propertyName, value);
+    });
+    // Set text content up to caret
+    var beforeSelection = textarea.value.substring(0, selection);
+    var afterSelection = (_a = textarea.value.substring(selection)) !== null && _a !== void 0 ? _a : '.';
+    hiddenDiv.textContent = (prefix !== null && prefix !== void 0 ? prefix : "") + beforeSelection;
+    // Create a span to mark caret position
+    var span = document.createElement('span');
+    span.textContent = afterSelection[0];
+    hiddenDiv.appendChild(span);
+    textarea.parentNode.appendChild(hiddenDiv);
+    // Get caret's vertical position relative to textarea
+    var caretX = span.offsetLeft - hiddenDiv.offsetLeft - hiddenDiv.scrollLeft;
+    var caretY = span.offsetTop - hiddenDiv.offsetTop - textarea.scrollTop;
+    textarea.parentNode.removeChild(hiddenDiv);
+    return [caretX, caretY];
+};

package/lib/CheckBox.d.ts

@@ -1,2 +1,3 @@
 import { Gemstone } from '@gpa-gemstone/application-typings';
-export default function CheckBox<T>(props: Gemstone.TSX.Interfaces.IBaseFormProps<T>): JSX.Element;
+declare const CheckBox: <T>(props: Gemstone.TSX.Interfaces.IBaseFormProps<T>) => JSX.Element;
+export default CheckBox;

package/lib/CheckBox.js

@@ -33,20 +33,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = CheckBox;
 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");
-function CheckBox(props) {
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
-    // Runs once, setting a unique GUID for each checkbox instance.
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
+var HelpIcon_1 = require("./HelpIcon");
+var CheckBox = function (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" },
         React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
@@ -54,13 +44,10 @@ function CheckBox(props) {
                 record[props.Field] = evt.target.checked;
                 props.Setter(record);
             }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled }),
-        showHelpIcon || showLabel ?
-            React.createElement("label", { className: "form-check-label 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,
-        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));
-}
+};
+exports.default = CheckBox;

package/lib/ColorPicker.d.ts

@@ -40,5 +40,5 @@ interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, "Set
     */
     Triangle?: 'hide' | 'top';
 }
-export default function ColorPicker<T>(props: IProps<T>): JSX.Element;
-export {};
+declare const ColorPicker: <T>(props: IProps<T>) => JSX.Element;
+export default ColorPicker;

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)));
 }

package/lib/TimePicker.js

@@ -35,24 +35,17 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DatePicker;
 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 DatePicker(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 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,
-        React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, 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,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ToggleSwitch;
 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 ToggleSwitch(props) {
-    var helpID = React.useState((0, helper_functions_1.CreateGuid)())[0];
     var switchID = 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: "custom-control custom-switch form-group", style: props.Style },
         React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
@@ -53,10 +49,5 @@ function ToggleSwitch(props) {
             }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled, id: switchID }),
         React.createElement("label", { className: "custom-control-label d-flex align-items-center", htmlFor: switchID },
             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": helpID },
-                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 })),
-                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpID, Zindex: 9999, Class: "info", Position: "top" }, props.Help))
-                : null)));
+            React.createElement(HelpIcon_1.default, { Help: props.Help }))));
 }

package/lib/index.d.ts

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

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiSearchableSelect = 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;
+exports.AutoCompleteInput = exports.AutoCompleteTextArea = exports.HelpIcon = exports.MultiSearchableSelect = 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");
@@ -67,3 +67,9 @@ var ToolTip_1 = require("./ToolTip");
 exports.ToolTip = ToolTip_1.default;
 var MultiSearchableSelect_1 = require("./MultiSearchableSelect");
 exports.MultiSearchableSelect = MultiSearchableSelect_1.default;
+var AutoCompleteTextArea_1 = require("./AutoCompleteTextArea");
+exports.AutoCompleteTextArea = AutoCompleteTextArea_1.default;
+var AutoCompleteInput_1 = require("./AutoCompleteInput");
+exports.AutoCompleteInput = AutoCompleteInput_1.default;
+var HelpIcon_1 = require("./HelpIcon");
+exports.HelpIcon = HelpIcon_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.112",
+  "version": "1.1.113",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",