@gpa-gemstone/react-forms 1.1.111 → 1.1.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/lib/AutoCompleteInput.d.ts +24 -0
  2. package/lib/AutoCompleteInput.js +214 -0
  3. package/lib/AutoCompleteTextArea.d.ts +6 -0
  4. package/lib/AutoCompleteTextArea.js +151 -0
  5. package/lib/CheckBox.d.ts +2 -1
  6. package/lib/CheckBox.js +7 -20
  7. package/lib/ColorPicker.d.ts +2 -2
  8. package/lib/ColorPicker.js +13 -18
  9. package/lib/DateTimeUI/DateTimePicker.js +8 -15
  10. package/lib/HelpIcon.d.ts +29 -0
  11. package/lib/HelpIcon.js +44 -0
  12. package/lib/Input.d.ts +7 -2
  13. package/lib/Input.js +5 -17
  14. package/lib/InputWithButton.js +5 -18
  15. package/lib/MultiInput.js +9 -18
  16. package/lib/MultiSearchableSelect.js +9 -18
  17. package/lib/MutliCheckBoxSelect.js +5 -14
  18. package/lib/RadioButtons.js +2 -13
  19. package/lib/SearchableSelect.js +15 -0
  20. package/lib/Select.js +3 -12
  21. package/lib/StylableSelect.d.ts +2 -0
  22. package/lib/StylableSelect.js +18 -22
  23. package/lib/TextArea.d.ts +14 -2
  24. package/lib/TextArea.js +7 -12
  25. package/lib/TimePicker.js +3 -10
  26. package/lib/ToggleSwitch.js +2 -11
  27. package/lib/index.d.ts +4 -1
  28. package/lib/index.js +7 -1
  29. package/package.json +1 -1
package/lib/HelpIcon.js ADDED
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ // ******************************************************************************************************
3
+ // HelpIcon.tsx - Gbtc
4
+ //
5
+ // Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
6
+ //
7
+ // Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
8
+ // the NOTICE file distributed with this work for additional information regarding copyright ownership.
9
+ // The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
10
+ // file except in compliance with the License. You may obtain a copy of the License at:
11
+ //
12
+ // http://opensource.org/licenses/MIT
13
+ //
14
+ // Unless agreed to in writing, the subject software distributed under the License is distributed on an
15
+ // "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
16
+ // License for the specific language governing permissions and limitations.
17
+ //
18
+ // Code Modification History:
19
+ // ----------------------------------------------------------------------------------------------------
20
+ // 02/19/2026 - Preston Crawford
21
+ // Generated original version of source code.
22
+ //
23
+ // ******************************************************************************************************
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var React = require("react");
26
+ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
27
+ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
28
+ var ToolTip_1 = require("./ToolTip");
29
+ /**
30
+ * HelpIcon component.
31
+ * Renders a question-mark icon that displays a tooltip on hover.
32
+ */
33
+ var HelpIcon = function (props) {
34
+ var _a, _b, _c;
35
+ var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
36
+ var guid = React.useRef((0, helper_functions_1.CreateGuid)());
37
+ if (props.Help == null || props.Help === '')
38
+ return null;
39
+ return (React.createElement(React.Fragment, null,
40
+ React.createElement("span", { className: (_a = props.Class) !== null && _a !== void 0 ? _a : "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid.current },
41
+ React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: (_b = props.Color) !== null && _b !== void 0 ? _b : "var(--info)", Size: (_c = props.Size) !== null && _c !== void 0 ? _c : 20 })),
42
+ React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid.current, Class: "info", Position: "top" }, props.Help)));
43
+ };
44
+ exports.default = HelpIcon;
package/lib/Input.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { Gemstone } from '@gpa-gemstone/application-typings';
3
- interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
3
+ export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
4
4
  /**
5
5
  * Function to determine the validity of a field
6
6
  * @param field - Field of the record to check
@@ -43,6 +43,11 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
43
43
  * @optional
44
44
  */
45
45
  DefaultValue?: number;
46
+ /**
47
+ * Optional reference to internal input for features like autocomplete.
48
+ * @type {React.RefObject<HTMLInputElement>}
49
+ * @optional
50
+ */
51
+ InputRef?: React.RefObject<HTMLInputElement>;
46
52
  }
