@gpa-gemstone/react-forms 1.1.98 → 1.1.100

package/lib/CheckBox.js

@@ -61,6 +61,6 @@ function CheckBox(props) {
                     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: guid, Class: "info", Position: "top" }, props.Help)
             : null));
 }

package/lib/DateTimeUI/DateTimePicker.js

@@ -208,7 +208,7 @@ function DateTimePickerBase(props) {
                     React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
             : null,
         showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpGuid, Class: "info", Position: "bottom" }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpGuid, Class: "info", Position: "top" }, 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);

package/lib/Input.js

@@ -112,7 +112,7 @@ function Input(props) {
                     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: guid, Class: "info", Position: "top" }, props.Help)
             : null,
         React.createElement("input", { 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.js

@@ -101,7 +101,7 @@ function InputWithButton(props) {
                     : null)
             : 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: guid, Class: "info", Position: "top" }, props.Help)
             : null,
         React.createElement("div", { className: "input-group" },
             React.createElement("input", { 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' }),

package/lib/MultiInput.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
-    /**
-      * Function to determine the validity of a field
-      * @param field - Field of the record to check
-      * @returns {boolean}
-    */
-    Valid: (field: keyof T) => boolean;
+interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, 'Valid' | 'Feedback'> {
     /**
       * Type of the input field
       * @type {'number' | 'text' | 'password' | 'email' | 'color' | 'integer'}
@@ -30,12 +24,26 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
         * @optional
     */
     AllowNull?: boolean;
+    /**
+      * Function to determine the validity of a field
+      * @param field - Field of the record to check
+      * @returns {boolean}
+    */
+    ItemValid?: (value: string | number, index: number, arr: Array<string | number>) => boolean;
     /**
       * Feedback message to show when input is invalid
       * @type {string}
       * @optional
     */
-    Feedback?: string;
+    ItemFeedback?: (value: string | number, index: number, arr: Array<string | number>) => string | undefined;
+    /**
+     * Flag to disable add button
+     */
+    DisableAdd?: boolean;
+    /**
+     * Flag to disable all input fields
+     */
+    Disabled?: boolean;
 }
 declare function MultiInput<T>(props: IProps<T>): JSX.Element;
 export default MultiInput;

package/lib/MultiInput.js

@@ -71,13 +71,13 @@ function MultiInput(props) {
                             return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
                         } },
                         React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
-                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "bottom" }, props.Help))
+                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
             : null,
         fieldArray.map(function (r, index) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             return (React.createElement("div", { className: 'row', key: index },
                 React.createElement("div", { className: 'col-10' },
-                    React.createElement(Input_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', AllowNull: props.AllowNull, Type: props.Type, Help: index === 0 ? props.Help : undefined, Feedback: props.Feedback, Valid: function () { return props.Valid(props.Field); }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
+                    React.createElement(Input_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', AllowNull: props.AllowNull, Type: props.Type, Help: index === 0 ? props.Help : undefined, Feedback: (_b = (_a = props.ItemFeedback) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : undefined, Valid: function () { var _a, _b; return (_b = (_a = props.ItemValid) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
                             var _a;
                             var _b;
                             var newArray = __spreadArray([], fieldArray, true);
@@ -88,7 +88,7 @@ function MultiInput(props) {
                             props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
                         } })),
                 React.createElement("div", { className: "col-".concat(index === __spreadArray([], fieldArray, true).length - 1 ? 1 : 2, " ").concat(index === 0 ? 'd-flex align-items-center' : '') },
-                    React.createElement("button", { className: 'btn', style: ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? { display: 'none' } : undefined, onClick: function () {
+                    React.createElement("button", { className: 'btn', style: ((_c = props.Disabled) !== null && _c !== void 0 ? _c : false) ? { display: 'none' } : undefined, onClick: function () {
                             var _a;
                             var newRecords = __spreadArray([], fieldArray, true).filter(function (_, i) { return i !== index; });
                             props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
@@ -96,7 +96,7 @@ function MultiInput(props) {
                         React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: 'red' }))),
                 index === __spreadArray([], fieldArray, true).length - 1 ?
                     React.createElement("div", { className: "col-1 ".concat(index === 0 ? 'd-flex align-items-center' : '') },
-                        React.createElement("button", { className: 'btn', style: ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, onClick: function () {
+                        React.createElement("button", { className: 'btn', style: ((_f = (((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : false))) !== null && _f !== void 0 ? _f : false) ? { display: 'none' } : undefined, onClick: function () {
                                 var _a;
                                 var newRecords = __spreadArray(__spreadArray([], __spreadArray([], fieldArray, true), true), [props.DefaultValue], false);
                                 props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));

package/lib/MultiSearchableSelect.d.ts

@@ -1,10 +1,40 @@
 import { IProps as ISearchableSelectProps } from './SearchableSelect';
-interface IProps<T> extends ISearchableSelectProps<T> {
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Omit<ISearchableSelectProps<T>, 'Valid' | 'Feedback' | 'GetLabel' | 'Setter'> {
     /**
       * Default value to use when adding an item and when value is null
       * @type {number}
     */
     DefaultValue: number | string;
+    /**
+     * Function to determine the validity of a field
+     * @param field - Field of the record to check
+     * @returns {boolean}
+    */
+    ItemValid?: (value: string | number, index: number, arr: Array<string | number>) => boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    ItemFeedback?: (value: string | number, index: number, arr: Array<string | number>) => string | undefined;
+    /**
+     *
+    */
+    GetLabel?: (value: string | number | null, index: number) => Gemstone.TSX.Interfaces.AbortablePromise<string>;
+    /**
+     * Flag to disable add button
+     */
+    DisableAdd?: boolean;
+    /**
+     * Flag to disable all input fields
+     */
+    Disabled?: boolean;
+    /**
+    * Setter function to update the Record
+    * @param record - Updated Record
+    */
+    Setter: (record: T, selectedOption?: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
 }
 declare function MultiSearchableSelect<T>(props: IProps<T>): JSX.Element;
 export default MultiSearchableSelect;

package/lib/MultiSearchableSelect.js

@@ -68,33 +68,31 @@ function MultiSearchableSelect(props) {
                         : null,
                     React.createElement("button", { className: 'btn', onClick: function () {
                             var _a;
-                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
+                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)), { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
                         } },
-                        " ",
-                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
-                        " ")),
-                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "bottom" }, props.Help))
+                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
+                React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
             : null,
         fieldArray.map(function (r, index) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             return (React.createElement("div", { className: 'row align-items-center', key: index },
-                React.createElement("div", { className: 'col' },
-                    React.createElement(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', Help: index === 0 ? props.Help : undefined, Feedback: props.Feedback, Valid: function () { return props.Valid != null ? props.Valid(props.Field) : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
+                React.createElement("div", { className: 'col-10' },
+                    React.createElement(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', Help: index === 0 ? props.Help : undefined, Feedback: (_b = (_a = props.ItemFeedback) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : undefined, Valid: function () { var _a, _b; return (_b = (_a = props.ItemValid) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record, option) {
                             var _a;
                             var newArray = __spreadArray([], fieldArray, true);
                             newArray[index] = record[index];
-                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
-                        }, Search: props.Search, BtnStyle: props.BtnStyle, GetLabel: props.GetLabel, ResetSearchOnSelect: props.ResetSearchOnSelect, AllowCustom: props.AllowCustom })),
-                React.createElement("div", { className: 'col-auto' },
-                    React.createElement("button", { className: 'btn', style: ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? { display: 'none' } : undefined, onClick: function () {
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)), option);
+                        }, Search: props.Search, BtnStyle: props.BtnStyle, GetLabel: props.GetLabel != null ? function () { return props.GetLabel(fieldArray[index], index); } : undefined, ResetSearchOnSelect: props.ResetSearchOnSelect, AllowCustom: props.AllowCustom })),
+                React.createElement("div", { className: "col-".concat(index === __spreadArray([], fieldArray, true).length - 1 ? 1 : 2, " ").concat(index === 0 ? 'd-flex align-items-center' : '') },
+                    React.createElement("button", { className: 'btn', style: ((_c = props.Disabled) !== null && _c !== void 0 ? _c : false) ? { display: 'none' } : undefined, onClick: function () {
                             var _a;
                             var newRecords = __spreadArray([], fieldArray, true).filter(function (_, i) { return i !== index; });
                             props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
                         } },
                         React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: 'red' }))),
                 index === __spreadArray([], fieldArray, true).length - 1 ?
-                    React.createElement("div", { className: 'col-auto' },
-                        React.createElement("button", { className: 'btn', style: ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, onClick: function () {
+                    React.createElement("div", { className: "col-1 ".concat(index === 0 ? 'd-flex align-items-center' : '') },
+                        React.createElement("button", { className: 'btn', style: ((_f = (((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : false))) !== null && _f !== void 0 ? _f : false) ? { display: 'none' } : undefined, onClick: function () {
                                 var _a;
                                 var newRecords = __spreadArray(__spreadArray([], __spreadArray([], fieldArray, true), true), [props.DefaultValue], false);
                                 props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));

package/lib/MutliCheckBoxSelect.js

@@ -103,10 +103,10 @@ var MultiSelect = function (props) {
                         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)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helperGuid, Class: "info", Position: "top" }, props.Help)
             : null,
         ((_a = props.ShowToolTip) !== null && _a !== void 0 ? _a : false) ?
-            React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "bottom" },
+            React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "top" },
                 React.createElement("p", null, "Selected Options:"),
                 selectedOptions.slice(0, 10).map(function (opt, i) { return React.createElement("p", { key: i }, opt.Label); }),
                 selectedOptions.length > 10 ? React.createElement("p", null, "and ".concat(selectedOptions.length - 10, " other(s)")) : null)

package/lib/RadioButtons.js

@@ -51,7 +51,7 @@ function RadioButtons(props) {
                 React.createElement(React.Fragment, 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 })),
-                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help))
+                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help))
                 : null),
         props.Options.map(function (option, index) {
             var _a;

package/lib/SearchableSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+export interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, 'Setter'> {
     /**
     * Function to determine the validity of a field
     * @param field - Field of the record to check
@@ -42,5 +42,10 @@ export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
      * Flag to reset search text to an empty string when a user selects an option or when the element loses focus. Defaulting to false
      */
     ResetSearchOnSelect?: boolean;
+    /**
+    * Setter function to update the Record
+    * @param record - Updated Record
+    */
+    Setter: (record: T, selectedOption: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
 }
 export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;

package/lib/SearchableSelect.js

@@ -35,7 +35,7 @@ function SearchableSelect(props) {
     var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
     var setter = React.useCallback(function (record, selectedOption) {
         handleSetSearch(selectedOption);
-        props.Setter(record);
+        props.Setter(record, { Label: selectedOption.Element, Value: selectedOption.Value }); //we know Element is a string as we set this ourselves
     }, [props.Setter, props.Field]);
     var handleSetSearch = React.useCallback(function (selectedOption) {
         var _a, _b, _c;

package/lib/Select.d.ts

@@ -1,5 +1,5 @@
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, 'Setter'> {
     /**
       * Options for the select dropdown
       * @type {{ Value: string; Label: string }[]}
@@ -17,6 +17,11 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
       * @optional
     */
     EmptyLabel?: string;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T, selectedOption: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
 }
 export default function Select<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/Select.js

@@ -49,13 +49,14 @@ function Select(props) {
         var _a;
         var currentValue = GetRecordValue();
         if (!((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) && props.Options.length > 0 && props.Options.findIndex(function (option) { return option.Value == currentValue; }) === -1) {
-            SetRecord(props.Options[0].Value);
+            var option = props.Options[0];
+            SetRecord(option.Value, option);
             // tslint:disable-next-line
             console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed.");
         }
     }, [props.Options]);
     // Update the parent component's state with the new value.
-    function SetRecord(value) {
+    function SetRecord(value, option) {
         var _a, _b;
         var record = __assign({}, props.Record);
         if (value !== '') {
@@ -65,7 +66,7 @@ function Select(props) {
         else
             record[props.Field] = null;
         if (record[props.Field] != props.Record[props.Field])
-            props.Setter(record);
+            props.Setter(record, option);
     }
     // Rretrieve the current value of the select field from the record.
     function GetRecordValue() {
@@ -83,9 +84,13 @@ function Select(props) {
                     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: guid, Class: "info", Position: "top" }, props.Help)
             : null,
-        React.createElement("select", { className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
+        React.createElement("select", { className: "form-control", onChange: function (evt) {
+                var val = evt.target.value;
+                var option = props.Options.find(function (op) { return op.Value == val; });
+                SetRecord(val, option);
+            }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
             ((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
             props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
 }

package/lib/StylableSelect.js

@@ -139,7 +139,7 @@ function StylableSelect(props) {
                     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)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
             : null,
         React.createElement("button", { type: "button", style: __assign({ padding: '.375rem .75rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "dropdown-toggle form-control ".concat(((_c = (_b = props.Valid) === null || _b === void 0 ? void 0 : _b.call(props, props.Field)) !== null && _c !== void 0 ? _c : true) ? '' : 'is-invalid'), onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
             React.createElement("div", { style: props.Style }, selected)),

package/lib/TextArea.js

@@ -72,7 +72,7 @@ function TextArea(props) {
                     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: guid, Class: "info", Position: "top" }, 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

@@ -52,7 +52,7 @@ function DatePicker(props) {
                 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(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, 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

@@ -57,6 +57,6 @@ function ToggleSwitch(props) {
                 React.createElement(React.Fragment, null,
                     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))
+                    React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpID, Zindex: 9999, Class: "info", Position: "top" }, props.Help))
                 : null)));
 }

package/lib/ToolTip.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 interface IProps {
     Show: boolean;
-    Position?: ('top' | 'bottom' | 'left' | 'right');
+    Position?: Position;
     Target?: string;
     Zindex?: number;
     Class?: 'primary' | 'secondary' | 'success' | 'danger' | 'info';
 }
-export declare const Tooltip: React.FunctionComponent<IProps>;
+type Position = 'top' | 'bottom' | 'left' | 'right';
+export declare const Tooltip: (props: React.PropsWithChildren<IProps>) => JSX.Element;
 export default Tooltip;

package/lib/ToolTip.js

@@ -32,7 +32,7 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var react_portal_1 = require("react-portal");
 var lodash_1 = require("lodash");
 // The styled tooltip wrapper component.
-var PopoverDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    display: inline-block;\n    font-size: 13px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    max-width: 100%;\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    padding: 0.1em;\n  }\n"], ["\n  & {\n    display: inline-block;\n    font-size: 13px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    max-width: 100%;\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    padding: 0.1em;\n  }\n"])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return props.BgColor; }, function (props) { return props.Color; }, function (props) { return "1px solid ".concat(props.Color); });
+var PopoverDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    display: inline-block;\n    font-size: 13px;\n    position: fixed;\n    pointer-events: ", ";\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    max-width: 100%;\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    padding: 0.1em;\n  }\n"], ["\n  & {\n    display: inline-block;\n    font-size: 13px;\n    position: fixed;\n    pointer-events: ", ";\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    top: ", ";\n    left: ", ";\n    max-width: 100%;\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    padding: 0.1em;\n  }\n"])), function (props) { return props.Show ? 'auto' : 'none'; }, function (props) { return props.Zindex; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return props.BgColor; }, function (props) { return props.Color; }, function (props) { return "1px solid ".concat(props.Color); });
 //Arrow needs to be a styled div as the arrow class has pseduo elements
 var Arrow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &.arrow {\n    ", "\n    &::after {\n      content: '';\n      position: absolute;\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  }\n"], ["\n  &.arrow {\n    ", "\n    &::after {\n      content: '';\n      position: absolute;\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  }\n"])), function (props) { return (props.Position === 'left' || props.Position === 'right')
     ? "top: calc(".concat(props.ArrowPositionPercent, "% - 1em);")
@@ -41,16 +41,51 @@ var defaultTargetPosition = { Top: -999, Left: -999, Width: 0, Height: 0 };
 // The other element needs to have data-tooltip attribute equal the target prop used for positioning
 var Tooltip = function (props) {
     var _a;
-    var position = (_a = props.Position) !== null && _a !== void 0 ? _a : 'top';
+    var targetPosition = (_a = props.Position) !== null && _a !== void 0 ? _a : 'top';
     var toolTip = React.useRef(null);
-    var _b = React.useState(0), top = _b[0], setTop = _b[1];
-    var _c = React.useState(0), left = _c[0], setLeft = _c[1];
-    var _d = React.useState(50), arrowPositionPercent = _d[0], setArrowPositionPercent = _d[1];
-    var _e = React.useState(defaultTargetPosition), targetPosition = _e[0], setTargetPosition = _e[1];
+    var _b = React.useState(false), isTooltipHovered = _b[0], setIsTooltipHovered = _b[1];
+    var _c = React.useState(targetPosition), activePosition = _c[0], setActivePosition = _c[1];
+    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(50), arrowPositionPercent = _f[0], setArrowPositionPercent = _f[1];
+    var _g = React.useState(defaultTargetPosition), targetElementPosition = _g[0], setTargetElementPosition = _g[1];
     var alertRef = React.useRef(null);
-    var _f = React.useState('green'), backgroundColor = _f[0], setBackgroundColor = _f[1];
-    var _g = React.useState('red'), color = _g[0], setColor = _g[1];
+    var _h = React.useState('green'), backgroundColor = _h[0], setBackgroundColor = _h[1];
+    var _j = React.useState('red'), color = _j[0], setColor = _j[1];
     var alarmClass = React.useMemo(function () { return props.Class != null ? "alert-".concat(props.Class, " d-none") : 'popover d-none'; }, [props.Class]);
+    var closeTimer = React.useRef();
+    var _k = React.useState(props.Show), delayedShow = _k[0], setDelayedShow = _k[1];
+    var shouldShow = delayedShow || isTooltipHovered;
+    //Effect to handle mouse hover state
+    React.useEffect(function () {
+        if (toolTip.current == null)
+            return;
+        var tootipDiv = toolTip.current;
+        function onMouseMoveInside() {
+            clearTimeout(closeTimer.current);
+            setIsTooltipHovered(true);
+        }
+        function onMouseLeave() {
+            setIsTooltipHovered(false);
+        }
+        tootipDiv.addEventListener('mousemove', onMouseMoveInside);
+        tootipDiv.addEventListener('mouseleave', onMouseLeave);
+        return function () {
+            tootipDiv.removeEventListener('mousemove', onMouseMoveInside);
+            tootipDiv.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [props.Show]);
+    // Effect to handle delayed hiding of tooltip to allow for hover logic
+    React.useEffect(function () {
+        if (props.Show) {
+            clearTimeout(closeTimer.current);
+            setDelayedShow(true);
+        }
+        else if (!isTooltipHovered) {
+            //delay closing by a quarter of a second to allow for hover
+            closeTimer.current = window.setTimeout(function () { return setDelayedShow(false); }, 250);
+        }
+    }, [props.Show, isTooltipHovered]);
     React.useLayoutEffect(function () {
         if (alertRef.current == null)
             return;
@@ -61,26 +96,27 @@ var Tooltip = function (props) {
     React.useEffect(function () {
         var target = document.querySelectorAll("[data-tooltip".concat(props.Target === undefined ? '' : "=\"".concat(props.Target, "\""), "]"));
         if (target.length === 0) {
-            setTargetPosition(defaultTargetPosition);
+            setTargetElementPosition(defaultTargetPosition);
             return;
         }
         var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
         var newPosition = { Height: targetLocation.height, Top: targetLocation.top, Left: targetLocation.left, Width: targetLocation.width };
-        if (!(0, lodash_1.isEqual)(newPosition, targetPosition))
-            setTargetPosition(newPosition);
-    }, [props.Show, props.Target, targetPosition]);
+        if (!(0, lodash_1.isEqual)(newPosition, targetElementPosition))
+            setTargetElementPosition(newPosition);
+    }, [shouldShow, props.Target, targetElementPosition]);
     React.useLayoutEffect(function () {
-        var _a = getPosition(toolTip, targetPosition, position), t = _a[0], l = _a[1], arrowLeft = _a[2];
+        var _a = getPosition(toolTip, targetElementPosition, targetPosition), t = _a[0], l = _a[1], arrowLeft = _a[2], actPosition = _a[3];
         setTop(t);
         setLeft(l);
         setArrowPositionPercent(arrowLeft);
-    }, [targetPosition, props === null || props === void 0 ? void 0 : props.children, position]);
+        setActivePosition(actPosition);
+    }, [targetElementPosition, props === null || props === void 0 ? void 0 : props.children, targetPosition]);
     var zIndex = (props.Zindex === undefined ? 9999 : props.Zindex);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: alarmClass, ref: alertRef }),
         React.createElement(react_portal_1.Portal, null,
-            React.createElement(PopoverDiv, { className: "popover bs-popover-".concat(position), Show: props.Show, Top: top, Left: left, ref: toolTip, Zindex: zIndex, BgColor: backgroundColor, Color: color },
-                React.createElement(Arrow, { className: 'arrow', Position: position, ArrowPositionPercent: arrowPositionPercent, BackgroundColor: backgroundColor, Color: color }),
+            React.createElement(PopoverDiv, { className: "popover bs-popover-".concat(activePosition), Show: shouldShow, Top: top, Left: left, ref: toolTip, Zindex: zIndex, BgColor: backgroundColor, Color: color },
+                React.createElement(Arrow, { className: 'arrow', Position: activePosition, ArrowPositionPercent: arrowPositionPercent, BackgroundColor: backgroundColor, Color: color }),
                 React.createElement("div", { className: 'popover-body', style: { backgroundColor: backgroundColor, color: color } }, props.children)))));
 };
 exports.Tooltip = Tooltip;
@@ -93,6 +129,8 @@ var getPosition = function (toolTip, targetPosition, position) {
     var top = 0;
     var left = 0;
     var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+    var effectivePosition = position;
     if (position === 'left') {
         top = targetPosition.Top + 0.5 * targetPosition.Height - 0.5 * tipLocation.height;
         left = targetPosition.Left - tipLocation.width - offset;
@@ -102,7 +140,15 @@ var getPosition = function (toolTip, targetPosition, position) {
         left = targetPosition.Left + targetPosition.Width + offset;
     }
     else if (position === 'top' || position === undefined) {
-        top = targetPosition.Top - tipLocation.height - offset;
+        // if not enough room above, flip to bottom
+        if (targetPosition.Top >= tipLocation.height + offset) {
+            effectivePosition = 'top';
+            top = targetPosition.Top - tipLocation.height - offset;
+        }
+        else {
+            effectivePosition = 'bottom';
+            top = targetPosition.Top + targetPosition.Height + offset;
+        }
         left = targetPosition.Left + 0.5 * targetPosition.Width - 0.5 * tipLocation.width;
         // If tooltip goes beyond right viewport boundary adjust left position to fit
         if (left + tipLocation.width > windowWidth)
@@ -112,7 +158,14 @@ var getPosition = function (toolTip, targetPosition, position) {
             left = offset;
     }
     else if (position === 'bottom') {
-        top = targetPosition.Top + targetPosition.Height + offset;
+        if (windowHeight - (targetPosition.Top + targetPosition.Height) >= tipLocation.height + offset) {
+            effectivePosition = 'bottom';
+            top = targetPosition.Top + targetPosition.Height + offset;
+        }
+        else {
+            effectivePosition = 'top';
+            top = targetPosition.Top - tipLocation.height - offset;
+        }
         left = targetPosition.Left + 0.5 * targetPosition.Width - 0.5 * tipLocation.width;
         //If tooltip goes beyond right viewport boundary adjust left position to fit
         if (left + tipLocation.width >= windowWidth)
@@ -130,7 +183,7 @@ var getPosition = function (toolTip, targetPosition, position) {
         var targetCenter = targetPosition.Top + 0.5 * targetPosition.Height;
         arrowPositionPercent = ((targetCenter - top) / tipLocation.height) * 100;
     }
-    return [top, left, arrowPositionPercent];
+    return [top, left, arrowPositionPercent, effectivePosition];
 };
 exports.default = exports.Tooltip;
 var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.98",
+  "version": "1.1.100",
   "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.87",
-    "@gpa-gemstone/gpa-symbols": "0.0.54",
-    "@gpa-gemstone/helper-functions": "0.0.45",
+    "@gpa-gemstone/application-typings": "0.0.88",
+    "@gpa-gemstone/gpa-symbols": "0.0.56",
+    "@gpa-gemstone/helper-functions": "0.0.46",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",