@gpa-gemstone/react-forms 1.1.56 → 1.1.58

package/lib/ArrayCheckBoxes.js

@@ -43,6 +43,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 function ArrayCheckBoxes(props) {
     var Remove = function (cb) {
         var a = __spreadArray([], props.Record[props.Field], true);
@@ -58,20 +59,21 @@ function ArrayCheckBoxes(props) {
         a.sort();
         return a;
     };
+    var id = React.useRef("array-checkbox-" + (0, helper_functions_1.CreateGuid)());
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", null, props.Label == null ? props.Field : props.Label),
         React.createElement("br", null),
         React.createElement("div", { className: "form-check form-check-inline" },
-            React.createElement("input", { className: "form-check-input", type: "checkbox", checked: JSON.stringify(props.Record[props.Field]) === JSON.stringify(props.Checkboxes.map(function (x) { return x.ID; })), onChange: function (evt) {
+            React.createElement("input", { id: id.current + "-all", className: "form-check-input", type: "checkbox", checked: JSON.stringify(props.Record[props.Field]) === JSON.stringify(props.Checkboxes.map(function (x) { return x.ID; })), onChange: function (evt) {
                     var _a;
                     return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? props.Checkboxes.map(function (x) { return x.ID; }) : [], _a)));
                 } }),
-            React.createElement("label", { className: "form-check-label" }, "All")),
+            React.createElement("label", { htmlFor: id.current + "-all", className: "form-check-label" }, "All")),
         props.Checkboxes.map(function (cb, i) { return (React.createElement("div", { key: i, className: "form-check form-check-inline" },
-            React.createElement("input", { className: "form-check-input", type: "checkbox", checked: props.Record[props.Field].find(function (x) { return cb.ID === x; }) !== undefined, onChange: function (evt) {
+            React.createElement("input", { id: id.current + "-" + i, className: "form-check-input", type: "checkbox", checked: props.Record[props.Field].find(function (x) { return cb.ID === x; }) !== undefined, onChange: function (evt) {
                     var _a;
                     return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? Add(cb) : Remove(cb), _a)));
                 } }),
-            React.createElement("label", { className: "form-check-label" }, cb.Label))); })));
+            React.createElement("label", { htmlFor: id.current + "-" + i, className: "form-check-label" }, cb.Label))); })));
 }
 exports.default = ArrayCheckBoxes;

