@gpa-gemstone/react-forms 1.1.60 → 1.1.62

package/lib/Input.js

@@ -1,106 +1,111 @@
-"use strict";
-// ******************************************************************************************************
-//  Input.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  01/22/2020 - Billy Ernest
-//       Generated original version of source code.
-//  05/05/2021 - C. Lackner
-//       Added Help Message.
-//
-// ******************************************************************************************************
-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 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(''), 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.Style },
-        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("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.toString() + ' is a required field.' : props.Feedback)));
-}
-exports.default = Input;
+"use strict";
+// ******************************************************************************************************
+//  Input.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/22/2020 - Billy Ernest
+//       Generated original version of source code.
+//  05/05/2021 - C. Lackner
+//       Added Help Message.
+//
+// ******************************************************************************************************
+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 = Input;
+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(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
+    // Effect to generate a unique ID for the component.
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    // Handle changes to the record's field value.
+    React.useEffect(function () {
+        if (!internal.current) {
+            setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
+        }
+        internal.current = false;
+    }, [props.Record[props.Field]]);
+    // Handle blur event (loss of focus) on the input.
+    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)));
+        }
+    }
+    // Handle value change of the input.
+    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);
+        }
+    }
+    // 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.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.Style },
+        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("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.toString() + ' is a required field.' : props.Feedback)));
+}

package/lib/InputWithButton.d.ts

@@ -1,23 +1,109 @@
-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;
+import * as React from 'react';
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Function to determine the validity of a field
+      * @param field - Field of the record to check
+      * @returns {boolean}
+    */
+    Valid: (field: keyof T) => boolean;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
+    /**
+    * Flag to disable the input element
+    * @type {boolean}
+    * @optional
+    */
+    InputDisabled?: boolean;
+    /**
+    * Type of the input field
+    * @type {'number' | 'text' | 'password' | 'email' | 'color' | 'integer'}
+    * @optional
+   */
+    Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
+    /**
+    * Help message or element to display
+    * @type {string | JSX.Element}
+    * @optional
+   */
+    Help?: string | JSX.Element;
+    /**
+    * CSS styles to apply to the input group
+    * @type {React.CSSProperties}
+    * @optional
+    */
+    InputStyle?: React.CSSProperties;
+    /**
+    * Flag to allow null values
+    * @type {boolean}
+    * @optional
+   */
+    AllowNull?: boolean;
+    /**
+    * Size of the input field
+    * @type {'small' | 'large'}
+    * @optional
+    */
+    Size?: 'small' | 'large';
+    /**
+    * Default value for the input field if it's null
+    * @type {number}
+    * @optional
+    */
+    DefaultValue?: number;
+    /**
+    * Function to handle button click event
+    * @param evt - React mouse event
+    * @returns {void}
+    */
+    OnBtnClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+    * Label for the button
+    * @type {string}
+    */
+    BtnLabel: string;
+    /**
+    * CSS class for the button
+    * @type {string}
+    * @optional
+   */
+    BtnClass?: string;
+    /**
+    * Flag to disable the button
+    * @type {boolean}
+    * @optional
+    */
+    BtnDisabled?: boolean;
+    /**
+    * CSS styles to apply to the button
+    * @type {React.CSSProperties}
+    * @optional
+   */
+    BtnStyle?: React.CSSProperties;
+}
+declare function InputWithButton<T>(props: IProps<T>): JSX.Element;
+export default InputWithButton;

package/lib/InputWithButton.js

@@ -1,107 +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;
+"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/MutliCheckBoxSelect.d.ts

@@ -1,18 +1,42 @@
-/// <reference types="react" />
-interface IProps {
-    Label?: string;
-    Options: {
-        Value: number | string;
-        Text: string;
-        Selected: boolean;
-    }[];
-    OnChange: (evt: any, Options: {
-        Value: number | string;
-        Text: string;
-        Selected: boolean;
-    }[]) => void;
-    Help?: string | JSX.Element;
-    ItemTooltip?: 'no-tip' | 'dark' | 'light';
-}
-declare const MultiSelect: (props: IProps) => JSX.Element;
-export default MultiSelect;
+interface IProps {
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Array of options for the multi-select checkboxe
+      * @type {{ Value: number | string; Text: string; Selected: boolean }[]}
+    */
+    Options: {
+        Value: number | string;
+        Text: string;
+        Selected: boolean;
+    }[];
+    /**
+      * Function to handle changes in the selection
+      * @param evt - The change event
+      * @param Options - The updated options array
+      * @returns {void}
+    */
+    OnChange: (evt: any, Options: {
+        Value: number | string;
+        Text: string;
+        Selected: boolean;
+    }[]) => void;
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+    /**
+      * Tooltip style for the items
+      * @type {'no-tip' | 'dark' | 'light'}
+      * @optional
+    */
+    ItemTooltip?: 'no-tip' | 'dark' | 'light';
+}
+declare const MultiSelect: (props: IProps) => JSX.Element;
+export default MultiSelect;