@gpa-gemstone/react-forms 1.1.57 → 1.1.59

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/ColorPicker.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { ColorResult } from 'react-color';
-interface IProps {
-    CurrentColor: string;
+interface IProps<T> {
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T, color: ColorResult) => void;
+    Label: string;
+    Disabled?: boolean;
+    Feedback?: string;
+    Style?: React.CSSProperties;
     Colors?: string[];
-    OnColorChange: (updatedColor: ColorResult) => void;
     Triangle?: ('hide' | 'top');
-    BtnText?: string;
 }
-declare const ColorPicker: React.FunctionComponent<IProps>;
-export default ColorPicker;
+export default function ColorPicker<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/ColorPicker.js

@@ -25,84 +25,90 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var react_color_1 = require("react-color");
 var styled_components_1 = require("styled-components");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var react_portal_1 = require("react-portal");
+var lodash_1 = require("lodash");
 var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: #fff; // Dark theme color\n    background: #222; // Dark theme background\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: #fff; // Dark theme color\n    background: #222; // Dark theme background\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"])), function (props) { return props.Show ? 'auto' : 'none'; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; });
-var ColorPicker = function (props) {
-    var _a, _b, _c;
-    var toolTip = React.useRef(null);
-    var _d = React.useState(0), top = _d[0], setTop = _d[1];
-    var _e = React.useState(0), left = _e[0], setLeft = _e[1];
-    var _f = React.useState(0), targetLeft = _f[0], setTargetLeft = _f[1];
-    var _g = React.useState(0), targetTop = _g[0], setTargetTop = _g[1];
-    var _h = React.useState(0), targetWidth = _h[0], setTargetWidth = _h[1];
-    var _j = React.useState(0), targetHeight = _j[0], setTargetHeight = _j[1];
+function ColorPicker(props) {
+    var _a, _b, _c, _d, _e, _f;
+    var toolTipRef = React.useRef(null);
+    var buttonRef = React.useRef(null);
+    var _g = React.useState(0), top = _g[0], setTop = _g[1];
+    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
+    var _j = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _j[0], setTargetPosition = _j[1];
     var _k = React.useState(false), show = _k[0], setShow = _k[1];
-    var colorsArray = (_a = props.Colors) !== null && _a !== void 0 ? _a : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
+    var colors = (_a = props.Colors) !== null && _a !== void 0 ? _a : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
         "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
         "#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21", "#B43894",
         "#737373", "#ff904f", "#ff9999"];
-    React.useEffect(function () {
-        var target = document.querySelectorAll("[data-tooltip" + "=\"color-picker\"" + "]");
-        if (target.length === 0) {
-            setTargetHeight(0);
-            setTargetWidth(0);
-            setTargetLeft(-999);
-            setTargetTop(-999);
-        }
-        else {
-            var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
-            setTargetHeight(targetLocation.height);
-            setTargetWidth(targetLocation.width);
-            setTargetLeft(targetLocation.left);
-            setTargetTop(targetLocation.top);
-        }
-    }, []);
     React.useLayoutEffect(function () {
-        var _a = UpdatePosition(), t = _a[0], l = _a[1];
-        setTop(t);
-        setLeft(l);
+        if (buttonRef.current === null)
+            return;
+        var targetLocation = (0, helper_functions_1.GetNodeSize)(buttonRef.current);
+        var newTargetPosition = { Top: targetLocation.top, Left: targetLocation.left, Height: targetLocation.height, Width: targetLocation.width };
+        if (!(0, lodash_1.isEqual)(newTargetPosition, targetPosition)) {
+            setTargetPosition(newTargetPosition);
+            var _a = GetBestPosition(toolTipRef, targetLocation.top, targetLocation.height, targetLocation.left, targetLocation.width), t = _a[0], l = _a[1];
+            setTop(t);
+            setLeft(l);
+        }
     });
-    function UpdatePosition() {
-        if (toolTip.current === null)
-            return [-999, -999];
-        var colorPickerHeight = 280;
-        var colorPickerWidth = 180;
-        var tipLocation = (0, helper_functions_1.GetNodeSize)(toolTip.current);
-        var windowHeight = window.innerHeight;
-        var windowWidth = window.innerWidth;
-        var result = [0, 0];
-        //start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
-        result[0] = targetTop + targetHeight;
-        result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
-        //try to place colorpicker to the right of the button if there isnt enough room below
-        if (windowHeight - result[0] < colorPickerHeight) {
-            result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
-            result[1] = targetLeft + targetWidth;
-            //try to place colorpicker on the top of the button if there isnt enough room to the right
-            if (windowWidth - result[1] < colorPickerWidth) {
-                result[0] = targetTop - tipLocation.height;
-                result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
-                //move colorpicker to the left of the button if there isnt enough space on the top
-                if (result[0] < 0) {
-                    result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
-                    result[1] = targetLeft - tipLocation.width;
-                }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { disabled: (_b = props.Disabled) !== null && _b !== void 0 ? _b : false, ref: buttonRef, className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: props.Style }, (_c = props.Label) !== null && _c !== void 0 ? _c : ""),
+        props.Feedback !== undefined && ((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
+            React.createElement("div", { className: "text-danger" }, props.Feedback) : null,
+        React.createElement(react_portal_1.Portal, null, !((_e = props.Disabled) !== null && _e !== void 0 ? _e : false) ?
+            React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTipRef, onMouseOver: function () { var _a; return ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? {} : setShow(true); }, onMouseOut: function () { return setShow(false); } },
+                React.createElement(react_color_1.BlockPicker, { color: props.Record[props.Field], colors: colors, onChangeComplete: function (updatedColor) {
+                        var record = __assign({}, props.Record);
+                        record[props.Field] = updatedColor.hex;
+                        props.Setter(record, updatedColor);
+                    }, triangle: (_f = props.Triangle) !== null && _f !== void 0 ? _f : 'hide' }))
+            : React.createElement(React.Fragment, null))));
+}
+exports.default = ColorPicker;
+var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, targetWidth) {
+    if (ref.current === null)
+        return [-999, -999];
+    var colorPickerHeight = 280;
+    var colorPickerWidth = 180;
+    var tipLocation = (0, helper_functions_1.GetNodeSize)(ref.current);
+    var windowHeight = window.innerHeight;
+    var windowWidth = window.innerWidth;
+    var result = [0, 0];
+    //start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
+    result[0] = targetTop + targetHeight;
+    result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
+    //try to place colorpicker to the right of the button if there isnt enough room below
+    if (windowHeight - result[0] < colorPickerHeight) {
+        result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
+        result[1] = targetLeft + targetWidth;
+        //try to place colorpicker on the top of the button if there isnt enough room to the right
+        if (windowWidth - result[1] < colorPickerWidth) {
+            result[0] = targetTop - tipLocation.height;
+            result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
+            //move colorpicker to the left of the button if there isnt enough space on the top
+            if (result[0] < 0) {
+                result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
+                result[1] = targetLeft - tipLocation.width;
             }
         }
-        return result;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: { backgroundColor: props.CurrentColor, borderColor: props.CurrentColor } }, (_b = props.BtnText) !== null && _b !== void 0 ? _b : "Color"),
-        React.createElement(react_portal_1.Portal, null,
-            React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTip, onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); } },
-                React.createElement(react_color_1.BlockPicker, { color: props.CurrentColor, colors: colorsArray, onChangeComplete: function (updatedColor) {
-                        props.OnColorChange(updatedColor);
-                    }, triangle: (_c = props.Triangle) !== null && _c !== void 0 ? _c : 'hide' })))));
+    return result;
 };
