@gpa-gemstone/react-forms 1.1.83 → 1.1.85

package/lib/CheckBox.js

@@ -55,12 +55,11 @@ function CheckBox(props) {
                 props.Setter(record);
             }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled }),
         showHelpIcon || showLabel ?
-            React.createElement("label", { className: 'form-check-label' },
-                showLabel ? label : '',
-                showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', 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) : null,
+            React.createElement("label", { className: "form-check-label d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (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,
         showHelpIcon ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null));

package/lib/DatePicker.js

@@ -44,6 +44,11 @@ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
  * Component that allows a user to pick a date or datetime.
 */
 function DateTimePicker(props) {
+    var inputRef = React.useRef(null);
+    var width = (0, helper_functions_1.useGetContainerPosition)(inputRef).width;
+    var _a = React.useState(false), isTextOverflowing = _a[0], setIsTextOverflowing = _a[1];
+    var _b = React.useState(false), isInputHovered = _b[0], setIsInputHovered = _b[1];
+    var overflowGUID = React.useState((0, helper_functions_1.CreateGuid)())[0];
     // Formats for displaying dates in the input box and storing in the record.
     var boxFormat = getBoxFormat(props.Type, props.Accuracy);
     var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
@@ -51,15 +56,15 @@ function DateTimePicker(props) {
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
     // State and ref declarations.
     var divRef = React.useRef(null);
-    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    var helpGuid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _b = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _b[0], setBoxRecord = _b[1];
-    var _c = React.useState(parse(props.Record)), pickerRecord = _c[0], setPickerRecord = _c[1];
-    var _d = React.useState(""), feedbackMessage = _d[0], setFeedbackMessage = _d[1];
-    var _e = React.useState(false), showOverlay = _e[0], setShowOverlay = _e[1];
-    var _f = React.useState(0), top = _f[0], setTop = _f[1];
-    var _g = React.useState(0), left = _g[0], setLeft = _g[1];
+    var _d = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _d[0], setBoxRecord = _d[1];
+    var _e = React.useState(parse(props.Record)), pickerRecord = _e[0], setPickerRecord = _e[1];
+    var _f = React.useState(""), feedbackMessage = _f[0], setFeedbackMessage = _f[1];
+    var _g = React.useState(false), showOverlay = _g[0], setShowOverlay = _g[1];
+    var _h = React.useState(0), top = _h[0], setTop = _h[1];
+    var _j = React.useState(0), left = _j[0], setLeft = _j[1];
     var allowNull = React.useMemo(function () { var _a; return (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false; }, [props.AllowEmpty]);
     React.useEffect(function () {
         if (props.Record[props.Field] !== null) {
@@ -128,35 +133,6 @@ function DateTimePicker(props) {
             }
         }
     }
-    function getBoxFormat(type, accuracy) {
-        var dateTime = type !== null && type !== void 0 ? type : 'date';
-        var timeUnit = accuracy !== null && accuracy !== void 0 ? accuracy : 'second';
-        if (dateTime === 'time') {
-            if (timeUnit === 'minute') {
-                return "HH:mm";
-            }
-            else if (timeUnit === 'second') {
-                return "HH:mm:ss";
-            }
-            else {
-                return "HH:mm:ss.SSS";
-            }
-        }
-        else if (dateTime === 'datetime-local') {
-            if (timeUnit === 'minute') {
-                return "YYYY-MM-DD[T]HH:mm";
-            }
-            else if (timeUnit === 'second') {
-                return "YYYY-MM-DD[T]HH:mm:ss";
-            }
-            else {
-                return "YYYY-MM-DD[T]HH:mm:ss.SSS";
-            }
-        }
-        else {
-            return "YYYY-MM-DD";
-        }
-    }
     function getFeedbackMessage() {
         if (feedbackMessage.length != 0) {
             return feedbackMessage;
@@ -214,22 +190,80 @@ function DateTimePicker(props) {
         }
         setBoxRecord(value);
     }
+    React.useEffect(function () {
+        if (inputRef.current == null)
+            return;
+        var inputWidth = getInputWidth(inputRef.current, boxRecord, step);
+        setIsTextOverflowing(inputWidth > width);
+    }, [width, boxRecord, step]);
     return (React.createElement("div", { className: "form-group", ref: divRef },
         showHelpIcon || showLabel ?
-            React.createElement("label", { className: 'd-flex align-items-center' },
-                showLabel ? label : '',
-                showHelpIcon ? React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', 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) : null,
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpGuid },
+                    React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
+            : null,
         showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpGuid, Class: "info", Position: "bottom" }, props.Help)
             : null,
         React.createElement("input", { className: "gpa-gemstone-datetime form-control ".concat(IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
                 valueChange(evt.target.value);
-            }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
+            }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step, ref: inputRef, "data-tooltip": overflowGUID, onMouseOver: function () { return setIsInputHovered(true); }, onMouseOut: function () { return setIsInputHovered(false); } }),
         React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
+        React.createElement(ToolTip_1.default, { Show: isTextOverflowing && isInputHovered, Target: overflowGUID }, props.Format != null ? moment(boxRecord).format(props.Format) : boxRecord),
         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 })));
 }