package/lib/DatePicker.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import * as moment from 'moment';
 import { Accuracy } from './DateTimeUI/Clock';
 export declare type TimeUnit = ('datetime-local' | 'date' | 'time');
 interface IProps<T> {
@@ -14,6 +15,7 @@ interface IProps<T> {
     Help?: string | JSX.Element;
     AllowEmpty?: boolean;
     Accuracy?: Accuracy;
+    MinDate?: moment.Moment;
 }
 export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/DatePicker.js

@@ -44,7 +44,6 @@ function DateTimePicker(props) {
     var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
     var divRef = React.useRef(null);
-    var recordChange = React.useRef(false);
     var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
     var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
@@ -58,43 +57,15 @@ function DateTimePicker(props) {
         setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     React.useEffect(function () {
-        setPickerRecord(parse(props.Record));
-        setBoxRecord(parse(props.Record).format(boxFormat));
-        recordChange.current = false;
-    }, [props.Record]);
-    React.useEffect(function () {
-        var _a, _b;
-        var _c;
-        if (!recordChange.current)
-            return;
-        var date = moment(boxRecord, boxFormat);
-        var validStartDate = moment("1753-01-01", "YYYY-MM-DD");
-        var valid = true;
-        // Invalid date format
-        if (!date.isValid()) {
-            setFeedbackMessage("Please enter a date as " + boxFormat);
-            valid = false;
-        }
-        // Date before 1753
-        else if (date.isBefore(validStartDate)) {
-            setFeedbackMessage("Date cannot be before " + validStartDate.format(boxFormat));
-            valid = false;
+        if (props.Record[props.Field] !== null) {
+            setPickerRecord(parse(props.Record));
+            setBoxRecord(parse(props.Record).format(boxFormat));
         }
         else {
-            setFeedbackMessage("");
+            setPickerRecord(undefined);
+            setBoxRecord('');
         }
-        if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && boxRecord.length === 0 && !valid && props.Record !== null)
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
-        if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
-            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _b)));
-    }, [boxRecord]);
-    React.useEffect(function () {
-        var _a;
-        if (!recordChange.current)
-            return;
-        if (pickerRecord.format(recordFormat) !== parse(props.Record).format(recordFormat))
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = pickerRecord.format(recordFormat), _a)));
-    }, [pickerRecord]);
+    }, [props.Record]);
     React.useLayoutEffect(function () {
         var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
         if (node.height === 0 && node.width === 0) {
@@ -108,10 +79,29 @@ function DateTimePicker(props) {
     React.useEffect(function () {
         window.addEventListener('click', onWindowClick);
         return function () { window.removeEventListener('click', onWindowClick); };
-    }, []);
+    }, [props.Record, props.Field, boxFormat]);
+    function setPickerAndRecord(arg) {
+        var _a, _b;
+        var _c;
+        setPickerRecord(arg);
+        if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && arg === undefined && props.Record[props.Field] !== null)
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
+        var valid = arg != undefined && validateDate(arg);
+        if (valid && props.Record[props.Field].toString() !== arg.format(recordFormat))
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = arg.format(recordFormat), _b)));
+    }
     function onWindowClick(evt) {
-        if (evt.target.closest(".gpa-gemstone-datetime") == null)
+        if (evt.target.closest(".gpa-gemstone-datetime") == null) {
             setShowOverlay(false);
+            if (props.Record[props.Field] !== null) {
+                setPickerAndRecord(parse(props.Record));
+                setBoxRecord(parse(props.Record).format(boxFormat));
+            }
+            else {
+                setPickerAndRecord(undefined);
+                setBoxRecord('');
+            }
+        }
     }
     function getBoxFormat(type, accuracy) {
         var dateTime = type !== null && type !== void 0 ? type : 'date';
@@ -147,10 +137,25 @@ function DateTimePicker(props) {
             return feedbackMessage;
         }
         else if (props.Feedback == null || props.Feedback.length == 0) {
-            return props.Field.toString();
+            return props.Field.toString() + " is a required field.";
         }
         else {
-            return props.Field.toString() + " is a required field.";
+            return props.Feedback;
+        }
+    }
+    function validateDate(date) {
+        var minStartDate = props.MinDate != null ? props.MinDate.startOf('day') : moment("1753-01-01", "YYYY-MM-DD").startOf('day');
+        if (!date.isValid()) {
+            setFeedbackMessage("Please enter a valid date.");
+            return false;
+        }
+        else if (date.startOf('day').isBefore(minStartDate)) {
+            setFeedbackMessage("Date must be on or after " + minStartDate.format("MM-DD-YYYY"));
+            return false;
+        }
+        else {
+            setFeedbackMessage("");
+            return true;
         }
     }
     var showLabel = props.Label !== "";
@@ -162,6 +167,23 @@ function DateTimePicker(props) {
             return false;
         return props.Valid(props.Field);
     };
+    function valueChange(value) {
+        var _a, _b;
+        var allowNull = props.AllowEmpty === undefined ? false : props.AllowEmpty;
+        var date = moment(value, boxFormat);
+        if (allowNull && value === '') {
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
+            setPickerAndRecord(undefined);
+        }
+        else if (validateDate(date)) {
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(value, boxFormat).format(recordFormat), _b)));
+            setPickerAndRecord(moment(value, boxFormat));
+        }
+        else {
+            setPickerAndRecord(undefined);
+        }
+        setBoxRecord(value);
+    }
     return (React.createElement("div", { className: "form-group", ref: divRef },
         showHelpIcon || showLabel ?
             React.createElement("label", null,
@@ -180,12 +202,13 @@ function DateTimePicker(props) {
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
         React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control " + (IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
-                var _a;
-                setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
-                recordChange.current = true;
+                valueChange(evt.target.value);
             }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
         React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
-        React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); recordChange.current = true; if (props.Type === 'date')
-                setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined ? 'date' : props.Type, Accuracy: props.Accuracy })));
+        React.createElement(DateTimePopup_1.default, { Setter: function (d) {
+                setPickerAndRecord(d);
+                if (props.Type === 'date')
+                    setShowOverlay(false);
+            }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined ? 'date' : props.Type, Accuracy: props.Accuracy })));
 }
 exports.default = DateTimePicker;

package/lib/DateTimeUI/Calender.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as moment from 'moment';
 interface IProps {
-    DateTime: moment.Moment;
+    DateTime: moment.Moment | undefined;
     Setter: (record: moment.Moment) => void;
 }
 export default function Calender(props: IProps): JSX.Element;

package/lib/DateTimeUI/Calender.js

