@gpa-gemstone/react-forms 1.1.77 → 1.1.79

package/lib/ArrayCheckBoxes.d.ts

@@ -1,19 +1,5 @@
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Array of checkboxes with their IDs and labels
       * @type {{ ID: string; Label: string }[]}
@@ -22,12 +8,6 @@ interface IProps<T> {
         ID: string;
         Label: string;
     }[];
-    /**
-    * Label to display for the form, defaults to the Field prop
-    * @type {string}
-    * @optional
-  */
-    Label?: string;
 }
 export default function ArrayCheckBoxes<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/ArrayMultiSelect.d.ts

@@ -1,15 +1,6 @@
 import * as React from 'react';
-interface IProps<T> {
-    /**
-        * Record to be used in form
-        * @type {T}
-      */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Options for the select dropdown
       * @type {{ Value: string; Label: string }[]}
@@ -18,23 +9,6 @@ interface IProps<T> {
         Value: string;
         Label: string;
     }[];
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
     /**
       * CSS styles to apply to the select element
       * @type {React.CSSProperties}

package/lib/CheckBox.d.ts

@@ -1,37 +1,2 @@
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
-    /**
-      * Help message or element to display
-      * @type {string | JSX.Element}
-      * @optional
-    */
-    Help?: string | JSX.Element;
-}
-export default function CheckBox<T>(props: IProps<T>): JSX.Element;
-export {};
+import { Gemstone } from '@gpa-gemstone/application-typings';
+export default function CheckBox<T>(props: Gemstone.TSX.Interfaces.IBaseFormProps<T>): JSX.Element;

package/lib/DatePicker.d.ts

@@ -1,17 +1,12 @@
 import * as moment from 'moment';
 import { Accuracy } from './DateTimeUI/Clock';
+import { Gemstone } from '@gpa-gemstone/application-typings';
 export type TimeUnit = ('datetime-local' | 'date' | 'time');
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     Valid: (field: keyof T) => boolean;
-    Label?: string;
-    Disabled?: boolean;
     Feedback?: string;
     Format?: string;
     Type?: TimeUnit;
-    Help?: string | JSX.Element;
     AllowEmpty?: boolean;
     Accuracy?: Accuracy;
     MinDate?: moment.Moment;

package/lib/DateRangePicker.d.ts

@@ -1,9 +1,5 @@
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Field representing the start date in the record
       * @type {keyof T}