+function getBoxFormat(type, accuracy) {
+    var dateTime = type !== null && type !== void 0 ? type : 'date';
+    var timeUnit = accuracy !== null && accuracy !== void 0 ? accuracy : 'second';
+    if (dateTime === 'time') {
+        if (timeUnit === 'minute') {
+            return "HH:mm";
+        }
+        else if (timeUnit === 'second') {
+            return "HH:mm:ss";
+        }
+        else {
+            return "HH:mm:ss.SSS";
+        }
+    }
+    else if (dateTime === 'datetime-local') {
+        if (timeUnit === 'minute') {
+            return "YYYY-MM-DD[T]HH:mm";
+        }
+        else if (timeUnit === 'second') {
+            return "YYYY-MM-DD[T]HH:mm:ss";
+        }
+        else {
+            return "YYYY-MM-DD[T]HH:mm:ss.SSS";
+        }
+    }
+    else {
+        return "YYYY-MM-DD";
+    }
+}
+var getInputWidth = function (inputRef, currentValue, currentStep) {
+    var computedStyle = window.getComputedStyle(inputRef);
+    var dummyInput = document.createElement('input');
+    dummyInput.type = inputRef.type;
+    dummyInput.value = currentValue;
+    dummyInput.step = currentStep;
+    dummyInput.style.font = computedStyle.font;
+    dummyInput.style.fontSize = computedStyle.fontSize;
+    dummyInput.style.fontFamily = computedStyle.fontFamily;
+    dummyInput.style.fontWeight = computedStyle.fontWeight;
+    dummyInput.style.letterSpacing = computedStyle.letterSpacing;
+    dummyInput.style.whiteSpace = 'nowrap';
+    // Position it off-screen and hide it so it doesn't affect layout
+    dummyInput.style.position = 'absolute';
+    dummyInput.style.visibility = 'hidden';
+    document.body.appendChild(dummyInput);
+    var width = dummyInput.getBoundingClientRect().width;
+    // Clean up
+    document.body.removeChild(dummyInput);
+    return width;
+};

package/lib/FileUpload.js