47
53
  export default function Input<T>(props: IProps<T>): JSX.Element;
48
- export {};
package/lib/Input.js CHANGED
@@ -37,18 +37,11 @@ var __assign = (this && this.__assign) || function () {
37
37
  Object.defineProperty(exports, "__esModule", { value: true });
38
38
  exports.default = Input;
39
39
  var React = require("react");
40
- var ToolTip_1 = require("./ToolTip");
41
40
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
42
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
41
+ var HelpIcon_1 = require("./HelpIcon");
43
42
  function Input(props) {
44
43
  var internal = React.useRef(false);
45
- var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
46
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
47
- var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
48
- // Effect to generate a unique ID for the component.
49
- React.useEffect(function () {
50
- setGuid((0, helper_functions_1.CreateGuid)());
51
- }, []);
44
+ var _a = React.useState(''), heldVal = _a[0], setHeldVal = _a[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
52
45
  // Handle changes to the record's field value.
53
46
  React.useEffect(function () {
54
47
  var rawValue = props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
@@ -102,18 +95,13 @@ function Input(props) {
102
95
  }
103
96
  // Variables to control the rendering of label and help icon.
104
97
  var showLabel = props.Label !== "";
105
- var showHelpIcon = props.Help !== undefined;
106
98
  var label = props.Label === undefined ? props.Field : props.Label;
107
99
  return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.Style },
108
- showHelpIcon || showLabel ?
100
+ showLabel ?
109
101
  React.createElement("label", { className: "d-flex align-items-center" },
110
102
  React.createElement("span", null, showLabel ? label : ''),
111
- 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 },
112
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
113
- : null,
114
- showHelpIcon ?
115
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
103
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
116
104
  : null,
117
- 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' }),
105
+ React.createElement("input", { ref: props.InputRef, 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' }),
118
106
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
119
107
  }
package/lib/InputWithButton.js CHANGED
@@ -34,17 +34,11 @@ var __assign = (this && this.__assign) || function () {
34
34
  };
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  var React = require("react");
37
- var ToolTip_1 = require("./ToolTip");
38
37
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
39
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
38
+ var HelpIcon_1 = require("./HelpIcon");
40
39
  function InputWithButton(props) {
41
40
  var internal = React.useRef(false);
42
- var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
43
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
44
- var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
45
- React.useEffect(function () {
46
- setGuid((0, helper_functions_1.CreateGuid)());
47
- }, []);
41
+ var _a = React.useState(''), heldVal = _a[0], setHeldVal = _a[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
48
42
  React.useEffect(function () {
49
43
  if (!internal.current) {
50
44
  setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
@@ -89,19 +83,12 @@ function InputWithButton(props) {
89
83
  }
90
84
  }
91
85
  var showLabel = props.Label !== "";
92
- var showHelpIcon = props.Help !== undefined;
93
86
  var label = props.Label === undefined ? props.Field : props.Label;
94
87
  return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.InputStyle },
95
- showHelpIcon || showLabel ?
96
- React.createElement("label", { className: 'd-flex align-items-center' },
88
+ showLabel ?
89
+ React.createElement("label", { className: "d-flex align-items-center" },
97
90
  React.createElement("span", null, showLabel ? label : ''),
98
- showHelpIcon ?
99
- React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
100
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
101
- : null)
102
- : null,
103
- showHelpIcon ?
104
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
91
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
105
92
  : null,
106
93
  React.createElement("div", { className: "input-group" },
107
94
  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.js CHANGED
@@ -44,34 +44,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
44
44
  Object.defineProperty(exports, "__esModule", { value: true });
45
45
  var React = require("react");
46
46
  var Input_1 = require("./Input");
47
- var ToolTip_1 = require("./ToolTip");
48
47
  var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
49
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
48
+ var HelpIcon_1 = require("./HelpIcon");
50
49
  //Only supporting string/number arrays for now
51
50
  function MultiInput(props) {
52
- var _a;
53
- var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
54
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
55
51
  var fieldArray = props.Record[props.Field];
56
52
  if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
57
53
  console.warn("MultiInput: ".concat(props.Field.toString(), " is not of type array."));
58
54
  return React.createElement(React.Fragment, null);
59
55
  }
56
+ // Variables to control the rendering of label and help icon.
57
+ var showLabel = props.Label !== "";
58
+ var label = props.Label === undefined ? props.Field : props.Label;
60
59
  return (React.createElement(React.Fragment, null,
61
60
  fieldArray.length === 0 ?
62
- React.createElement(React.Fragment, null,
63
- React.createElement("label", { className: 'd-flex align-items-center' },
64
- React.createElement("span", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
65
- props.Help != null ?
66
- React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
67
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
68
- : null,
69
- React.createElement("button", { className: 'btn', onClick: function () {
70
- var _a;
71
- return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
72
- } },
73
- React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
74
- React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
61
+ React.createElement(React.Fragment, null, showLabel ?
62
+ React.createElement("label", { className: "d-flex align-items-center" },
63
+ React.createElement("span", null, showLabel ? label : ''),
64
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
65
+ : null)
75
66
  : null,
76
67
  fieldArray.map(function (r, index) {
77
68
  var _a, _b, _c, _d, _e, _f;
package/lib/MultiSearchableSelect.js CHANGED
@@ -44,34 +44,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
44
44
  Object.defineProperty(exports, "__esModule", { value: true });
45
45
  var React = require("react");
46
46
  var SearchableSelect_1 = require("./SearchableSelect");
47
- var ToolTip_1 = require("./ToolTip");
48
47
  var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
49
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
48
+ var HelpIcon_1 = require("./HelpIcon");
50
49
  //Only supporting string/number arrays for now
51
50
  function MultiSearchableSelect(props) {
52
- var _a;
53
- var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
54
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
55
51
  var fieldArray = props.Record[props.Field];
56
52
  if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
57
53
  console.warn("MultiInput: ".concat(props.Field.toString(), " is not of type array."));
58
54
  return React.createElement(React.Fragment, null);
59
55
  }
56
+ // Variables to control the rendering of label and help icon.
57
+ var showLabel = props.Label !== "";
58
+ var label = props.Label === undefined ? props.Field : props.Label;
60
59
  return (React.createElement(React.Fragment, null,
61
60
  fieldArray.length === 0 ?
62
- React.createElement(React.Fragment, null,
63
- React.createElement("label", { className: 'd-flex align-items-center' },
64
- React.createElement("span", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
65
- props.Help != null ?
66
- React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
67
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
68
- : null,
69
- React.createElement("button", { className: 'btn', onClick: function () {
70
- var _a;
71
- return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)), 0, { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
72
- } },
73
- React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
74
- React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
61
+ React.createElement(React.Fragment, null, showLabel ?
62
+ React.createElement("label", { className: "d-flex align-items-center" },
63
+ React.createElement("span", null, showLabel ? label : ''),
64
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
65
+ : null)
75
66
  : null,
76
67
  fieldArray.map(function (r, index) {
77
68
  var _a, _b, _c, _d, _e, _f;
package/lib/MutliCheckBoxSelect.js CHANGED
@@ -27,7 +27,7 @@ var React = require("react");
27
27
  var ToolTip_1 = require("./ToolTip");
28
28
  var react_portal_1 = require("react-portal");
29
29
  var _ = require("lodash");
30
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
30
+ var HelpIcon_1 = require("./HelpIcon");
31
31
  var MultiSelect = function (props) {
32
32
  var _a;
33
33
  // State hooks for managing the visibility of the dropdown and help message.
@@ -35,14 +35,11 @@ var MultiSelect = function (props) {
35
35
  var selectTable = React.useRef(null);
36
36
  var tableContainer = React.useRef(null);
37
37
  var _b = React.useState(false), show = _b[0], setShow = _b[1];
38
- var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
39
- var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
38
+ var _c = React.useState(false), showItems = _c[0], setShowItems = _c[1];
40
39
  var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
41
- var helperGuid = React.useState((0, helper_functions_1.CreateGuid)())[0];
42
40
  var showLabel = React.useMemo(function () { return props.Label !== ""; }, [props.Label]);
43
- var showHelpIcon = React.useMemo(function () { return props.Help !== undefined; }, [props.Help]);
44
41
  var selectedOptions = React.useMemo(function () { return props.Options.filter(function (opt) { return opt.Selected; }); }, [props.Options]);
45
- var _e = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _e[0], setPosition = _e[1];
42
+ var _d = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _d[0], setPosition = _d[1];
46
43
  React.useEffect(function () {
47
44
  var updatePosition = _.debounce(function () {
48
45
  if (multiSelect.current != null) {
@@ -90,17 +87,11 @@ var MultiSelect = function (props) {
90
87
  };
91
88
  }, []);
92
89
  return (React.createElement("div", { className: "form-group" },
93
- showLabel || showHelpIcon ?
90
+ showLabel ?
94
91
  React.createElement("label", { className: 'd-flex align-items-center' },
95
92
  React.createElement("span", null, showLabel ?
96
93
  (props.Label === undefined ? 'Select' : props.Label) : ''),
97
- showHelpIcon ?
98
- React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helperGuid },
99
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
100
- : null) : null,
101
- showHelpIcon ?
102
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: helperGuid, Class: "info", Position: "top" }, props.Help)
103
- : null,
94
+ React.createElement(HelpIcon_1.default, { Help: props.Help })) : null,
104
95
  ((_a = props.ShowToolTip) !== null && _a !== void 0 ? _a : false) ?
105
96
  React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "top" },
106
97
  React.createElement("p", null, "Selected Options:"),
package/lib/RadioButtons.js CHANGED
@@ -35,24 +35,13 @@ var __assign = (this && this.__assign) || function () {
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.default = RadioButtons;
37
37
  var React = require("react");
38
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
39
- var ToolTip_1 = require("./ToolTip");
40
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
38
+ var HelpIcon_1 = require("./HelpIcon");
41
39
  function RadioButtons(props) {
42
- var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
43
- var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
44
- // Variables to control the rendering of label and help icon.
45
- var showHelpIcon = props.Help !== undefined;
46
40
  var label = props.Label === undefined ? props.Field : props.Label;
47
41
  return (React.createElement("div", { className: "form-group", style: props.Style },
48
42
  React.createElement("label", { className: "form-check-label w-100 d-flex align-items-center" },
49
43
  React.createElement("span", null, label),
50
- showHelpIcon ?
51
- React.createElement(React.Fragment, null,
52
- React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
53
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 })),
54
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help))
55
- : null),
44
+ React.createElement(HelpIcon_1.default, { Help: props.Help })),
56
45
  props.Options.map(function (option, index) {
57
46
  var _a;
58
47
  return (React.createElement("div", { key: index, className: "form-check ".concat(props.Position == 'vertical' ? '' : 'form-check-inline') },
package/lib/SearchableSelect.js CHANGED
@@ -21,6 +21,17 @@
21
21
  // Generated original version of source code.
22
22
  //
23
23
  // ******************************************************************************************************
24
+ var __assign = (this && this.__assign) || function () {
25
+ __assign = Object.assign || function(t) {
26
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
27
+ s = arguments[i];
28
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
29
+ t[p] = s[p];
30
+ }
31
+ return t;
32
+ };
33
+ return __assign.apply(this, arguments);
34
+ };
24
35
  Object.defineProperty(exports, "__esModule", { value: true });
25
36
  exports.default = SearchableSelect;
26
37
  var React = require("react");
@@ -98,6 +109,10 @@ function SearchableSelect(props) {
98
109
  ops.push({ Value: search, Element: React.createElement(React.Fragment, null,
99
110
  search,
100
111
  " (Entered Value)"), Label: search });
112
+ //Ensure selectedOption is always at top of the list
113
+ var selected = searchOptions.find(function (f) { return f.Value === props.Record[props.Field]; });
114
+ if (selected != null)
115
+ ops.push(__assign(__assign({}, selected), { RowClass: 'table-primary' }));
101
116
  ops.push.apply(ops, searchOptions.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
102
117
  return ops;
103
118
  }, [search, props.Record[props.Field], props.Field, searchOptions, props.Disabled, loading, props.Valid, handleSetSearch]);
package/lib/Select.js CHANGED
@@ -37,13 +37,9 @@ var __assign = (this && this.__assign) || function () {
37
37
  Object.defineProperty(exports, "__esModule", { value: true });
38
38
  exports.default = Select;
39
39
  var React = require("react");
40
- var ToolTip_1 = require("./ToolTip");
41
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
42
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
40
+ var HelpIcon_1 = require("./HelpIcon");
43
41
  function Select(props) {
44
42
  var _a;
45
- var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
46
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
47
43
  // Effect to validate the current value against the available options.
48
44
  React.useEffect(function () {
49
45
  var _a;
@@ -74,17 +70,12 @@ function Select(props) {
74
70
  }
75
71
  // Variables to control the rendering of label and help icon.
76
72
  var showLabel = props.Label !== "";
77
- var showHelpIcon = props.Help !== undefined;
78
73
  var label = props.Label === undefined ? props.Field : props.Label;
79
74
  return (React.createElement("div", { className: "form-group" },
80
- showHelpIcon || showLabel ?
75
+ showLabel ?
81
76
  React.createElement("label", { className: "d-flex align-items-center" },
82
77
  React.createElement("span", null, showLabel ? label : ''),
83
- 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 },
84
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
85
- : null,
86
- showHelpIcon ?
87
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
78
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
88
79
  : null,
89
80
  React.createElement("select", { className: "form-control", onChange: function (evt) {
90
81
  var val = evt.target.value;
package/lib/StylableSelect.d.ts CHANGED
@@ -2,6 +2,8 @@ import * as React from 'react';
2
2
  export interface IOption {
3
3
  Value: any;
4
4
  Element: React.ReactElement<any> | string;
5
+ RowClass?: string;
6
+ RowStyle?: React.CSSProperties;
5
7
  }
6
8
  interface IProps<T> {
7
9
  /**
package/lib/StylableSelect.js CHANGED
@@ -35,23 +35,22 @@ var __assign = (this && this.__assign) || function () {
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.default = StylableSelect;
37
37
  var React = require("react");
38
- var ToolTip_1 = require("./ToolTip");
39
38
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
40
39
  var lodash_1 = require("lodash");
41
40
  var react_portal_1 = require("react-portal");
42
41
  var _ = require("lodash");
43
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
42
+ var HelpIcon_1 = require("./HelpIcon");
44
43
  function StylableSelect(props) {
45
- var _a, _b, _c;
44
+ var _a, _b, _c, _d;
46
45
  // State hooks and ref for managing component state and interactions.
47
46
  var stylableSelect = React.useRef(null);
48
47
  var selectTable = React.useRef(null);
49
48
  var tableContainer = React.useRef(null);
50
- var _d = React.useState(false), show = _d[0], setShow = _d[1];
51
- var _e = React.useState(props.Options[0].Element), selected = _e[0], setSelected = _e[1];
52
- var _f = React.useState(""), guid = _f[0], setGuid = _f[1];
53
- var _g = React.useState(false), showHelp = _g[0], setShowHelp = _g[1];
54
- var _h = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _h[0], setPosition = _h[1];
49
+ var _e = React.useState(false), show = _e[0], setShow = _e[1];
50
+ var _f = React.useState(0), selectedOptionIndex = _f[0], setSelectedOptionIndex = _f[1];
51
+ var _g = React.useState(""), guid = _g[0], setGuid = _g[1];
52
+ var _h = React.useState(false), showHelp = _h[0], setShowHelp = _h[1];
53
+ var _j = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _j[0], setPosition = _j[1];
55
54
  React.useLayoutEffect(function () {
56
55
  var updatePosition = _.debounce(function () {
57
56
  if (stylableSelect.current != null) {
@@ -102,7 +101,7 @@ function StylableSelect(props) {
102
101
  }, [props.Disabled, show]);
103
102
  // Update the parent component's state with the selected option.
104
103
  function SetRecord(selectedOption) {
105
- setSelected(selectedOption.Element);
104
+ setSelectedOptionIndex(props.Options.findIndex(function (e) { return (0, lodash_1.isEqual)(e.Value, selectedOption.Value); }));
106
105
  var record = __assign({}, props.Record);
107
106
  if (selectedOption.Value !== '')
108
107
  record[props.Field] = selectedOption.Value;
@@ -120,8 +119,8 @@ function StylableSelect(props) {
120
119
  }, [HandleShow]);
121
120
  // Effect to handle changes to the record's field value.
122
121
  React.useEffect(function () {
123
- var element = props.Options.find(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
124
- setSelected(element !== undefined ? element.Element : React.createElement("div", null));
122
+ var elementIndex = props.Options.findIndex(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
123
+ setSelectedOptionIndex(elementIndex !== -1 ? elementIndex : 0);
125
124
  }, [props.Record, props.Options]);
126
125
  var handleOptionClick = function (evt, option) {
127
126
  SetRecord(option);
@@ -129,20 +128,15 @@ function StylableSelect(props) {
129
128
  };
130
129
  // Variables to control the rendering of label and help icon.
131
130
  var showLabel = props.Label !== "";
132
- var showHelpIcon = props.Help !== undefined;
133
131
  var label = props.Label === undefined ? props.Field : props.Label;
134
132
  return (React.createElement("div", { ref: stylableSelect, className: "form-group", style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
135
- showHelpIcon || showLabel ?
133
+ showLabel ?
136
134
  React.createElement("label", { className: "d-flex align-items-center" },
137
135
  React.createElement("span", null, showLabel ? label : ''),
138
- showHelpIcon && (React.createElement("span", { onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid, className: "ml-2 d-flex align-items-center" },
139
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
140
- : null,
141
- props.Help !== undefined ?
142
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
136
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
143
137
  : null,
144
138
  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 },
145
- React.createElement("div", { style: props.Style }, selected)),
139
+ React.createElement("div", { style: props.Style }, (_d = props.Options[selectedOptionIndex]) === null || _d === void 0 ? void 0 : _d.Element)),
146
140
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
147
141
  React.createElement(react_portal_1.Portal, null,
148
142
  React.createElement("div", { ref: tableContainer, className: 'popover', style: {
@@ -158,7 +152,9 @@ function StylableSelect(props) {
158
152
  maxWidth: '100%'
159
153
  } },
160
154
  React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
161
- React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
162
- React.createElement("tr", { key: i, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
163
- React.createElement("td", null, f.Element))); })))))));
155
+ React.createElement("tbody", null, props.Options.map(function (f, i) {
156
+ var _a;
157
+ return i === selectedOptionIndex ? null : ((React.createElement("tr", { key: "".concat(i, "-").concat(JSON.stringify(f.Value)), className: (_a = f.RowClass) !== null && _a !== void 0 ? _a : '', style: f.RowStyle, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
158
+ React.createElement("td", null, f.Element))));
159
+ })))))));
164
160
  }
package/lib/TextArea.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import * as React from 'react';
1
2
  import { Gemstone } from '@gpa-gemstone/application-typings';
2
- interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
3
+ export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
3
4
  /**
4
5
  * Number of rows for the textarea
5
6
  * @type {number}
@@ -23,6 +24,17 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
23
24
  * @optional
24
25
  */
25
26
  Help?: string | JSX.Element;
27
+ /**
28
+ * Optional reference to internal text area for features like autocomplete.
29
+ * @type {React.RefObject<HTMLTextAreaElement>}
30
+ * @optional
31
+ */
32
+ TextAreaRef?: React.RefObject<HTMLTextAreaElement>;
33
+ /**
34
+ * Optional setting to enable/disable spellcheck.
35
+ * @type {boolean}
36
+ * @optional
37
+ */
38
+ SpellCheck?: boolean;
26
39
  }
27
40
  export default function TextArea<T>(props: IProps<T>): JSX.Element;
28
- export {};
package/lib/TextArea.js CHANGED
@@ -38,14 +38,14 @@ exports.default = TextArea;
38
38
  // ******************************************************************************************************
39
39
  var React = require("react");
40
40
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
41
- var ToolTip_1 = require("./ToolTip");
42
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
41
+ var HelpIcon_1 = require("./HelpIcon");
43
42
  function TextArea(props) {
43
+ var _a;
44
44
  // Internal ref and state hooks for managing the component state.
45
45
  var internal = React.useRef(false);
46
46
  var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
47
- var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
48
- var _b = React.useState(''), heldVal = _b[0], setHeldVal = _b[1];
47
+ var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
48
+ var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1];
49
49
  // Effect to handle changes to the record's field value.
50
50
  React.useEffect(function () {
51
51
  if (!internal.current) {
@@ -62,18 +62,13 @@ function TextArea(props) {
62
62
  }
63
63
  // Variables to control the rendering of label and help icon.
64
64
  var showLabel = props.Label !== "";
65
- var showHelpIcon = props.Help !== undefined;
66
65
  var label = props.Label === undefined ? props.Field : props.Label;
67
66
  return (React.createElement("div", { className: "form-group" },
68
- showHelpIcon || showLabel ?
67
+ showLabel ?
69
68
  React.createElement("label", { className: "d-flex align-items-center" },
70
69
  React.createElement("span", null, showLabel ? label : ''),
71
- 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 },
72
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
70
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
73
71
  : null,
74
- showHelpIcon ?
75
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
76
- : null,
77
- 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 }),
72
+ React.createElement("textarea", { ref: props.TextAreaRef, 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, spellCheck: (_a = props.SpellCheck) !== null && _a !== void 0 ? _a : true }),
78
73
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
79
74
  }
package/lib/TimePicker.js CHANGED
@@ -35,24 +35,17 @@ var __assign = (this && this.__assign) || function () {
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.default = DatePicker;
37
37
  var React = require("react");
38
- var ToolTip_1 = require("./ToolTip");
39
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
40
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
38
+ var HelpIcon_1 = require("./HelpIcon");
41
39
  function DatePicker(props) {
42
- var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
43
- var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
44
40
  // Variables to control the rendering of label and help icon.
45
41
  var showLabel = props.Label !== "";
46
- var showHelpIcon = props.Help !== undefined;
47
42
  var label = props.Label === undefined ? props.Field : props.Label;
48
43
  return (React.createElement("div", { className: "form-group" },
49
- showHelpIcon || showLabel ?
44
+ showLabel ?
50
45
  React.createElement("label", { className: "d-flex align-items-center" },
51
46
  React.createElement("span", null, showLabel ? label : ''),
52
- 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 },
53
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
47
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))
54
48
  : null,
55
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help),
56
49
  React.createElement("input", { className: 'form-control' + (props.Valid(props.Field) ? '' : ' is-invalid'), type: "time", step: props.Step === null ? 60 : props.Step, onChange: function (evt) {
57
50
  var record = __assign({}, props.Record);
58
51
  if (evt.target.value !== '')
package/lib/ToggleSwitch.js CHANGED
@@ -36,14 +36,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.default = ToggleSwitch;
37
37
  var React = require("react");
38
38
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
39
- var ToolTip_1 = require("./ToolTip");
40
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
39
+ var HelpIcon_1 = require("./HelpIcon");
41
40
  function ToggleSwitch(props) {
42
- var helpID = React.useState((0, helper_functions_1.CreateGuid)())[0];
43
41
  var switchID = React.useState((0, helper_functions_1.CreateGuid)())[0];
44
- var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
45
42
  // Variables to control the rendering of label and help icon.
46
- var showHelpIcon = props.Help !== undefined;
47
43
  var label = props.Label === undefined ? props.Field : props.Label;
48
44
  return (React.createElement("div", { className: "custom-control custom-switch form-group", style: props.Style },
49
45
  React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
@@ -53,10 +49,5 @@ function ToggleSwitch(props) {
53
49
  }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled, id: switchID }),
54
50
  React.createElement("label", { className: "custom-control-label d-flex align-items-center", htmlFor: switchID },
55
51
  React.createElement("span", null, label),
56
- showHelpIcon ?
57
- React.createElement(React.Fragment, null,
58
- React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpID },
59
- React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 })),
60
- React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpID, Zindex: 9999, Class: "info", Position: "top" }, props.Help))
61
- : null)));
52
+ React.createElement(HelpIcon_1.default, { Help: props.Help }))));
62
53
  }