@@ -15,14 +11,8 @@ interface IProps<T> {
     */
     ToField: keyof T;
     /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
-      * Label to display for the form, defaults to the Field prop
+      * Label to display for the form
       * @type {string}
-      * @optional
     */
     Label: string;
     /**
@@ -31,12 +21,6 @@ interface IProps<T> {
       * @returns {boolean}
     */
     Valid: (fieldFrom: keyof T, fieldTo: keyof T) => boolean;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
     /**
       * Feedback message to show when input is invalid
       * @type {string}

package/lib/DoubleInput.d.ts

@@ -1,9 +1,5 @@
-interface IProps<T> {
-    /**
-    * Record to be used in form
-    * @type {T}
-   */
-    Record: T;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * First field of the record to be edited
       * @type {keyof T}
@@ -15,34 +11,17 @@ interface IProps<T> {
     */
     Field2: keyof T;
     /**
-    * Setter function to update the Record
-    * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
     * Function to determine the validity of a field
     * @param field - Field of the record to check
     * @returns {boolean}
    */
     Valid: (field: keyof T) => boolean;
     /**
-    * Label to display for the form, defaults to the Field prop
-    * @type {string}
-    * @optional
-    */
-    Label?: string;
-    /**
     * Feedback message to show when input is invalid
     * @type {string}
     * @optional
     */
     Feedback?: string;
-    /**
-    * Flag to disable the input field
-    * @type {boolean}
-    * @optional
-    */
-    Disabled?: boolean;
     /**
       * Type of the input fields
       * @type {'number' | 'text' | 'password' | 'email' | 'color'}

package/lib/FileUpload.d.ts

@@ -0,0 +1,17 @@
+interface IProps {
+    /**
+        * Callback function that will be called when a file is uploaded
+    * */
+    OnLoadHandler: (result: File) => void;
+    /**
+        * Callback function that will be called when clear button is clicked
+    * */
+    OnClearHandler: () => void;
+    /**
+        * Attribute used to control what type of files are filtered by default in file explorer
+        * @type {string}
+    * */
+    FileTypeAttribute: string;
+}
+declare const FileUpload: (props: IProps) => JSX.Element;
+export default FileUpload;

package/lib/FileUpload.js

@@ -0,0 +1,99 @@
+"use strict";
+// ******************************************************************************************************
+//  FileUpload.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:
+//  ----------------------------------------------------------------------------------------------------
+//  01/01/2025 - Preston Crawford
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var FileUpload = function (props) {
+    var _a = React.useState(null), fileName = _a[0], setFileName = _a[1];
+    var _b = React.useState(null), fileSize = _b[0], setFileSize = _b[1];
+    var _c = React.useState(false), isFileUpload = _c[0], setIsFileUploaded = _c[1];
+    var handleFileUpload = function (evt) {
+        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0)
+            return;
+        var file = evt.target.files[0];
+        setMetaData(file);
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer == null || e.dataTransfer.files == null || e.dataTransfer.files.length === 0)
+            return;
+        var file = e.dataTransfer.files[0];
+        setMetaData(file);
+        // Clear drag data after handling
+        e.dataTransfer.clearData();
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    var handleOnClear = function () {
+        setIsFileUploaded(false);
+        setFileName(null);
+        setFileSize(null);
+        props.OnClearHandler();
+    };
+    var setMetaData = function (file) {
+        setFileName(file.name);
+        setFileSize(file.size);
+        props.OnLoadHandler(file);
+        setIsFileUploaded(true);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: 'row' },
+            React.createElement("div", { className: 'col-auto mt-2' },
+                React.createElement("label", { style: { cursor: 'pointer' } },
+                    React.createElement(gpa_symbols_1.ReactIcons.ShareArrow, { Color: 'var(--info)' }),
+                    React.createElement("input", { type: "file", onChange: handleFileUpload, accept: props.FileTypeAttribute, style: { display: 'none' } }))),
+            React.createElement("div", { className: 'col-auto' },
+                React.createElement("button", { className: 'btn', onClick: handleOnClear },
+                    React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'red' })))),
+        isFileUpload ?
+            React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'row align-items-center justify-content-center', style: { border: '2px dashed var(--secondary)' } },
+                    React.createElement("div", { className: 'col-auto' },
+                        "File Name: ", fileName !== null && fileName !== void 0 ? fileName : ''),
+                    React.createElement("div", { className: 'col-auto' },
+                        "File Size: ",
+                        formatFileSize(fileSize))))
+            :
+                React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)' } },
+                    React.createElement("div", { className: 'col-12 pt-3 pb-3 d-flex justify-content-center align-items-center' },
+                        React.createElement(gpa_symbols_1.ReactIcons.Image, { Size: 100 }),
+                        React.createElement("span", null, "Drag and Drop")))));
+};
+//Helper Functions
+var formatFileSize = function (size) {
+    if (size === null)
+        return '';
+    var units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+    var index = 0;
+    var fileSize = size;
+    while (fileSize >= 1024 && index < units.length - 1) {
+        fileSize /= 1024;
+        index++;
+    }
+    return "".concat(fileSize.toFixed(2), " ").concat(units[index]);
+};
+exports.default = FileUpload;

package/lib/Input.d.ts

@@ -1,56 +1,24 @@
 import * as React from 'react';
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+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
       * @returns {boolean}
     */
     Valid: (field: keyof T) => boolean;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
     /**
       * Feedback message to show when input is invalid
       * @type {string}
       * @optional
     */
     Feedback?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
     /**
       * Type of the input field
       * @type {'number' | 'text' | 'password' | 'email' | 'color' | 'integer'}
       * @optional
     */
     Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
