@gpa-gemstone/react-forms 1.1.92 → 1.1.94

package/lib/FileUpload.d.ts

@@ -2,7 +2,7 @@ interface IProps {
     /**
         * Callback function that will be called when a file is uploaded
     * */
-    OnLoadHandler: (result: File) => void;
+    OnLoadHandler: (result: File) => Promise<any>;
     /**
         * Callback function that will be called when clear button is clicked
     * */

package/lib/FileUpload.js

@@ -28,9 +28,12 @@ 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 _d = React.useState('unintiated'), uploadStatus = _d[0], setUploadStatus = _d[1];
     var handleFileUpload = function (evt) {
-        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0)
+        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0) {
+            setUploadStatus('unintiated');
             return;
+        }
         var file = evt.target.files[0];
         setMetaData(file);
     };
@@ -49,6 +52,7 @@ var FileUpload = function (props) {
         e.stopPropagation();
     };
     var handleOnClear = function () {
+        setUploadStatus('unintiated');
         setIsFileUploaded(false);
         setFileName(null);
         setFileSize(null);
@@ -57,31 +61,42 @@ var FileUpload = function (props) {
     var setMetaData = function (file) {
         setFileName(file.name);
         setFileSize(file.size);
-        props.OnLoadHandler(file);
-        setIsFileUploaded(true);
+        setUploadStatus('loading');
+        props.OnLoadHandler(file).then(function () {
+            setIsFileUploaded(true);
+            setUploadStatus('idle');
+        }).catch(function () {
+            setIsFileUploaded(false);
+            setUploadStatus('error');
+        });
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'row' },
             React.createElement("div", { className: 'col-auto mt-2 pl-0' },
                 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("input", { type: "file", accept: props.FileTypeAttribute, style: { display: 'none' }, onChange: handleFileUpload }))),
             React.createElement("div", { className: 'col-auto pl-0' },
                 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)', borderRadius: '0.5em' } },
-                    React.createElement("div", { className: 'col-auto' },
-                        "File Name: ", fileName !== null && fileName !== void 0 ? fileName : ''),
-                    React.createElement("div", { className: 'col-auto' },
-                        "File Size: ",
-                        formatFileSize(fileSize))))
+        uploadStatus === 'error' ?
+            React.createElement("div", { className: "alert alert-danger fade show" }, "An error occured while uploading file.")
+            : null,
+        React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } }, uploadStatus === 'loading' ?
+            React.createElement("div", { className: 'd-flex col-12 align-items-center justify-content-center' },
+                React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, { Size: 200 }))
             :
-                React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } },
-                    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")))));
+                isFileUpload ?
+                    React.createElement(React.Fragment, null,
+                        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: '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) {

package/lib/MultiSearchableSelect.d.ts

@@ -0,0 +1,10 @@
+import { IProps as ISearchableSelectProps } from './SearchableSelect';
+interface IProps<T> extends ISearchableSelectProps<T> {
+    /**
+      * Default value to use when adding an item and when value is null
+      * @type {number}
+    */
+    DefaultValue: number | string;
+}
+declare function MultiSearchableSelect<T>(props: IProps<T>): JSX.Element;
+export default MultiSearchableSelect;

package/lib/MultiSearchableSelect.js

@@ -0,0 +1,106 @@
+"use strict";
+//******************************************************************************************************
+//  MultiSearchableSelect.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:
+//  ----------------------------------------------------------------------------------------------------
+//  07/01/2025 - 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 SearchableSelect_1 = require("./SearchableSelect");
+var ToolTip_1 = require("./ToolTip");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+//Only supporting string/number arrays for now
+function MultiSearchableSelect(props) {
+    var _a;
+    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var fieldArray = props.Record[props.Field];
+    if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
+        console.warn("MultiInput: ".concat(props.Field.toString(), " is not of type array."));
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        fieldArray.length === 0 ?
+            React.createElement(React.Fragment, null,
+                React.createElement("label", { className: 'd-flex align-items-center' },
+                    React.createElement("span", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
+                    props.Help != null ?
+                        React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
+                            React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
+                        : null,
+                    React.createElement("button", { className: 'btn', onClick: function () {
+                            var _a;
+                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
+                        } },
+                        " ",
+                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
+                        " ")),
+                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "bottom" }, 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(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', Help: index === 0 ? props.Help : undefined, Feedback: props.Feedback, Valid: function () { return props.Valid != null ? props.Valid(props.Field) : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
+                            var _a;
+                            var newArray = __spreadArray([], fieldArray, true);
+                            newArray[index] = record[index];
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
+                        }, Search: props.Search, BtnStyle: props.BtnStyle, GetLabel: props.GetLabel, ResetSearchOnSelect: props.ResetSearchOnSelect, AllowCustom: props.AllowCustom })),
+                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 = MultiSearchableSelect;

