@gpa-gemstone/react-forms 1.1.60 → 1.1.61

package/lib/MutliCheckBoxSelect.js

@@ -1,104 +1,110 @@
-"use strict";
-// ******************************************************************************************************
-//  MultiCheckBoxSelect.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:
-//  ----------------------------------------------------------------------------------------------------
-//  07/17/2020 - Billy Ernest
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-Object.defineProperty(exports, "__esModule", { value: true });
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var React = require("react");
-var HelperMessage_1 = require("./HelperMessage");
-var MultiSelect = function (props) {
-    var _a;
-    var _b = React.useState(false), show = _b[0], setShow = _b[1];
-    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
-    var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
-    var _e = React.useState(""), guid = _e[0], setGuid = _e[1];
-    var multiSelect = React.useRef(null);
-    var showLabel = React.useMemo(function () { return props.Label !== ""; }, [props.Label]);
-    var showHelpIcon = React.useMemo(function () { return props.Help !== undefined; }, [props.Help]);
-    var selectedOptions = React.useMemo(function () { return props.Options.filter(function (opt) { return opt.Selected; }); }, [props.Options]);
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
-    function HandleShow(evt) {
-        if (multiSelect.current === null)
-            setShow(!show);
-        else if (!multiSelect.current.contains(evt.target))
-            setShow(false);
-        else
-            setShow(true);
-    }
-    React.useEffect(function () {
-        document.addEventListener('mousedown', HandleShow, false);
-        return function () {
-            document.removeEventListener('mousedown', HandleShow, false);
-        };
-    }, []);
-    return (React.createElement("div", { className: "form-group" },
-        showLabel || showHelpIcon ?
-            React.createElement("label", null,
-                showLabel ?
-                    (props.Label === undefined ? 'Select' : props.Label)
-                    : '',
-                showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
-        showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
-            : null,
-        ((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
-            React.createElement(HelperMessage_1.default, { Show: showItems, Target: guid, Background: props.ItemTooltip === 'dark' ? "#222" : '#fff', Color: props.ItemTooltip === 'dark' ? "#fff" : '#222' },
-                React.createElement("p", null, "Selected Options:"),
-                selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Text); }),
-                selectedOptions.length > 10 ? React.createElement("p", null, "and " + (selectedOptions.length - 10) + " other(s)") : null)
-            : null,
-        React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
-            React.createElement("button", { "data-help": guid, type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow, onMouseEnter: function () { return setShowItems(true); }, onMouseLeave: function () { return setShowItems(false); } },
-                props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
-                    ? props.Options.filter(function (x) { return x.Selected; }).length
-                    : 'All ',
-                ' ',
-                "Selected"),
-            React.createElement("div", { style: {
-                    maxHeight: window.innerHeight * 0.75,
-                    overflowY: 'auto',
-                    padding: '10 5',
-                    display: show ? 'block' : 'none',
-                    position: 'absolute',
-                    backgroundColor: '#fff',
-                    color: 'black',
-                    boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
-                    zIndex: 401,
-                    minWidth: '100%',
-                } },
-                React.createElement("table", { className: "table", style: { margin: 0 } },
-                    React.createElement("tbody", null,
-                        React.createElement("tr", { onClick: function (evt) {
-                                evt.preventDefault();
-                                props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
-                            } },
-                            React.createElement("td", null,
-                                React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
-                            React.createElement("td", null, "All")),
-                        props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
-                            React.createElement("td", null,
-                                React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
-                            React.createElement("td", null, f.Text))); })))))));
-};
-exports.default = MultiSelect;
+"use strict";
+// ******************************************************************************************************
+//  MultiCheckBoxSelect.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:
+//  ----------------------------------------------------------------------------------------------------
+//  07/17/2020 - Billy Ernest
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var React = require("react");
+var HelperMessage_1 = require("./HelperMessage");
+var MultiSelect = function (props) {
+    var _a;
+    // State hooks for managing the visibility of the dropdown and help message.
+    var _b = React.useState(false), show = _b[0], setShow = _b[1];
+    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
+    var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
+    var _e = React.useState(""), guid = _e[0], setGuid = _e[1];
+    var multiSelect = React.useRef(null);
+    var showLabel = React.useMemo(function () { return props.Label !== ""; }, [props.Label]);
+    var showHelpIcon = React.useMemo(function () { return props.Help !== undefined; }, [props.Help]);
+    var selectedOptions = React.useMemo(function () { return props.Options.filter(function (opt) { return opt.Selected; }); }, [props.Options]);
+    // Effect to generate a unique ID for the component.
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    // Handle showing and hiding of the dropdown.
+    function HandleShow(evt) {
+        if (multiSelect.current === null)
+            setShow(!show);
+        else if (!multiSelect.current.contains(evt.target))
+            setShow(false);
+        else
+            setShow(true);
+    }
+    // Effect to add and remove event listener for clicking outside the component.
+    React.useEffect(function () {
+        document.addEventListener('mousedown', HandleShow, false);
+        return function () {
+            document.removeEventListener('mousedown', HandleShow, false);
+        };
+    }, []);
+    return (React.createElement("div", { className: "form-group" },
+        showLabel || showHelpIcon ?
+            React.createElement("label", null,
+                showLabel ?
+                    (props.Label === undefined ? 'Select' : props.Label)
+                    : '',
+                showHelpIcon ?
+                    React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ?")
+                    : null) : null,
+        showHelpIcon ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null,
+        ((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
+            React.createElement(HelperMessage_1.default, { Show: showItems, Target: guid, Background: props.ItemTooltip === 'dark' ? "#222" : '#fff', Color: props.ItemTooltip === 'dark' ? "#fff" : '#222' },
+                React.createElement("p", null, "Selected Options:"),
+                selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Text); }),
+                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' } },
+            React.createElement("button", { "data-help": guid, type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow, onMouseEnter: function () { return setShowItems(true); }, onMouseLeave: function () { return setShowItems(false); } },
+                props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
+                    ? props.Options.filter(function (x) { return x.Selected; }).length
+                    : 'All ',
+                ' ',
+                "Selected"),
+            React.createElement("div", { style: {
+                    maxHeight: window.innerHeight * 0.75,
+                    overflowY: 'auto',
+                    padding: '10 5',
+                    display: show ? 'block' : 'none',
+                    position: 'absolute',
+                    backgroundColor: '#fff',
+                    color: 'black',
+                    boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+                    zIndex: 401,
+                    minWidth: '100%',
+                } },
+                React.createElement("table", { className: "table", style: { margin: 0 } },
+                    React.createElement("tbody", null,
+                        React.createElement("tr", { onClick: function (evt) {
+                                evt.preventDefault();
+                                props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
+                            } },
+                            React.createElement("td", null,
+                                React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
+                            React.createElement("td", null, "All")),
+                        props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
+                            React.createElement("td", null,
+                                React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
+                            React.createElement("td", null, f.Text))); })))))));
+};
+exports.default = MultiSelect;