-    /**
-      * Help message or element to display
-      * @type {string | JSX.Element}
-      * @optional
-    */
-    Help?: string | JSX.Element;
     /**
       * CSS styles to apply to the form group
       * @type {React.CSSProperties}

package/lib/InputWithButton.d.ts

@@ -1,32 +1,12 @@
 import * as React from 'react';
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+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
       * @returns {boolean}
     */
     Valid: (field: keyof T) => boolean;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
     /**
       * Feedback message to show when input is invalid
       * @type {string}

package/lib/MultiInput.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Gemstone } from '@gpa-gemstone/application-typings';
+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
+      * @returns {boolean}
+    */
+    Valid: (field: keyof T) => boolean;
+    /**
+      * Type of the input field
+      * @type {'number' | 'text' | 'password' | 'email' | 'color' | 'integer'}
+      * @optional
+    */
+    Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
+    /**
+    * 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}
+    */
+    DefaultValue: number | string;
+    /**
+        * Flag to allow null values
+        * @type {boolean}
+        * @optional
+    */
+    AllowNull?: boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
+}
+declare function MultiInput<T>(props: IProps<T>): JSX.Element;
+export default MultiInput;

package/lib/MultiInput.js

@@ -0,0 +1,109 @@
+"use strict";
+//******************************************************************************************************
+//  MultiInput.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 may license 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:
+//  ----------------------------------------------------------------------------------------------------
+//  12/05/2024 - 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 Input_1 = require("./Input");
+var HelperMessage_1 = require("./HelperMessage");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+//Only supporting string/number arrays for now
+function MultiInput(props) {
+    var _a;
+    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
+    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);
+    }
+    return (React.createElement(React.Fragment, null,
+        fieldArray.length === 0 ?
+            React.createElement(React.Fragment, null,
+                React.createElement("label", { className: 'd-flex align-items-center', "data-help": guid.current }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
+                    props.Help != null ?
+                        React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
+                            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(HelperMessage_1.default, { Show: showHelp && props.Help != null, Target: guid.current }, props.Help))
+            : null,
+        fieldArray.map(function (r, index) {
+            var _a, _b;
+            return (React.createElement("div", { className: 'row align-items-center', key: index },
+                React.createElement("div", { className: 'col' },
+                    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: props.Feedback, Valid: function () { return props.Valid(props.Field); }, Style: props.Style, Disabled: props.Disabled, 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-auto' },
+                    React.createElement("button", { className: 'btn', style: ((_a = props.Disabled) !== null && _a !== void 0 ? _a : 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-auto' },
+                        React.createElement("button", { className: 'btn', style: ((_b = props.Disabled) !== null && _b !== void 0 ? _b : 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 = MultiInput;

package/lib/RadioButtons.d.ts

@@ -1,25 +1,5 @@
-interface IProps<T> {
-    /**
-        * Record to be used in form
-        * @type {T}
-    */
-    Record: T;
-    /**
-        * Field of the record to be edited
-        * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
-        * Help message or element to display
-        * @type {string | JSX.Element}
-        * @optional
-    */
-    Help?: string | JSX.Element;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
         * Position to display radion buttons in
         * @type {'vertical' | 'horizontal'}
@@ -35,12 +15,6 @@ interface IProps<T> {
         Label: string;
         Disabled?: boolean;
     }[];
-    /**
-        * Label to display for the form, defaults to the Field prop
-        * @type {string}
-        * @optional
-    */
-    Label?: string;
 }
 export default function RadioButtons<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/SearchableSelect.d.ts

@@ -1,24 +1,10 @@
 import * as React from 'react';
+import { Gemstone } from '@gpa-gemstone/application-typings';
 interface IOption {
     Value: string;
     Label: string;
 }
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-    * Setter function to update the Record
-    * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
     * Flag to allow custom input values
     * @type {boolean}
@@ -30,25 +16,7 @@ interface IProps<T> {
     * @param search - Search string
     * @returns {[promise: Promise<IOption[]>, callback?: () => void]}
     */
-    Search: (search: string) => [promise: Promise<IOption[]>, callback?: () => void];
-    /**
-    * Label to display for the form, defaults to the Field prop
-    * @type {string}
-    * @optional
-   */
-    Label?: string;
-    /**
-    * Flag to disable the input field
-    * @type {boolean}
-    * @optional
-    */
-    Disabled?: boolean;
-    /**
-    * Help message or element to display
-    * @type {string | JSX.Element}
-    * @optional
-    */
-    Help?: string | JSX.Element;
+    Search: (search: string) => [Promise<IOption[]>, () => void];
     /**
     * CSS styles to apply to the form group
     * @type {React.CSSProperties}
@@ -59,9 +27,13 @@ interface IProps<T> {
     * CSS style to apply to the button holding the selected value
     * @type {React.CSSProperties}
     * @optional
-    *
     */
     BtnStyle?: React.CSSProperties;
+    /**
+    * Custom label to display instead of the default record[field] value. Useful when having a field like an ID.
+    * @type {string}
+    * @optional
+    */
     SearchLabel?: string;
 }
 export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;

package/lib/SearchableSelect.js

@@ -38,46 +38,52 @@ var React = require("react");
 var StylableSelect_1 = require("./StylableSelect");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function SearchableSelect(props) {
-    var _a, _b, _c;
-    var _d = React.useState((_c = (_b = ((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field])) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''), search = _d[0], setSearch = _d[1];
-    var _e = React.useState([]), results = _e[0], setResults = _e[1];
-    var _f = React.useState(false), loading = _f[0], setLoading = _f[1];
+    var _a;
+    var _b = React.useState(((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field]).toString()), search = _b[0], setSearch = _b[1];
+    var _c = React.useState([]), results = _c[0], setResults = _c[1];
+    var _d = React.useState(false), loading = _d[0], setLoading = _d[1];
     React.useEffect(function () {
         setLoading(true);
-        var _a = props.Search(search), h = _a[0], c = _a[1];
-        h.then(function (d) {
+        var _a = props.Search(search), handle = _a[0], callback = _a[1];
+        handle.then(function (d) {
             setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); }));
             setLoading(false);
         });
-        return c;
+        return callback;
     }, [search]);
     React.useEffect(function () {
         if (props.SearchLabel == null)
             return;
         setSearch(props.SearchLabel);
     }, [props.SearchLabel]);
+    var handleOnBlur = React.useCallback(function () {
+        var _a;
+        var _b;
+        if ((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false)
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
+        else
+            setSearch(props.Record[props.Field].toString());
+    }, [props.AllowCustom, props.Record, props.Field, search]);
     var options = React.useMemo(function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var ops = [];
         ops.push({
-            Value: props.Record[props.Field], Element: React.createElement("div", { className: 'input-group' },
-                React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: (((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false) ? function () {
-                        var _a;
-                        return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
-                    } : function () { var _a; return setSearch((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field].toString()); }) }),
+            Value: props.Record[props.Field],
+            Element: React.createElement("div", { className: 'input-group' },
+                React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: handleOnBlur }),
                 loading ?
                     React.createElement("div", { className: "input-group-append" },
                         React.createElement("span", { className: "input-group-text" },
                             React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, null)))
                     : null)
         });
-        if (!((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false))
-            ops.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, (_c = props.SearchLabel) !== null && _c !== void 0 ? _c : props.Record[props.Field]) });
-        if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
+        if (!((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false))
+            ops.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, (_b = props.SearchLabel) !== null && _b !== void 0 ? _b : props.Record[props.Field]) });
+        if ((_c = props.AllowCustom) !== null && _c !== void 0 ? _c : false)
             ops.push({ Value: search, Element: React.createElement("p", null, search) });
         ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
         return ops;
-    }, [search, props.Record[props.Field], props.Disabled, loading, props.SearchLabel, results]);
+    }, [search, props.Record[props.Field], results, props.Disabled, loading, props.SearchLabel, props.AllowCustom]);
     var update = React.useCallback(function (record) {
         var _a;
         var _b, _c;

package/lib/Select.d.ts

@@ -1,14 +1,5 @@
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Options for the select dropdown
       * @type {{ Value: string; Label: string }[]}
@@ -17,23 +8,6 @@ interface IProps<T> {
         Value: string | number;
         Label: string;
     }[];
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
     /**
       * Flag to include an empty option in the select dropdown
       * @type {boolean}
@@ -46,12 +20,6 @@ interface IProps<T> {
       * @optional
     */
     EmptyLabel?: string;
-    /**
-      * Help message or element to display
-      * @type {string | JSX.Element}
-      * @optional
-    */
-    Help?: string | JSX.Element;
 }
 export default function Select<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/StylableSelect.d.ts

@@ -1,47 +1,15 @@
 import * as React from 'react';
+import { Gemstone } from '@gpa-gemstone/application-typings';
 export interface IOption {
     Value: any;
     Element: React.ReactElement<any>;
 }
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
     * Options for the select dropdown
     * @type {{  Value: any, Element: React.ReactElement<any> }[]}
   */
     Options: IOption[];
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
-    /**
-      * Help message or element to display
-      * @type {string | JSX.Element}
-      * @optional
-    */
-    Help?: string | JSX.Element;
     /**
       * CSS styles to apply to the selected value
       * @type {React.CSSProperties}

package/lib/StylableSelect.js

@@ -145,6 +145,6 @@ function StylableSelect(props) {
                 } },
                 React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
                     React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
-                        React.createElement("tr", { key: i, onClick: function (evt) { return handleOptionClick(evt, f); } },
+                        React.createElement("tr", { key: i, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
                             React.createElement("td", null, f.Element))); })))))));
 }

package/lib/TextArea.d.ts

@@ -1,48 +1,22 @@
-interface IProps<T> {
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * Number of rows for the textarea
       * @type {number}
     */
     Rows: number;
-    /**
-      * Record to be used in the form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
     /**
       * Function to determine the validity of a field
       * @param field - Field of the record to check
       * @returns {boolean}
     */
     Valid: (field: keyof T) => boolean;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
     /**
       * Feedback message to show when input is invalid
       * @type {string}
       * @optional
     */
     Feedback?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
     /**
       * Help message or element to display
       * @type {string | JSX.Element}

package/lib/TimePicker.d.ts

@@ -1,37 +1,11 @@
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-      * Setter function to update the Record
-      * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+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
       * @returns {boolean}
     */
     Valid: (field: keyof T) => boolean;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
     /**
       * Feedback message to show when input is invalid
       * @type {string}
@@ -44,7 +18,6 @@ interface IProps<T> {
       * @optional
     */
     Step?: number;
-    Help?: string | JSX.Element;
 }
 export default function DatePicker<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/ToggleSwitch.d.ts

@@ -1,38 +1,6 @@
 import * as React from 'react';
-interface IProps<T> {
-    /**
-      * Record to be used in form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
-    /**
-        * Setter function to update the Record
-        * @param record - Updated Record
-    */
-    Setter: (record: T) => void;
-    /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label?: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
-    */
-    Disabled?: boolean;
-    /**
-      * Help message or element to display
-      * @type {string | JSX.Element}
-      * @optional
-    */
-    Help?: string | JSX.Element;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
       * CSS styles to apply to the form group
       * @type {React.CSSProperties}

package/lib/index.d.ts

@@ -16,4 +16,6 @@ import SearchableSelect from './SearchableSelect';
 import ToggleSwitch from './ToggleSwitch';
 import InputWithButton from './InputWithButton';
 import RadioButtons from './RadioButtons';
-export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, ToggleSwitch, InputWithButton, RadioButtons };
+import FileUpload from './FileUpload';
+import MultiInput from './MultiInput';
+export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, ToggleSwitch, InputWithButton, RadioButtons, FileUpload, MultiInput };

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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");
@@ -59,3 +59,7 @@ var InputWithButton_1 = require("./InputWithButton");
 exports.InputWithButton = InputWithButton_1.default;
 var RadioButtons_1 = require("./RadioButtons");
 exports.RadioButtons = RadioButtons_1.default;
+var FileUpload_1 = require("./FileUpload");
+exports.FileUpload = FileUpload_1.default;
+var MultiInput_1 = require("./MultiInput");
+exports.MultiInput = MultiInput_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.77",
+  "version": "1.1.79",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,9 +45,9 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.78",
-    "@gpa-gemstone/gpa-symbols": "0.0.45",
-    "@gpa-gemstone/helper-functions": "0.0.36",
+    "@gpa-gemstone/application-typings": "0.0.80",
+    "@gpa-gemstone/gpa-symbols": "0.0.46",
+    "@gpa-gemstone/helper-functions": "0.0.37",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",