package/lib/MutliCheckBoxSelect.js

@@ -108,7 +108,7 @@ var MultiSelect = function (props) {
         ((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
             React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "bottom" },
                 React.createElement("p", null, "Selected Options:"),
-                selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Label); }),
+                selectedOptions.slice(0, 10).map(function (opt, i) { return React.createElement("p", { key: i }, opt.Label); }),
                 selectedOptions.length > 10 ? React.createElement("p", null, "and ".concat(selectedOptions.length - 10, " other(s)")) : null)
             : null,
         React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },

package/lib/SearchableSelect.d.ts

@@ -1,9 +1,18 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-export interface AbortablePromise<T> extends PromiseLike<T> {
-    abort?: () => void;
-}
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+    /**
+    * Function to determine the validity of a field
+    * @param field - Field of the record to check
+    * @returns {boolean}
+    */
+    Valid?: (field: keyof T) => boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
     /**
     * Flag to allow custom input values
     * @type {boolean}
@@ -15,7 +24,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     * @param search - Search string
     * @returns {AbortablePromise<T>}
     */
-    Search: (search: string) => AbortablePromise<Gemstone.TSX.Interfaces.ILabelValue<string | number>[]>;
+    Search: (search: string) => Gemstone.TSX.Interfaces.AbortablePromise<Gemstone.TSX.Interfaces.ILabelValue<string | number>[]>;
     /**
     * CSS styles to apply to the form group
     * @type {React.CSSProperties}
@@ -28,11 +37,10 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     * @optional
     */
     BtnStyle?: React.CSSProperties;
-    GetLabel?: () => AbortablePromise<string>;
+    GetLabel?: () => Gemstone.TSX.Interfaces.AbortablePromise<string>;
     /**
-     * Flag to reset search text to an empty string when a user selects an option. Defaulting to false
+     * Flag to reset search text to an empty string when a user selects an option or when the element loses focus. Defaulting to false
      */
     ResetSearchOnSelect?: boolean;
 }
 export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
-export {};

package/lib/SearchableSelect.js