@@ -71,7 +71,7 @@ var FileUpload = function (props) {
                     React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'red' })))),
         isFileUpload ?
             React.createElement(React.Fragment, null,
-                React.createElement("div", { className: 'row align-items-center justify-content-center', style: { border: '2px dashed var(--secondary)' } },
+                React.createElement("div", { className: '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' },

package/lib/Input.js

@@ -104,12 +104,11 @@ function Input(props) {
     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.Style },
         showHelpIcon || showLabel ?
-            React.createElement("label", { className: 'd-flex align-items-center' },
-                showLabel ? label : '',
-                showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', 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) : null,
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (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,
         showHelpIcon ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,

package/lib/InputWithButton.js

@@ -94,10 +94,12 @@ function InputWithButton(props) {
     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", { className: 'd-flex align-items-center' },
-                showLabel ? label : '',
+                React.createElement("span", null, showLabel ? label : ''),
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', 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) : 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)
+            : null,
         showHelpIcon ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,

package/lib/MultiInput.js

@@ -50,7 +50,7 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 //Only supporting string/number arrays for now
 function MultiInput(props) {
     var _a;
-    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
+    var 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) {
@@ -60,10 +60,11 @@ function MultiInput(props) {
     return (React.createElement(React.Fragment, null,
         fieldArray.length === 0 ?
             React.createElement(React.Fragment, null,
-                React.createElement("label", { className: 'd-flex align-items-center' }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
+                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("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
-                            React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
+                        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;
@@ -72,7 +73,7 @@ function MultiInput(props) {
                         " ",
                         React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
                         " ")),
-                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid.current, Class: "info", Position: "bottom" }, props.Help))
+                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;

package/lib/MutliCheckBoxSelect.js

@@ -96,11 +96,11 @@ var MultiSelect = function (props) {
     return (React.createElement("div", { className: "form-group" },
         showLabel || showHelpIcon ?
             React.createElement("label", { className: 'd-flex align-items-center' },
-                showLabel ?
-                    (props.Label === undefined ? 'Select' : props.Label) : '',
+                React.createElement("span", null, showLabel ?
+                    (props.Label === undefined ? 'Select' : props.Label) : ''),
                 showHelpIcon ?
-                    React.createElement("button", { className: 'btn btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helperGuid },
-                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
+                    React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helperGuid },
+                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
                     : null) : null,
         showHelpIcon ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: helperGuid, Class: "info", Position: "bottom" }, props.Help)

package/lib/RadioButtons.js

@@ -39,17 +39,19 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 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 guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    // 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: "form-group" },
-        React.createElement("label", { className: "form-check-label w-100 d-flex align-items-center" }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
+        React.createElement("label", { className: "form-check-label w-100 d-flex align-items-center" },
+            React.createElement("span", null, label),
             showHelpIcon ?
                 React.createElement(React.Fragment, null,
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
-                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })),
-                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "bottom" }, props.Help))
+                    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 })),
+                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help))
                 : null),
         props.Options.map(function (option, index) {
             var _a;

package/lib/Select.js

@@ -42,12 +42,8 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function Select(props) {
     var _a;
-    var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
-    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
-    // Effect to generate a unique ID for the component.
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
+    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     // Effect to validate the current value against the available options.
     React.useEffect(function () {
         var _a;
@@ -81,12 +77,11 @@ function Select(props) {
     var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { className: "form-group" },
         showHelpIcon || showLabel ?
-            React.createElement("label", { className: 'd-flex align-items-center' },
-                showLabel ? label : '',
-                showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', 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) : null,
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (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,
         showHelpIcon ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,

package/lib/StylableSelect.js

@@ -117,14 +117,17 @@ function StylableSelect(props) {
         SetRecord(option);
         setShow(false);
     };
+    // Variables to control the rendering of label and help icon.
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
-        (props.Label !== "") ?
-            React.createElement("label", { className: 'd-flex align-items-center' },
-                props.Label === undefined ? props.Field : props.Label,
-                props.Help !== undefined ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', 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) : null,
+        showHelpIcon || showLabel ?
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (React.createElement("span", { onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid, className: "ml-2 d-flex align-items-center" },
+                    React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
+            : null,
         props.Help !== undefined ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,

package/lib/TextArea.js

@@ -43,7 +43,7 @@ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function TextArea(props) {
     // Internal ref and state hooks for managing the component state.
     var internal = React.useRef(false);
-    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
+    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
     var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
     var _b = React.useState(''), heldVal = _b[0], setHeldVal = _b[1];
     // Effect to handle changes to the record's field value.
@@ -66,14 +66,13 @@ function TextArea(props) {
     var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { className: "form-group" },
         showHelpIcon || showLabel ?
-            React.createElement("label", { className: 'd-flex align-items-center' },
-                showLabel ? label : '',
-                showHelpIcon ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
-                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
-                    : null) : null,
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (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,
         showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "bottom" }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
         React.createElement("textarea", { rows: props.Rows, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal == null ? '' : heldVal, disabled: props.Disabled == null ? false : props.Disabled }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));

package/lib/TimePicker.js

@@ -39,17 +39,20 @@ var ToolTip_1 = require("./ToolTip");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function DatePicker(props) {
-    var _a;
-    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    // Variables to control the rendering of label and help icon.
+    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.Help != null || props.Label !== "") ?
-            React.createElement("label", { className: 'd-flex align-items-center' }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
-                props.Help != null ?
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
-                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : React.createElement(React.Fragment, null))
-            : React.createElement(React.Fragment, null),
-        React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "bottom" }, props.Help),
+        showHelpIcon || showLabel ?
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, showLabel ? label : ''),
+                showHelpIcon && (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(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help),
         React.createElement("input", { className: 'form-control' + (props.Valid(props.Field) ? '' : ' is-invalid'), type: "time", step: props.Step === null ? 60 : props.Step, onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 if (evt.target.value !== '')

package/lib/ToggleSwitch.js

@@ -39,22 +39,24 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var ToolTip_1 = require("./ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function ToggleSwitch(props) {
-    var helpID = React.useRef((0, helper_functions_1.CreateGuid)());
-    var switchID = React.useRef((0, helper_functions_1.CreateGuid)());
+    var helpID = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var switchID = React.useState((0, helper_functions_1.CreateGuid)())[0];
     var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    // 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 },
         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.current }),
-        React.createElement("label", { className: "custom-control-label", htmlFor: switchID.current },
-            props.Label == null ? props.Field : props.Label,
+            }, 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 d-flex align-items-center", htmlFor: switchID },
+            React.createElement("span", null, label),
             showHelpIcon ?
                 React.createElement(React.Fragment, null,
-                    React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpID.current },
-                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })),
-                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpID.current, Zindex: 9999, Class: "info", Position: "bottom" }, props.Help))
+                    React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpID },
+                        React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 })),
+                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpID, Zindex: 9999, Class: "info", Position: "bottom" }, props.Help))
                 : null)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.83",
+  "version": "1.1.85",
   "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.82",
-    "@gpa-gemstone/gpa-symbols": "0.0.48",
-    "@gpa-gemstone/helper-functions": "0.0.37",
+    "@gpa-gemstone/application-typings": "0.0.83",
+    "@gpa-gemstone/gpa-symbols": "0.0.49",
+    "@gpa-gemstone/helper-functions": "0.0.39",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",