@gpa-gemstone/react-forms 1.1.112 → 1.1.114

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,225 @@
+"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.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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, __assign({}, props, { 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/AutoCompleteMultiInput.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, 'Valid' | 'Feedback'> {
+    /**
+    * CSS styles to apply to the Input component
+    * @type {React.CSSProperties}
+    * @optional
+    */
+    Style?: React.CSSProperties;
+    /**
+      * Default value to use when adding an item and when value is null
+      * @type {number | string}
+    */
+    DefaultValue: number | string;
+    /**
+      * Flag to allow null values
+      * @type {boolean}
+      * @optional
+    */
+    AllowNull?: boolean;
+    /**
+      * Function to determine the validity of a field
+      * @param value - The value of the item to check
+      * @param index - The index of the item in the array
+      * @param arr - The full array of items
+      * @returns {boolean}
+    */
+    ItemValid?: (value: string | number, index: number, arr: Array<string | number>) => boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @param value - The value of the item to check
+      * @param index - The index of the item in the array
+      * @param arr - The full array of items
+      * @returns {string | undefined}
+    */
+    ItemFeedback?: (value: string | number, index: number, arr: Array<string | number>) => string | undefined;
+    /**
+     * Flag to disable add button
+     */
+    DisableAdd?: boolean;
+    /**
+     * Flag to disable all input fields
+     */
+    Disabled?: boolean;
+    /**
+     * List of autocomplete suggestion options
+     * @type {string[]}
+     */
+    Options: string[];
+}
+declare function AutoCompleteMultiInput<T>(props: IProps<T>): JSX.Element;
+export default AutoCompleteMultiInput;

package/lib/AutoCompleteMultiInput.js

@@ -0,0 +1,98 @@
+"use strict";
+// ******************************************************************************************************
+//  AutoCompleteMultiInput.tsx - Gbtc
+//
+//  Copyright © 2026, 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/26/2026 - Preston Crawford
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var AutoCompleteInput_1 = require("./AutoCompleteInput");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var HelpIcon_1 = require("./HelpIcon");
+function AutoCompleteMultiInput(props) {
+    var fieldArray = props.Record[props.Field];
+    if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
+        console.warn("AutoCompleteMultiInput: ".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, 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;
+            return (React.createElement("div", { className: 'row no-gutters', key: index },
+                React.createElement("div", { className: 'col-10' },
+                    React.createElement(AutoCompleteInput_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', AllowNull: props.AllowNull, Help: index === 0 ? props.Help : undefined, Feedback: (_b = (_a = props.ItemFeedback) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : undefined, Valid: function () { var _a, _b; return (_b = (_a = props.ItemValid) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : true; }, Style: props.Style, Disabled: props.Disabled, DefaultValue: typeof props.DefaultValue === 'number' ? props.DefaultValue : undefined, Options: props.Options, Setter: function (record) {
+                            var _a;
+                            var _b;
+                            var newArray = __spreadArray([], fieldArray, true);
+                            if (!((_b = props.AllowNull) !== null && _b !== void 0 ? _b : true) && record[index] === null)
+                                newArray[index] = props.DefaultValue;
+                            else
+                                newArray[index] = record[index];
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
+                        } })),
+                React.createElement("div", { className: "col-".concat(index === __spreadArray([], fieldArray, true).length - 1 ? 1 : 2, " ").concat(index === 0 ? 'd-flex align-items-center justify-content-center' : '') },
+                    React.createElement("button", { className: 'btn', style: ((_c = props.Disabled) !== null && _c !== void 0 ? _c : false) ? { display: 'none' } : undefined, onClick: function () {
+                            var _a;
+                            var newRecords = __spreadArray([], fieldArray, true).filter(function (_, i) { return i !== index; });
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
+                        } },
+                        React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: 'red' }))),
+                index === __spreadArray([], fieldArray, true).length - 1 ?
+                    React.createElement("div", { className: "col-1 ".concat(index === 0 ? 'd-flex align-items-center justify-content-center' : '') },
+                        React.createElement("button", { className: 'btn', style: ((_f = (((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : false))) !== null && _f !== void 0 ? _f : false) ? { display: 'none' } : undefined, onClick: function () {
+                                var _a;
+                                var newRecords = __spreadArray(__spreadArray([], __spreadArray([], fieldArray, true), true), [props.DefaultValue], false);
+                                props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
+                            } },
+                            React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null)))
+                    : null));
+        })));
+}
+exports.default = AutoCompleteMultiInput;

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,162 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = 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, __assign({}, props, { 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;