@@ -30,33 +30,35 @@ var getInitialSearchText = function (useBlankString, recordValue) {
     return useBlankString ? '' : recordValue;
 };
 function SearchableSelect(props) {
-    var _a, _b;
-    var _c = React.useState(function () { var _a, _b, _c; return getInitialSearchText((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false, (_c = (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''); }), search = _c[0], setSearch = _c[1];
-    var _d = React.useState((_b = (_a = props.Record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''), label = _d[0], setLabel = _d[1];
-    var _e = React.useState([]), results = _e[0], setResults = _e[1];
-    var _f = React.useState(false), loading = _f[0], setLoading = _f[1];
-    React.useEffect(function () {
+    var _a = React.useState(function () { var _a, _b, _c; return getInitialSearchText((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false, (_c = (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''); }), search = _a[0], setSearch = _a[1];
+    var _b = React.useState([]), searchOptions = _b[0], setSearchOptions = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    var setter = React.useCallback(function (record, selectedOption) {
+        handleSetSearch(selectedOption);
+        props.Setter(record);
+    }, [props.Setter, props.Field]);
+    var handleSetSearch = React.useCallback(function (selectedOption) {
         var _a, _b, _c;
-        if (props.GetLabel === undefined) {
-            if ((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false)
-                setSearch('');
-            else
-                setLabel((_c = (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '');
+        if ((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false) {
+            setSearch('');
+            return;
         }
-        else {
-            setLoading(true);
-            var handle_1 = props.GetLabel();
-            handle_1.then(function (lab) {
-                setLabel(lab);
-                setSearch(lab);
-                setLoading(false);
-            });
-            return function () {
-                if ((handle_1 === null || handle_1 === void 0 ? void 0 : handle_1.abort) != null)
-                    handle_1.abort();
-            };
+        if (props.GetLabel === undefined) {
+            var newSearch = (_c = selectedOption !== null && selectedOption !== void 0 ? selectedOption : (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '';
+            setSearch(newSearch);
+            return;
         }
-    }, [props.GetLabel, props.Record[props.Field], props.ResetSearchOnSelect]);
+        setLoading(true);
+        var handle = props.GetLabel();
+        handle.then(function (lab) {
+            setSearch(lab);
+            setLoading(false);
+        }, function () { return setLoading(false); });
+    }, [props.ResetSearchOnSelect, props.GetLabel, props.Record[props.Field]]);
+    //Effect to set search when props.Record[props.Field] changes externally
+    React.useEffect(function () {
+        handleSetSearch();
+    }, [props.Record[props.Field], handleSetSearch]);
     // Call props.Search every 500ms to avoid hammering the server while typing
     React.useEffect(function () {
         setLoading(true);
@@ -64,7 +66,7 @@ function SearchableSelect(props) {
         var timeoutHandle = setTimeout(function () {
             searchHandle = props.Search(search);
             searchHandle.then(function (d) {
-                setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
+                setSearchOptions(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
                 setLoading(false);
             }, function () {
                 setLoading(false);
@@ -77,38 +79,25 @@ function SearchableSelect(props) {
                 clearTimeout(timeoutHandle);
         };
     }, [search]);
-    var update = React.useCallback(function (record, selectedOption) {
-        var _a, _b, _c;
-        var stringVal = (_b = (_a = record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-        var newLabel = stringVal;
-        if (!React.isValidElement(selectedOption.Element))
-            newLabel = selectedOption.Element;
-        setLabel(newLabel);
-        props.Setter(record);
-        if ((_c = props.ResetSearchOnSelect) !== null && _c !== void 0 ? _c : false)
-            setSearch('');
-        else
-            setSearch(newLabel);
-    }, [props.Setter, props.Field, label]);
     var options = React.useMemo(function () {
-        var _a, _b;
+        var _a, _b, _c, _d;
         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: function () { return setSearch(label); }, onClick: function (evt) { evt.preventDefault(); evt.stopPropagation(); }, disabled: (_a = props.Disabled) !== null && _a !== void 0 ? _a : false }),
+                React.createElement("input", { type: "text", className: "form-control ".concat(((_b = (_a = props.Valid) === null || _a === void 0 ? void 0 : _a.call(props, props.Field)) !== null && _b !== void 0 ? _b : true) ? '' : 'border-danger'), value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: function () { return handleSetSearch(); }, onClick: function (evt) { evt.preventDefault(); evt.stopPropagation(); }, disabled: (_c = props.Disabled) !== null && _c !== void 0 ? _c : false }),
                 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)
+        if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
             ops.push({ Value: search, Element: React.createElement(React.Fragment, null,
                     search,
                     " (Entered Value)") });
-        ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
+        ops.push.apply(ops, searchOptions.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
         return ops;
-    }, [search, props.Record[props.Field], results, props.Disabled, loading, label]);
-    return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: update, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options, BtnStyle: props.BtnStyle });
+    }, [search, props.Record[props.Field], props.Field, searchOptions, props.Disabled, loading, props.Valid, handleSetSearch]);
+    return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: setter, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options, BtnStyle: props.BtnStyle, Valid: props.Valid, Feedback: props.Feedback });
 }

package/lib/StylableSelect.d.ts

@@ -4,6 +4,18 @@ export interface IOption {
     Element: React.ReactElement<any> | string;
 }
 interface IProps<T> {
+    /**
+    * Function to determine the validity of a field
+    * @param field - Field of the record to check
+    * @returns {boolean}
+    */
+    Valid?: (field: keyof T) => boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
     /**
       * Record to be used in form
       * @type {T}

package/lib/StylableSelect.js

@@ -42,17 +42,17 @@ var react_portal_1 = require("react-portal");
 var _ = require("lodash");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function StylableSelect(props) {
-    var _a;
+    var _a, _b, _c;
     // State hooks and ref for managing component state and interactions.
     var stylableSelect = React.useRef(null);
     var selectTable = React.useRef(null);
     var tableContainer = React.useRef(null);
-    var _b = React.useState(false), show = _b[0], setShow = _b[1];
-    var _c = React.useState(props.Options[0].Element), selected = _c[0], setSelected = _c[1];
-    var _d = React.useState(""), guid = _d[0], setGuid = _d[1];
-    var _e = React.useState(false), showHelp = _e[0], setShowHelp = _e[1];
-    var _f = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _f[0], setPosition = _f[1];
-    React.useEffect(function () {
+    var _d = React.useState(false), show = _d[0], setShow = _d[1];
+    var _e = React.useState(props.Options[0].Element), selected = _e[0], setSelected = _e[1];
+    var _f = React.useState(""), guid = _f[0], setGuid = _f[1];
+    var _g = React.useState(false), showHelp = _g[0], setShowHelp = _g[1];
+    var _h = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _h[0], setPosition = _h[1];
+    React.useLayoutEffect(function () {
         var updatePosition = _.debounce(function () {
             if (stylableSelect.current != null) {
                 var rect = stylableSelect.current.getBoundingClientRect();
@@ -82,6 +82,16 @@ function StylableSelect(props) {
         // Ignore if disabled or not a mousedown event
         if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown' || stylableSelect.current == null)
             return;
+        // if we’re about to OPEN it, measure right now
+        if (!show && stylableSelect.current != null) {
+            var rect = stylableSelect.current.getBoundingClientRect();
+            setPosition({
+                Top: rect.bottom,
+                Left: rect.left,
+                Width: rect.width,
+                Height: rect.height
+            });
+        }
         //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;
@@ -131,8 +141,9 @@ function StylableSelect(props) {
         props.Help !== undefined ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
-        React.createElement("button", { type: "button", style: __assign({ border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
+        React.createElement("button", { type: "button", style: __assign({ padding: '.375rem .75rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "dropdown-toggle form-control ".concat(((_c = (_b = props.Valid) === null || _b === void 0 ? void 0 : _b.call(props, props.Field)) !== null && _c !== void 0 ? _c : true) ? '' : 'is-invalid'), onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
             React.createElement("div", { style: props.Style }, selected)),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
         React.createElement(react_portal_1.Portal, null,
             React.createElement("div", { ref: tableContainer, className: 'popover', style: {
                     maxHeight: window.innerHeight - position.Top,

package/lib/ToggleSwitch.js

@@ -45,7 +45,7 @@ function ToggleSwitch(props) {
     // Variables to control the rendering of label and help icon.
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
-    return (React.createElement("div", { className: "custom-control custom-switch", style: props.Style },
+    return (React.createElement("div", { className: "custom-control custom-switch form-group", style: props.Style },
         React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 record[props.Field] = evt.target.checked;

package/lib/index.d.ts

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

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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");
@@ -65,3 +65,5 @@ var MultiInput_1 = require("./MultiInput");
 exports.MultiInput = MultiInput_1.default;
 var ToolTip_1 = require("./ToolTip");
 exports.ToolTip = ToolTip_1.default;
+var MultiSearchableSelect_1 = require("./MultiSearchableSelect");
+exports.MultiSearchableSelect = MultiSearchableSelect_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.92",
+  "version": "1.1.94",
   "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.86",
+    "@gpa-gemstone/application-typings": "0.0.87",
     "@gpa-gemstone/gpa-symbols": "0.0.52",
-    "@gpa-gemstone/helper-functions": "0.0.43",
+    "@gpa-gemstone/helper-functions": "0.0.44",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",