-exports.default = ColorPicker;
 var templateObject_1;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface IProps<T> {
     Record: T;
     Field: keyof T;
@@ -6,6 +6,7 @@ interface IProps<T> {
     Label?: string;
     Disabled?: boolean;
     Help?: string | JSX.Element;
+    Style?: React.CSSProperties;
 }
 export default function ToggleSwitch<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/ToggleSwitch.js

@@ -45,7 +45,7 @@ function ToggleSwitch(props) {
         setHelpID((0, helper_functions_1.CreateGuid)());
         setSwitchID((0, helper_functions_1.CreateGuid)());
     }, []);
-    return (React.createElement("div", { className: "custom-control custom-switch", "data-help": helpID },
+    return (React.createElement("div", { className: "custom-control custom-switch", "data-help": helpID, style: props.Style },
         React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 record[props.Field] = evt.target.checked;

package/lib/index.d.ts

@@ -14,4 +14,5 @@ import StylableSelect from './StylableSelect';
 import ColorPicker from './ColorPicker';
 import SearchableSelect from './SearchableSelect';
 import ToggleSwitch from './ToggleSwitch';
-export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, 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.ToggleSwitch = exports.SearchableSelect = exports.ColorPicker = exports.StylableSelect = exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
+exports.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");
@@ -55,3 +55,5 @@ 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.57",
+  "version": "1.1.59",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -33,6 +33,7 @@
   "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
   "devDependencies":   {
     "@types/jest": "^27.0.0",
+    "@types/lodash": "^4.14.171",
     "@types/react-color": "^3.0.12",
     "@types/react-portal": "4.0.4",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -47,6 +48,7 @@
     "@gpa-gemstone/helper-functions": "0.0.30",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
+    "lodash": "^4.17.21",
     "moment": "2.29.4",
     "react": "^18.2.0",
     "react-color": "^2.19.3",