package/lib/RadioButtons.d.ts

@@ -0,0 +1,15 @@
+interface IProps<T> {
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T) => void;
+    Help?: string | JSX.Element;
+    Position?: ('vertical' | 'horizontal');
+    Options: {
+        Value: string;
+        Label: string;
+        Disabled?: boolean;
+    }[];
+    Label?: string;
+}
+export default function RadioButtons<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/RadioButtons.js

@@ -0,0 +1,62 @@
+"use strict";
+// ******************************************************************************************************
+//  RadioButtons.tsx - Gbtc
+//
+//  Copyright © 2024, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  06/10/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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RadioButtons;
+var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
+function RadioButtons(props) {
+    var _a;
+    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var showHelpIcon = props.Help !== undefined;
+    return (React.createElement("div", { className: "form-group", "data-help": guid.current },
+        React.createElement("label", { className: "form-check-label d-block" }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
+        props.Options.map(function (option, index) {
+            var _a;
+            return (React.createElement("div", { key: index, className: "form-check ".concat(props.Position == 'vertical' ? '' : 'form-check-inline') },
+                React.createElement("input", { type: "radio", className: "form-check-input", style: { zIndex: 1 }, onChange: function () {
+                        var record = __assign({}, props.Record);
+                        record[props.Field] = option.Value;
+                        props.Setter(record);
+                    }, value: option.Value, checked: props.Record[props.Field] === option.Value, disabled: (_a = option.Disabled) !== null && _a !== void 0 ? _a : false, id: "".concat(option.Label, "-").concat(index) }),
+                React.createElement("label", { className: "form-check-label", htmlFor: "".concat(option.Label, "-").concat(index) }, option.Label)));
+        }),
+        showHelpIcon ?
+            React.createElement(React.Fragment, null,
+                React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, "?"),
+                React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help))
+            : null));
+}

package/lib/SearchableSelect.d.ts

