@gpa-gemstone/react-forms 1.1.113 → 1.1.115

package/lib/AutoCompleteInput.js

@@ -21,6 +21,17 @@
 //       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;
@@ -122,7 +133,7 @@ function AutoCompleteInput(props) {
         }
     };
     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 }),
+        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: {

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,104 @@
+"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 _a, _b;
+    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 }),
+                    React.createElement("button", { className: 'btn', style: ((_a = props.DisableAdd) !== null && _a !== void 0 ? _a : false) || ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, 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)))
+                : null)
+            : null,
+        fieldArray.map(function (r, index) {
+            var _a, _b, _c, _d, _e;
+            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: ((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : 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.js

@@ -1,4 +1,15 @@
 "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");
@@ -101,7 +112,7 @@ function AutoCompleteTextArea(props) {
         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 }),
+        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: {

package/lib/MultiInput.js

@@ -48,6 +48,7 @@ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var HelpIcon_1 = require("./HelpIcon");
 //Only supporting string/number arrays for now
 function MultiInput(props) {
+    var _a, _b;
     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."));
@@ -61,11 +62,16 @@ function MultiInput(props) {
             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 }))
+                    React.createElement(HelpIcon_1.default, { Help: props.Help }),
+                    React.createElement("button", { className: 'btn', style: ((_a = props.DisableAdd) !== null && _a !== void 0 ? _a : false) || ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, 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)))
                 : null)
             : null,
         fieldArray.map(function (r, index) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e;
             return (React.createElement("div", { className: 'row no-gutters', key: index },
                 React.createElement("div", { className: 'col-10' },
                     React.createElement(Input_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', AllowNull: props.AllowNull, Type: props.Type, 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, Setter: function (record) {
@@ -87,7 +93,7 @@ function MultiInput(props) {
                         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 () {
+                        React.createElement("button", { className: 'btn', style: ((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : 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)));

package/lib/MultiSearchableSelect.js

@@ -48,6 +48,7 @@ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var HelpIcon_1 = require("./HelpIcon");
 //Only supporting string/number arrays for now
 function MultiSearchableSelect(props) {
+    var _a, _b;
     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."));
@@ -61,11 +62,16 @@ function MultiSearchableSelect(props) {
             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 }))
+                    React.createElement(HelpIcon_1.default, { Help: props.Help }),
+                    React.createElement("button", { className: 'btn', style: ((_a = props.DisableAdd) !== null && _a !== void 0 ? _a : false) || ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, 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)))
                 : null)
             : null,
         fieldArray.map(function (r, index) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e;
             return (React.createElement("div", { className: 'row align-items-center', key: index },
                 React.createElement("div", { className: 'col-10' },
                     React.createElement(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', 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, Setter: function (record, option) {
@@ -83,7 +89,7 @@ function MultiSearchableSelect(props) {
                         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' : '') },
-                        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 () {
+                        React.createElement("button", { className: 'btn', style: ((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : 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)), newRecords.length - 1, { Label: props.DefaultValue.toString(), Value: props.DefaultValue });

package/lib/SearchableSelect.js

@@ -108,7 +108,8 @@ function SearchableSelect(props) {
         if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
             ops.push({ Value: search, Element: React.createElement(React.Fragment, null,
                     search,
-                    " (Entered Value)"), Label: search });
+                    " ",
+                    React.createElement("span", { className: "badge badge-info", style: { fontSize: '0.75em' } }, "Entered Value")), Label: search });
         //Ensure selectedOption is always at top of the list
         var selected = searchOptions.find(function (f) { return f.Value === props.Record[props.Field]; });
         if (selected != null)

package/lib/ToolTip.js

@@ -219,8 +219,14 @@ var getPosition = function (toolTip, targetPosition, position) {
     return [top, left, arrowPositionPercent, effectivePosition];
 };
 var getTarget = function (target) {
-    var targets = document.querySelectorAll("[data-tooltip".concat(target === undefined ? '' : "=\"".concat(target, "\""), "]"));
-    return targets.length > 0 ? targets[0] : null;
+    try {
+        var targets = document.querySelectorAll("[data-tooltip".concat(target === undefined ? '' : "=\"".concat(target, "\""), "]"));
+        return targets.length > 0 ? targets[0] : null;
+    }
+    catch (_a) {
+        console.warn('Tooltip: Invalid target selector provided. Target elements must have a valid data-tooltip attribute that matches the Target prop of the tooltip.');
+        return null;
+    }
 };
 exports.default = exports.Tooltip;
 var templateObject_1, templateObject_2;

package/lib/index.d.ts

@@ -23,4 +23,5 @@ import MultiSearchableSelect from './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 };
+import AutoCompleteMultiInput from './AutoCompleteMultiInput';
+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, AutoCompleteMultiInput };

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.AutoCompleteMultiInput = 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");
@@ -73,3 +73,5 @@ var AutoCompleteInput_1 = require("./AutoCompleteInput");
 exports.AutoCompleteInput = AutoCompleteInput_1.default;
 var HelpIcon_1 = require("./HelpIcon");
 exports.HelpIcon = HelpIcon_1.default;
+var AutoCompleteMultiInput_1 = require("./AutoCompleteMultiInput");
+exports.AutoCompleteMultiInput = AutoCompleteMultiInput_1.default;

package/package.json

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