@gpa-gemstone/react-forms 1.1.111 → 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;