@gpa-gemstone/react-forms 1.1.110 → 1.1.112

package/lib/SearchableSelect.js

@@ -21,6 +21,17 @@
 //       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 });
 exports.default = SearchableSelect;
 var React = require("react");
@@ -98,6 +109,10 @@ function SearchableSelect(props) {
             ops.push({ Value: search, Element: React.createElement(React.Fragment, null,
                     search,
                     " (Entered Value)"), Label: search });
+        //Ensure selectedOption is always at top of the list
+        var selected = searchOptions.find(function (f) { return f.Value === props.Record[props.Field]; });
+        if (selected != null)
+            ops.push(__assign(__assign({}, selected), { RowClass: 'table-primary' }));
         ops.push.apply(ops, searchOptions.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
         return ops;
     }, [search, props.Record[props.Field], props.Field, searchOptions, props.Disabled, loading, props.Valid, handleSetSearch]);

package/lib/StylableSelect.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 export interface IOption {
     Value: any;
     Element: React.ReactElement<any> | string;
+    RowClass?: string;
+    RowStyle?: React.CSSProperties;
 }
 interface IProps<T> {
     /**

package/lib/StylableSelect.js

@@ -42,16 +42,16 @@ var react_portal_1 = require("react-portal");
 var _ = require("lodash");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function StylableSelect(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // State hooks and ref for managing component state and interactions.
     var stylableSelect = React.useRef(null);
     var selectTable = React.useRef(null);
     var tableContainer = React.useRef(null);
-    var _d = React.useState(false), show = _d[0], setShow = _d[1];
-    var _e = React.useState(props.Options[0].Element), selected = _e[0], setSelected = _e[1];
-    var _f = React.useState(""), guid = _f[0], setGuid = _f[1];
-    var _g = React.useState(false), showHelp = _g[0], setShowHelp = _g[1];
-    var _h = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _h[0], setPosition = _h[1];
+    var _e = React.useState(false), show = _e[0], setShow = _e[1];
+    var _f = React.useState(0), selectedOptionIndex = _f[0], setSelectedOptionIndex = _f[1];
+    var _g = React.useState(""), guid = _g[0], setGuid = _g[1];
+    var _h = React.useState(false), showHelp = _h[0], setShowHelp = _h[1];
+    var _j = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _j[0], setPosition = _j[1];
     React.useLayoutEffect(function () {
         var updatePosition = _.debounce(function () {
             if (stylableSelect.current != null) {
@@ -102,7 +102,7 @@ function StylableSelect(props) {
     }, [props.Disabled, show]);
     // Update the parent component's state with the selected option.
     function SetRecord(selectedOption) {
-        setSelected(selectedOption.Element);
+        setSelectedOptionIndex(props.Options.findIndex(function (e) { return (0, lodash_1.isEqual)(e.Value, selectedOption.Value); }));
         var record = __assign({}, props.Record);
         if (selectedOption.Value !== '')
             record[props.Field] = selectedOption.Value;
@@ -120,8 +120,8 @@ function StylableSelect(props) {
     }, [HandleShow]);
     // Effect to handle changes to the record's field value.
     React.useEffect(function () {
-        var element = props.Options.find(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
-        setSelected(element !== undefined ? element.Element : React.createElement("div", null));
+        var elementIndex = props.Options.findIndex(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
+        setSelectedOptionIndex(elementIndex !== -1 ? elementIndex : 0);
     }, [props.Record, props.Options]);
     var handleOptionClick = function (evt, option) {
         SetRecord(option);
@@ -142,7 +142,7 @@ function StylableSelect(props) {
             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)),
+            React.createElement("div", { style: props.Style }, (_d = props.Options[selectedOptionIndex]) === null || _d === void 0 ? void 0 : _d.Element)),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
         React.createElement(react_portal_1.Portal, null,
             React.createElement("div", { ref: tableContainer, className: 'popover', style: {
@@ -158,7 +158,9 @@ function StylableSelect(props) {
                     maxWidth: '100%'
                 } },
                 React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
-                    React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
-                        React.createElement("tr", { key: i, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
-                            React.createElement("td", null, f.Element))); })))))));
+                    React.createElement("tbody", null, props.Options.map(function (f, i) {
+                        var _a;
+                        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); } },
+                            React.createElement("td", null, f.Element))));
+                    })))))));
 }

package/lib/ToolTip.js

@@ -86,6 +86,7 @@ var Tooltip = function (props) {
             closeTimer.current = window.setTimeout(function () { return setDelayedShow(false); }, 250);
         }
     }, [props.Show, isTooltipHovered]);
+    //Effect to get colors from alert class
     React.useLayoutEffect(function () {
         if (alertRef.current == null)
             return;
@@ -93,17 +94,49 @@ var Tooltip = function (props) {
         setBackgroundColor(style.backgroundColor);
         setColor(style.color);
     });
+    //effect to get target element position
     React.useEffect(function () {
-        var target = document.querySelectorAll("[data-tooltip".concat(props.Target === undefined ? '' : "=\"".concat(props.Target, "\""), "]"));
-        if (target.length === 0) {
-            setTargetElementPosition(defaultTargetPosition);
+        var updateTargetPosition = function () {
+            var target = getTarget(props.Target);
+            if (target == null) {
+                setTargetElementPosition(defaultTargetPosition);
+                setDelayedShow(false);
+                setIsTooltipHovered(false);
+                return;
+            }
+            var targetLocation = (0, helper_functions_1.GetNodeSize)(target);
+            var newPosition = {
+                Height: targetLocation.height,
+                Top: targetLocation.top,
+                Left: targetLocation.left,
+                Width: targetLocation.width
+            };
+            setTargetElementPosition(function (prev) {
+                if (!(0, lodash_1.isEqual)(newPosition, prev))
+                    return newPosition;
+                return prev;
+            });
+        };
+        // Initial position calculation
+        updateTargetPosition();
+        // Only set up observers when tooltip is visible
+        if (!shouldShow)
             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, targetElementPosition))
-            setTargetElementPosition(newPosition);
-    }, [shouldShow, props.Target, targetElementPosition]);
+        var target = getTarget(props.Target);
+        if (target == null)
+            return;
+        window.addEventListener('scroll', updateTargetPosition, true);
+        window.addEventListener('resize', updateTargetPosition);
+        var resizeObserver = new ResizeObserver(updateTargetPosition);
+        resizeObserver.observe(document.body);
+        resizeObserver.observe(target);
+        return function () {
+            window.removeEventListener('scroll', updateTargetPosition, true);
+            window.removeEventListener('resize', updateTargetPosition);
+            resizeObserver.disconnect();
+        };
+    }, [shouldShow, props.Target]);
+    //Effect to position tooltip
     React.useLayoutEffect(function () {
         var _a = getPosition(toolTip, targetElementPosition, targetPosition), t = _a[0], l = _a[1], arrowLeft = _a[2], actPosition = _a[3];
         setTop(t);
@@ -185,5 +218,9 @@ var getPosition = function (toolTip, targetPosition, position) {
     }
     return [top, left, arrowPositionPercent, effectivePosition];
 };
+var getTarget = function (target) {
+    var targets = document.querySelectorAll("[data-tooltip".concat(target === undefined ? '' : "=\"".concat(target, "\""), "]"));
+    return targets.length > 0 ? targets[0] : null;
+};
 exports.default = exports.Tooltip;
 var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.110",
+  "version": "1.1.112",
   "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.95",
+    "@gpa-gemstone/application-typings": "0.0.96",
     "@gpa-gemstone/gpa-symbols": "0.0.59",
-    "@gpa-gemstone/helper-functions": "0.0.54",
+    "@gpa-gemstone/helper-functions": "0.0.55",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",