@@ -25,14 +25,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var moment = require("moment");
 function Calender(props) {
-    var _a = React.useState([]), weeks = _a[0], setWeeks = _a[1];
-    var _b = React.useState(props.DateTime.month()), month = _b[0], setMonth = _b[1];
-    var _c = React.useState(props.DateTime.year()), year = _c[0], setYear = _c[1];
-    var _d = React.useState('month'), mode = _d[0], setMode = _d[1];
-    var _e = React.useState('None'), hover = _e[0], setHover = _e[1];
+    var _a, _b, _c, _d;
+    var _e = React.useState([]), weeks = _e[0], setWeeks = _e[1];
+    var _f = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : 0), month = _f[0], setMonth = _f[1];
+    var _g = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.year()) !== null && _d !== void 0 ? _d : moment.utc().year()), year = _g[0], setYear = _g[1];
+    var _h = React.useState('month'), mode = _h[0], setMode = _h[1];
+    var _j = React.useState('None'), hover = _j[0], setHover = _j[1];
     React.useEffect(function () {
-        setMonth(isNaN(props.DateTime.month()) ? 0 : props.DateTime.month());
-        setYear(isNaN(props.DateTime.year()) ? moment.utc().year() : props.DateTime.year());
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        setMonth(isNaN((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : NaN) ? 0 : ((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.month()) !== null && _d !== void 0 ? _d : 0));
+        setYear(isNaN((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.year()) !== null && _f !== void 0 ? _f : NaN) ? moment.utc().year() : ((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.year()) !== null && _h !== void 0 ? _h : moment.utc().year()));
     }, [props.DateTime]);
     React.useEffect(function () {
         var d1 = moment([year, month, 1]).startOf('week');
@@ -113,14 +115,17 @@ function Calender(props) {
                     React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
                     React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
             React.createElement("tbody", null,
-                mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
-                    React.createElement(DayCell, { date: w.sunday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
-                    React.createElement(DayCell, { date: w.monday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
-                    React.createElement(DayCell, { date: w.tuesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
-                    React.createElement(DayCell, { date: w.wednesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
-                    React.createElement(DayCell, { date: w.thursday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
-                    React.createElement(DayCell, { date: w.friday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
-                    React.createElement(DayCell, { date: w.saturday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } })); }) : null,
+                mode === 'month' ? weeks.map(function (w) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                    return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
+                        React.createElement(DayCell, { date: w.sunday, month: month, day: (_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.date()) !== null && _b !== void 0 ? _b : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
+                        React.createElement(DayCell, { date: w.monday, month: month, day: (_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.date()) !== null && _d !== void 0 ? _d : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
+                        React.createElement(DayCell, { date: w.tuesday, month: month, day: (_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.date()) !== null && _f !== void 0 ? _f : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
+                        React.createElement(DayCell, { date: w.wednesday, month: month, day: (_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.date()) !== null && _h !== void 0 ? _h : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
+                        React.createElement(DayCell, { date: w.thursday, month: month, day: (_k = (_j = props.DateTime) === null || _j === void 0 ? void 0 : _j.date()) !== null && _k !== void 0 ? _k : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
+                        React.createElement(DayCell, { date: w.friday, month: month, day: (_m = (_l = props.DateTime) === null || _l === void 0 ? void 0 : _l.date()) !== null && _m !== void 0 ? _m : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
+                        React.createElement(DayCell, { date: w.saturday, month: month, day: (_p = (_o = props.DateTime) === null || _o === void 0 ? void 0 : _o.date()) !== null && _p !== void 0 ? _p : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } }));
+                }) : null,
                 mode === 'year' ? React.createElement(React.Fragment, null,
                     React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
                         React.createElement(MonthCell, { date: moment([year, 0, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),

package/lib/DateTimeUI/Clock.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as moment from 'moment';
 interface IProps {
-    DateTime: moment.Moment;
+    DateTime: moment.Moment | undefined;
     Setter: (record: moment.Moment) => void;
     Accuracy?: Accuracy;
 }

package/lib/DateTimeUI/Clock.js

@@ -26,25 +26,28 @@ var React = require("react");
 var moment = require("moment");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 function Clock(props) {
-    var _a = React.useState(props.DateTime.format("HH")), hour = _a[0], setHour = _a[1];
-    var _b = React.useState(props.DateTime.format("mm")), minute = _b[0], setMinute = _b[1];
-    var _c = React.useState(props.DateTime.format("ss")), second = _c[0], setSecond = _c[1];
-    var _d = React.useState(props.DateTime.format("SSS")), millisecond = _d[0], setMilliSecond = _d[1];
-    var _e = React.useState('none'), hover = _e[0], setHover = _e[1];
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00'), hour = _j[0], setHour = _j[1];
+    var _k = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00'), minute = _k[0], setMinute = _k[1];
+    var _l = React.useState((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00'), second = _l[0], setSecond = _l[1];
+    var _m = React.useState((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000'), millisecond = _m[0], setMilliSecond = _m[1];
+    var _o = React.useState('none'), hover = _o[0], setHover = _o[1];
     React.useEffect(function () {
-        setHour(props.DateTime.format("HH"));
-        setMinute(props.DateTime.format("mm"));
-        setSecond(props.DateTime.format("ss"));
-        setMilliSecond(props.DateTime.format("SSS"));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        setHour((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00');
+        setMinute((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00');
+        setSecond((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00');
+        setMilliSecond((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000');
     }, [props.DateTime]);
     React.useEffect(function () {
+        var _a, _b, _c, _d;
         var h = parseInt(hour, 10);
         var m = parseInt(minute, 10);
         var s = parseInt(second, 10);
         var ms = parseInt(millisecond, 10);
         if (isNaN(h) || isNaN(m) || isNaN(s) || isNaN(ms))
             return;
-        if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second() || ms !== props.DateTime.millisecond()) {
+        if (h !== ((_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.hour()) || m !== ((_b = props.DateTime) === null || _b === void 0 ? void 0 : _b.minute()) || s !== ((_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.second()) || ms !== ((_d = props.DateTime) === null || _d === void 0 ? void 0 : _d.millisecond())) {
             var d = moment(props.DateTime);
             if (!d.isValid())
                 d = moment.utc().startOf('d');

package/lib/DateTimeUI/DateTimePopup.d.ts

@@ -3,7 +3,7 @@ import * as moment from 'moment';
 import { TimeUnit } from '../DatePicker';
 import { Accuracy } from './Clock';
 interface IProps {
-    DateTime: moment.Moment;
+    DateTime: moment.Moment | undefined;
     Setter: (record: moment.Moment) => void;
     Valid: boolean;
     Feedback?: string;

package/lib/Input.js

@@ -39,31 +39,31 @@ var React = require("react");
 var HelperMessage_1 = require("./HelperMessage");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 function Input(props) {
+    var internal = React.useRef(false);
     var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
     var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
-    var _c = React.useState(false), internal = _c[0], setInternal = _c[1];
-    var _d = React.useState(''), heldVal = _d[0], setHeldVal = _d[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
+    var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
     React.useEffect(function () {
         setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     React.useEffect(function () {
-        if (!internal) {
+        if (!internal.current) {
             setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
         }
-        setInternal(false);
+        internal.current = false;
     }, [props.Record[props.Field]]);
     function onBlur() {
         var _a;
         var _b;
         var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
         if (!allowNull && (props.Type === 'number' || props.Type === 'integer') && heldVal === '') {
-            setInternal(false);
+            internal.current = false;
             props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = (_b = props.DefaultValue) !== null && _b !== void 0 ? _b : 0, _a)));
         }
     }
     function valueChange(value) {
         var _a, _b, _c;
-        setInternal(true);
+        internal.current = true;
         var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
         if (props.Type === 'number') {
             var v = (value.length > 0 && value[0] === '.' ? ("0" + value) : value);
@@ -101,6 +101,6 @@ function Input(props) {
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
         React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled, onBlur: onBlur, step: 'any' }),
-        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
 }
 exports.default = Input;

package/lib/InputWithButton.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps<T> {
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T) => void;
+    Valid: (field: keyof T) => boolean;
+    Label?: string;
+    Feedback?: string;
+    InputDisabled?: boolean;
+    Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
+    Help?: string | JSX.Element;
+    InputStyle?: React.CSSProperties;
+    AllowNull?: boolean;
+    Size?: 'small' | 'large';
+    DefaultValue?: number;
+    OnBtnClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    BtnLabel: string;
+    BtnClass?: string;
+    BtnDisabled?: boolean;
+    BtnStyle?: React.CSSProperties;
+}
+declare function InputWithButton<T>(props: IProps<T>): JSX.Element;
+export default InputWithButton;

package/lib/InputWithButton.js

@@ -0,0 +1,107 @@
+"use strict";
+// ******************************************************************************************************
+//  InputWithButton.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:
+//  ----------------------------------------------------------------------------------------------------
+//  05/02/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 });
+var React = require("react");
+var HelperMessage_1 = require("./HelperMessage");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+function InputWithButton(props) {
+    var internal = React.useRef(false);
+    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    React.useEffect(function () {
+        if (!internal.current) {
+            setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
+        }
+        internal.current = false;
+    }, [props.Record[props.Field]]);
+    function onBlur() {
+        var _a;
+        var _b;
+        var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
+        if (!allowNull && (props.Type === 'number' || props.Type === 'integer') && heldVal === '') {
+            internal.current = false;
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = (_b = props.DefaultValue) !== null && _b !== void 0 ? _b : 0, _a)));
+        }
+    }
+    function valueChange(value) {
+        var _a, _b, _c;
+        internal.current = true;
+        var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
+        if (props.Type === 'number') {
+            var v = (value.length > 0 && value[0] === '.' ? ("0" + value) : value);
+            if ((0, helper_functions_1.IsNumber)(v) || (v === '' && allowNull)) {
+                props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = v !== '' ? parseFloat(v) : null, _a)));
+                setHeldVal(v);
+            }
+            else if (v === '') {
+                setHeldVal(v);
+            }
+        }
+        else if (props.Type === 'integer') {
+            if ((0, helper_functions_1.IsInteger)(value) || (value === '' && allowNull)) {
+                props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? parseFloat(value) : null, _b)));
+                setHeldVal(value);
+            }
+            else if (value === '') {
+                setHeldVal(value);
+            }
+        }
+        else {
+            props.Setter(__assign(__assign({}, props.Record), (_c = {}, _c[props.Field] = value !== '' ? value : null, _c)));
+            setHeldVal(value);
+        }
+    }
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
+    return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.InputStyle },
+        showHelpIcon || showLabel ?
+            React.createElement("label", null,
+                showLabel ? 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,
+        React.createElement("div", { className: "input-group" },
+            React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.InputDisabled == null ? false : props.InputDisabled, onBlur: onBlur, step: 'any' }),
+            React.createElement("div", { className: "input-group-prepend" },
+                React.createElement("button", { className: props.BtnClass != null ? props.BtnClass : "btn btn-outline-secondary", style: props.BtnStyle, disabled: props.BtnDisabled == null ? false : props.BtnDisabled, type: "button", onClick: function (evt) { return props.OnBtnClick(evt); } }, props.BtnLabel)),
+            React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback))));
+}
+exports.default = InputWithButton;

package/lib/ToggleSwitch.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface IProps<T> {
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T) => void;
+    Label?: string;
+    Disabled?: boolean;
+    Help?: string | JSX.Element;
+}
+export default function ToggleSwitch<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/ToggleSwitch.js

@@ -0,0 +1,61 @@
+"use strict";
+// ******************************************************************************************************
+//  ToggleSwitch.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:
+//  ----------------------------------------------------------------------------------------------------
+//  04/19/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 });
+var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
+function ToggleSwitch(props) {
+    var _a = React.useState(""), helpID = _a[0], setHelpID = _a[1];
+    var _b = React.useState(''), switchID = _b[0], setSwitchID = _b[1];
+    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
+    var showHelpIcon = props.Help !== undefined;
+    React.useEffect(function () {
+        setHelpID((0, helper_functions_1.CreateGuid)());
+        setSwitchID((0, helper_functions_1.CreateGuid)());
+    }, []);
+    return (React.createElement("div", { className: "custom-control custom-switch", "data-help": helpID },
+        React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
+                var record = __assign({}, props.Record);
+                record[props.Field] = evt.target.checked;
+                props.Setter(record);
+            }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled, id: switchID }),
+        React.createElement("label", { className: "custom-control-label", htmlFor: switchID }, props.Label == null ? props.Field : props.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: helpID, Zindex: 9999 }, props.Help))
+            : null));
+}
+exports.default = ToggleSwitch;

package/lib/index.d.ts

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

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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");
@@ -53,3 +53,7 @@ var ColorPicker_1 = require("./ColorPicker");
 exports.ColorPicker = ColorPicker_1.default;
 var SearchableSelect_1 = require("./SearchableSelect");
 exports.SearchableSelect = SearchableSelect_1.default;
+var ToggleSwitch_1 = require("./ToggleSwitch");
+exports.ToggleSwitch = ToggleSwitch_1.default;
+var InputWithButton_1 = require("./InputWithButton");
+exports.InputWithButton = InputWithButton_1.default;

package/package.json

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