@@ -1,18 +1,60 @@
-import * as React from 'react';
-interface IOption {
-    Value: string;
-    Label: string;
-}
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    AllowCustom?: boolean;
-    Search: (search: string) => [promise: Promise<IOption[]>, callback?: () => void];
-    Label?: string;
-    Disabled?: boolean;
-    Help?: string | JSX.Element;
-    Style?: React.CSSProperties;
-}
-export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
-export {};
+import * as React from 'react';
+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;
+    /**
+    * Flag to allow custom input values
+    * @type {boolean}
+    * @optional
+    */
+    AllowCustom?: boolean;
+    /**
+    * Function to perform a search and return a promise with a list of IOption and an optional callback
+    * @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;
+    /**
+    * CSS styles to apply to the form group
+    * @type {React.CSSProperties}
+    * @optional
+    */
+    Style?: React.CSSProperties;
+}
+export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/SearchableSelect.js

@@ -1,85 +1,84 @@
-"use strict";
-// ******************************************************************************************************
-//  SearchableSelect.tsx - Gbtc
-//
-//  Copyright © 2024, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  03/17/2024 - C. Lackner
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 });
-var React = require("react");
-var StylableSelect_1 = require("./StylableSelect");
-var styled_components_1 = require("styled-components");
-function SearchableSelect(props) {
-    var _a = React.useState(props.Record[props.Field].toString()), search = _a[0], setSearch = _a[1];
-    var _b = React.useState([]), results = _b[0], setResults = _b[1];
-    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
-    React.useEffect(function () {
-        setLoading(true);
-        var _a = props.Search(search), h = _a[0], c = _a[1];
-        h.then(function (d) { setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); })); setLoading(false); });
-        return c;
-    }, [search]);
-    var options = React.useMemo(function () {
-        var _a, _b, _c;
-        var r = [];
-        if ((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false)
-            r.push({ Value: search, Element: React.createElement("p", null, search) });
-        r.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: (((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false) ? function () {
-                        var _a;
-                        return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
-                    } : function () { return setSearch(props.Record[props.Field].toString()); }) }),
-                React.createElement("div", { className: "input-group-append" },
-                    React.createElement("span", { className: "input-group-text" },
-                        React.createElement(Icon, null))),
-                "s")
-        });
-        r.push.apply(r, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
-        if (!((_c = props.AllowCustom) !== null && _c !== void 0 ? _c : false))
-            r.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, props.Record[props.Field]) });
-        return r;
-    }, [search, props.Record[props.Field], results, props.Disabled, loading]);
-    var update = React.useCallback(function (record) {
-        if (record[props.Field].toString().startsWith('search-'))
-            return;
-        props.Setter(record);
-        setSearch(record[props.Field].toString());
-    }, [props.Setter, props.Field]);
-    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 });
-}
-exports.default = SearchableSelect;
-var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"], ["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"])));
-var Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"], ["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"])), spin);
-var templateObject_1, templateObject_2;
+"use strict";
+// ******************************************************************************************************
+//  SearchableSelect.tsx - Gbtc
+//
+//  Copyright © 2024, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  03/17/2024 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = SearchableSelect;
+var React = require("react");
+var StylableSelect_1 = require("./StylableSelect");
+var styled_components_1 = require("styled-components");
+function SearchableSelect(props) {
+    var _a = React.useState(props.Record[props.Field].toString()), search = _a[0], setSearch = _a[1];
+    var _b = React.useState([]), results = _b[0], setResults = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    React.useEffect(function () {
+        setLoading(true);
+        var _a = props.Search(search), h = _a[0], c = _a[1];
+        h.then(function (d) { setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); })); setLoading(false); });
+        return c;
+    }, [search]);
+    var options = React.useMemo(function () {
+        var _a, _b, _c;
+        var r = [];
+        if ((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false)
+            r.push({ Value: search, Element: React.createElement("p", null, search) });
+        r.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: (((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false) ? function () {
+                        var _a;
+                        return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
+                    } : function () { return setSearch(props.Record[props.Field].toString()); }) }),
+                React.createElement("div", { className: "input-group-append" },
+                    React.createElement("span", { className: "input-group-text" },
+                        React.createElement(Icon, null))))
+        });
+        r.push.apply(r, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
+        if (!((_c = props.AllowCustom) !== null && _c !== void 0 ? _c : false))
+            r.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, props.Record[props.Field]) });
+        return r;
+    }, [search, props.Record[props.Field], results, props.Disabled, loading]);
+    var update = React.useCallback(function (record) {
+        if (record[props.Field].toString().startsWith('search-'))
+            return;
+        props.Setter(record);
+        setSearch(record[props.Field].toString());
+    }, [props.Setter, props.Field]);
+    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 });
+}
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"], ["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"])));
+var Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"], ["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"])), spin);
+var templateObject_1, templateObject_2;