@eccenca/gui-elements 22.0.1 → 22.1.0

package/dist/{es5 → esm}/components/Application/ApplicationHeader.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 // import PropTypes from 'prop-types';
 import { Header as CarbonHeader } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationHeader(_a) {
     var children = _a.children, restProps = __rest(_a, ["children"]);
     return (React.createElement(CarbonHeader, __assign({}, restProps, { className: eccgui + "-application__header" }), children));

package/dist/{es5 → esm}/components/Application/ApplicationSidebarNavigation.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { SideNav as CarbonSideNav } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationSidebarNavigation(_a) {
     var children = _a.children, className = _a.className, otherProps = __rest(_a, ["children", "className"]);
     var additionalClassName = className ? className : "";

package/dist/{es5 → esm}/components/Application/ApplicationSidebarToggler.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { HeaderMenuButton as CarbonHeaderMenuButton } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationSidebarToggler(_a) {
     var restProps = __rest(_a, []);
     return (React.createElement(CarbonHeaderMenuButton, __assign({ className: eccgui + "-application__menu__toggler" }, restProps, { isCollapsible: true })));

package/dist/{es5 → esm}/components/Application/ApplicationTitle.js

@@ -22,15 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { HeaderName as CarbonHeaderName } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationTitle(_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.prefix, prefix = _c === void 0 ? "" : _c, href = _a.href, depiction = _a.depiction, _d = _a.isNotDisplayed, isNotDisplayed = _d === void 0 ? false : _d, _e = _a.isAlignedWithSidebar, isAlignedWithSidebar = _e === void 0 ? false : _e, isApplicationSidebarExpanded = _a.isApplicationSidebarExpanded, htmlAProps = _a.htmlAProps, 
-    /*
-        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
-        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
-        a combined process of dynamic keys and template mappings in typescript
-    */
-    otherPropsShouldOnlyBeUsedForDataAttributes = __rest(_a, ["children", "className", "prefix", "href", "depiction", "isNotDisplayed", "isAlignedWithSidebar", "isApplicationSidebarExpanded", "htmlAProps"]);
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.prefix, prefix = _c === void 0 ? "" : _c, href = _a.href, depiction = _a.depiction, _d = _a.isNotDisplayed, isNotDisplayed = _d === void 0 ? false : _d, _e = _a.isAlignedWithSidebar, isAlignedWithSidebar = _e === void 0 ? false : _e, isApplicationSidebarExpanded = _a.isApplicationSidebarExpanded, htmlAProps = _a.htmlAProps, otherPropsShouldOnlyBeUsedForDataAttributes = __rest(_a, ["children", "className", "prefix", "href", "depiction", "isNotDisplayed", "isAlignedWithSidebar", "isApplicationSidebarExpanded", "htmlAProps"]);
     var classApplication = eccgui + "-application__title";
     var classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "bx--visually-hidden" : "";
     var classAlignedSidebar = isAlignedWithSidebar || isApplicationSidebarExpanded ? eccgui + "-application__title--withsidebar" : "";

package/dist/esm/components/Application/ApplicationTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationTitle.js","sourceRoot":"","sources":["../../../../src/components/Application/ApplicationTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AA4CtE,SAAS,gBAAgB,CAAC,EAWD;IAVrB,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,4BAA0B,EAA1B,oBAAoB,mBAAC,KAAK,KAAA,EAC1B,4BAA4B,kCAAA,EAC5B,UAAU,gBAAA,EACP,2CAA2C,cAVxB,gJAWzB,CADiD;IAG9C,IAAM,gBAAgB,GAAM,MAAM,wBAAqB,CAAC;IACxD,IAAM,iBAAiB,GAAG,cAAc,IAAI,CAAC,CAAC,4BAA4B,IAAI,OAAO,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAClJ,IAAM,mBAAmB,GAAG,oBAAoB,IAAI,4BAA4B,CAAC,CAAC,CAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpI,OAAO,CACH,oBAAC,gBAAgB,eACT,2CAA2C,EAC3C,UAAU,IACd,SAAS,EAAK,gBAAgB,SAAI,mBAAmB,SAAI,iBAAiB,SAAI,SAAW,EACzF,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,EAAE;QAET,8BAAM,SAAS,EAAK,MAAM,iCAA8B;YACnD,CAAC,CAAC,SAAS,IAAI,CACR;gBACI,8BAAM,SAAS,EAAK,MAAM,mCAAgC,IAAG,SAAS,CAAQ,CAC/E,CACV;YACA,CAAC,CAAC,MAAM,IAAI,CACL;gBACI,8BAAM,SAAS,EAAC,0BAA0B,IAAE,MAAM,CAAQ;yBAE3D,CACV;YACC,QAAQ,CACP,CACQ,CACtB,CAAA;AACL,CAAC;AAED,eAAe,gBAAgB,CAAC"}

package/dist/{es5 → esm}/components/Application/ApplicationToolbar.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 // import PropTypes from 'prop-types';
 import { HeaderGlobalBar as CarbonHeaderGlobalBar } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationToolbar(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, restProps = __rest(_a, ["children", "className"]);
     return (React.createElement(CarbonHeaderGlobalBar, __assign({}, restProps, { className: eccgui + "-application__toolbar " + className }), children));

package/dist/{es5 → esm}/components/Application/ApplicationToolbarAction.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 // import PropTypes from 'prop-types';
 import { HeaderGlobalAction as CarbonHeaderGlobalAction } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationToolbarAction(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, restProps = __rest(_a, ["children", "className"]);
     return (React.createElement(CarbonHeaderGlobalAction, __assign({}, restProps, { className: eccgui + "-application__toolbar__action " + className }), children));

package/dist/{es5 → esm}/components/Application/ApplicationToolbarPanel.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 // import PropTypes from 'prop-types';
 import { HeaderPanel as CarbonHeaderPanel } from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationToolbarPanel(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, restProps = __rest(_a, ["children", "className"]);
     return (React.createElement(CarbonHeaderPanel, __assign({}, restProps, { className: eccgui + "-application__toolbar__panel " + className }), children));

package/dist/{es5 → esm}/components/Application/ApplicationToolbarSection.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 function ApplicationToolbarSection(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, restProps = __rest(_a, ["children", "className"]);
     return (React.createElement("div", __assign({}, restProps, { className: eccgui + "-application__toolbar__section " + className }), children));

package/dist/esm/components/AutoSuggestion/AutoSuggestion.js

@@ -0,0 +1,348 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useCallback, useEffect, useState } from "react";
+import { FieldItem, IconButton, Spinner, Toolbar, ToolbarSection } from "./../..//index.js";
+import { Classes as BlueprintClassNames } from "@blueprintjs/core";
+//custom components
+import SingleLineCodeEditor from "./SingleLineCodeEditor.js";
+import { AutoSuggestionList } from "./AutoSuggestionList.js";
+import { debounce } from "lodash";
+export var OVERWRITTEN_KEYS;
+(function (OVERWRITTEN_KEYS) {
+    OVERWRITTEN_KEYS["ArrowUp"] = "ArrowUp";
+    OVERWRITTEN_KEYS["ArrowDown"] = "ArrowDown";
+    OVERWRITTEN_KEYS["Enter"] = "Enter";
+    OVERWRITTEN_KEYS["Tab"] = "Tab";
+})(OVERWRITTEN_KEYS || (OVERWRITTEN_KEYS = {}));
+/** Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
+ * This is comparable to a one line code editor. */
+var AutoSuggestion = function (_a) {
+    var _b;
+    var label = _a.label, initialValue = _a.initialValue, onChange = _a.onChange, fetchSuggestions = _a.fetchSuggestions, checkInput = _a.checkInput, _c = _a.validationErrorText, validationErrorText = _c === void 0 ? "Invalid value" : _c, _d = _a.clearIconText, clearIconText = _d === void 0 ? "Clear" : _d, onFocusChange = _a.onFocusChange, id = _a.id, onInputChecked = _a.onInputChecked, leftElement = _a.leftElement, rightElement = _a.rightElement, _e = _a.useTabForCompletions, useTabForCompletions = _e === void 0 ? false : _e, placeholder = _a.placeholder, _f = _a.showScrollBar, showScrollBar = _f === void 0 ? true : _f;
+    var _g = __read(React.useState(initialValue), 2), value = _g[0], setValue = _g[1];
+    var _h = __read(React.useState(0), 2), cursorPosition = _h[0], setCursorPosition = _h[1];
+    var _j = __read(React.useState({ left: 0 }), 2), coords = _j[0], setCoords = _j[1];
+    var _k = __read(React.useState(false), 2), shouldShowDropdown = _k[0], setShouldShowDropdown = _k[1];
+    var _l = __read(React.useState([]), 2), suggestions = _l[0], setSuggestions = _l[1];
+    var _m = __read(React.useState(false), 2), suggestionsPending = _m[0], setSuggestionsPending = _m[1];
+    var _o = __read(React.useState(false), 2), pathValidationPending = _o[0], setPathValidationPending = _o[1];
+    var _p = __read(React.useState([]), 2), setErrorMarkers = _p[1];
+    var _q = __read(useState(undefined), 2), validationResponse = _q[0], setValidationResponse = _q[1];
+    var _r = __read(useState(undefined), 2), suggestionResponse = _r[0], setSuggestionResponse = _r[1];
+    // The element that should be used for replacement highlighting
+    var _s = __read(useState(undefined), 2), highlightedElement = _s[0], setHighlightedElement = _s[1];
+    var _t = __read(React.useState(), 2), editorInstance = _t[0], setEditorInstance = _t[1];
+    var _u = __read(React.useState(false), 2), isFocused = _u[0], setIsFocused = _u[1];
+    /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
+    var _v = __read(React.useState({ index: 0, suggestions: [], dropdownShown: false }), 1), editorState = _v[0];
+    /** This is for the AutoSuggestionList component in order to re-render. */
+    var _w = __read(React.useState(0), 2), focusedIndex = _w[0], setFocusedIndex = _w[1];
+    var _x = __read(useState([]), 2), selectedTextRanges = _x[0], setSelectedTextRanges = _x[1];
+    var pathIsValid = (_b = validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.valid) !== null && _b !== void 0 ? _b : true;
+    var setCurrentIndex = function (newIndex) {
+        editorState.index = newIndex;
+        setFocusedIndex(newIndex);
+    };
+    var currentIndex = function () { return editorState.index; };
+    React.useEffect(function () {
+        editorState.editorInstance = editorInstance;
+    }, [editorInstance, editorState]);
+    React.useEffect(function () {
+        setValue(initialValue);
+    }, [initialValue]);
+    React.useEffect(function () {
+        editorState.dropdownShown = shouldShowDropdown;
+    }, [shouldShowDropdown, editorState]);
+    // Handle replacement highlighting
+    useEffect(function () {
+        if (highlightedElement && editorInstance) {
+            var from = highlightedElement.from, length_1 = highlightedElement.length;
+            if (length_1 > 0 && selectedTextRanges.length === 0) {
+                var to = from + length_1;
+                var marker_1 = editorInstance.markText({ line: 0, ch: from }, { line: 0, ch: to }, { className: "ecc-text-highlighting" });
+                return function () { return marker_1.clear(); };
+            }
+        }
+        return;
+    }, [highlightedElement, selectedTextRanges, editorInstance]);
+    //handle linting
+    React.useEffect(function () {
+        var parseError = validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.parseError;
+        if (parseError && editorInstance) {
+            var message = parseError.message, start = parseError.start, end = parseError.end;
+            editorInstance.getDoc().getEditor();
+            var marker_2 = editorInstance.markText({ line: 0, ch: start }, { line: 0, ch: end }, { className: "ecc-text-error-highlighting", title: message });
+            setErrorMarkers(function (previousMarkers) {
+                previousMarkers.forEach(function (marker) { return marker.clear(); });
+                return [marker_2];
+            });
+        }
+        else {
+            // Valid, clear all error markers
+            setErrorMarkers(function (previous) {
+                previous.forEach(function (marker) { return marker.clear(); });
+                return [];
+            });
+        }
+        onInputChecked && onInputChecked(!!(validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.valid));
+    }, [validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.valid, validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.parseError, editorInstance, onInputChecked]);
+    /** generate suggestions and also populate the replacement indexes dict */
+    React.useEffect(function () {
+        var _a, _b, _c, _d;
+        var newSuggestions = [];
+        if (((_a = suggestionResponse === null || suggestionResponse === void 0 ? void 0 : suggestionResponse.replacementResults) === null || _a === void 0 ? void 0 : _a.length) === 1 &&
+            !((_c = (_b = suggestionResponse === null || suggestionResponse === void 0 ? void 0 : suggestionResponse.replacementResults[0]) === null || _b === void 0 ? void 0 : _b.replacements) === null || _c === void 0 ? void 0 : _c.length)) {
+            setShouldShowDropdown(false);
+        }
+        if ((_d = suggestionResponse === null || suggestionResponse === void 0 ? void 0 : suggestionResponse.replacementResults) === null || _d === void 0 ? void 0 : _d.length) {
+            suggestionResponse.replacementResults.forEach(function (_a) {
+                var replacements = _a.replacements, _b = _a.replacementInterval, from = _b.from, length = _b.length, extractedQuery = _a.extractedQuery;
+                var replacementsWithMetaData = replacements.map(function (r) { return (__assign(__assign({}, r), { query: extractedQuery, from: from, length: length })); });
+                newSuggestions = __spreadArray(__spreadArray([], __read(newSuggestions), false), __read(replacementsWithMetaData), false);
+            });
+            editorState.suggestions = newSuggestions;
+            setSuggestions(newSuggestions);
+        }
+        else {
+            editorState.suggestions = [];
+            setSuggestions([]);
+        }
+        editorState.index = 0;
+    }, [suggestionResponse, editorState]);
+    var asyncCheckInput = function (inputString) { return __awaiter(void 0, void 0, void 0, function () {
+        var result, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!checkInput) {
+                        return [2 /*return*/];
+                    }
+                    setPathValidationPending(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, checkInput(inputString)];
+                case 2:
+                    result = _a.sent();
+                    setValidationResponse(result);
+                    return [3 /*break*/, 5];
+                case 3:
+                    e_1 = _a.sent();
+                    setValidationResponse(undefined);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setPathValidationPending(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var checkValuePathValidity = useCallback(debounce(function (inputString) { return asyncCheckInput(inputString); }, 200), [checkInput]);
+    var handleEditorInputChange = useCallback(debounce(function (inputString, cursorPosition) { return asyncHandleEditorInputChange(inputString, cursorPosition); }, 200), [fetchSuggestions]);
+    React.useEffect(function () {
+        if (isFocused) {
+            setShouldShowDropdown(true);
+            handleEditorInputChange(value, cursorPosition);
+            return handleEditorInputChange.cancel;
+        }
+        return;
+    }, [cursorPosition, value, isFocused, handleEditorInputChange]);
+    // Trigger input validation
+    useEffect(function () {
+        checkValuePathValidity(value);
+        return checkValuePathValidity.cancel;
+    }, [value, checkValuePathValidity]);
+    var asyncHandleEditorInputChange = function (inputString, cursorPosition) { return __awaiter(void 0, void 0, void 0, function () {
+        var result, e_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setSuggestionsPending(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, fetchSuggestions(inputString, cursorPosition)];
+                case 2:
+                    result = _a.sent();
+                    setSuggestionResponse(result);
+                    return [3 /*break*/, 5];
+                case 3:
+                    e_2 = _a.sent();
+                    setSuggestionResponse(undefined);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setSuggestionsPending(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleChange = function (val) {
+        setValue(val);
+        onChange(val);
+    };
+    var handleCursorChange = function (pos, coords) {
+        setCursorPosition(pos.ch);
+        setCoords(function () { return coords; });
+    };
+    var handleInputEditorKeyPress = function (event) {
+        var overWrittenKeys = Object.values(OVERWRITTEN_KEYS);
+        if (overWrittenKeys.includes(event.key) && (useTabForCompletions || event.key !== OVERWRITTEN_KEYS.Tab)) {
+            event.preventDefault();
+            makeDropDownRespondToKeyPress(OVERWRITTEN_KEYS[event.key]);
+        }
+    };
+    var closeDropDown = function () {
+        setHighlightedElement(undefined);
+        setShouldShowDropdown(false);
+    };
+    var handleDropdownChange = function (selectedSuggestion) {
+        if (selectedSuggestion && editorState.editorInstance) {
+            var from = selectedSuggestion.from, length_2 = selectedSuggestion.length, value_1 = selectedSuggestion.value;
+            var to = from + length_2;
+            editorState.editorInstance.replaceRange(selectedSuggestion.value, { line: 0, ch: from }, { line: 0, ch: to });
+            closeDropDown();
+            editorState.editorInstance.setCursor({ line: 0, ch: from + value_1.length });
+            editorState.editorInstance.focus();
+        }
+    };
+    var handleInputEditorClear = function () {
+        handleChange("");
+        setValue("");
+        editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.focus();
+    };
+    var handleInputFocus = function (focusState) {
+        onFocusChange && onFocusChange(focusState);
+        setIsFocused(focusState);
+        focusState ? setShouldShowDropdown(true) : closeDropDown();
+    };
+    //keyboard handlers
+    var handleArrowDown = function () {
+        var lastSuggestionIndex = editorState.suggestions.length - 1;
+        setCurrentIndex(currentIndex() === lastSuggestionIndex ? 0 : currentIndex() + 1);
+    };
+    var handleArrowUp = function () {
+        var lastSuggestionIndex = editorState.suggestions.length - 1;
+        setCurrentIndex(currentIndex() === 0 ? lastSuggestionIndex : currentIndex() - 1);
+    };
+    var handleEnterPressed = function () {
+        handleDropdownChange(editorState.suggestions[currentIndex()]);
+        setCurrentIndex(0);
+    };
+    var handleTabPressed = function () {
+        handleDropdownChange(editorState.suggestions[currentIndex()]);
+    };
+    var makeDropDownRespondToKeyPress = function (keyPressedFromInput) {
+        // React state unknown
+        if (editorState.dropdownShown) {
+            switch (keyPressedFromInput) {
+                case OVERWRITTEN_KEYS.ArrowUp:
+                    handleArrowUp();
+                    break;
+                case OVERWRITTEN_KEYS.ArrowDown:
+                    handleArrowDown();
+                    break;
+                case OVERWRITTEN_KEYS.Enter:
+                    handleEnterPressed();
+                    break;
+                case OVERWRITTEN_KEYS.Tab:
+                    handleTabPressed();
+                    break;
+                default:
+                //do nothing
+            }
+        }
+    };
+    var handleItemHighlighting = React.useCallback(function (item) {
+        setHighlightedElement(item);
+    }, []);
+    var hasError = !!value && !pathIsValid && !pathValidationPending;
+    var autoSuggestionInput = React.createElement("div", { id: id, className: "ecc-auto-suggestion-box" },
+        React.createElement("div", { className: "ecc-auto-suggestion-box__editor-box " + BlueprintClassNames.INPUT_GROUP + " " + BlueprintClassNames.FILL + " " + (hasError ? BlueprintClassNames.INTENT_DANGER : "") },
+            React.createElement(SingleLineCodeEditor, { mode: "null", setEditorInstance: setEditorInstance, onChange: handleChange, onCursorChange: handleCursorChange, initialValue: value, onFocusChange: handleInputFocus, onKeyDown: handleInputEditorKeyPress, enableTab: useTabForCompletions, placeholder: placeholder, onSelection: setSelectedTextRanges, showScrollBar: showScrollBar }),
+            !!value && (React.createElement("span", { className: BlueprintClassNames.INPUT_ACTION },
+                React.createElement(IconButton, { "data-test-id": "value-path-clear-btn", name: "operation-clear", text: clearIconText, onClick: handleInputEditorClear })))),
+        shouldShowDropdown ? React.createElement(AutoSuggestionList, { left: coords.left, loading: suggestionsPending, options: suggestions, isOpen: !suggestionsPending && shouldShowDropdown, onItemSelectionChange: handleDropdownChange, currentlyFocusedIndex: focusedIndex, itemToHighlight: handleItemHighlighting }) : null);
+    var withRightElement = rightElement || leftElement ? React.createElement(Toolbar, { noWrap: true },
+        leftElement && React.createElement(ToolbarSection, null, leftElement),
+        React.createElement(ToolbarSection, { canGrow: true }, autoSuggestionInput),
+        rightElement && React.createElement(ToolbarSection, null, rightElement)) : autoSuggestionInput;
+    return label ? (React.createElement(FieldItem, { labelAttributes: {
+            text: (React.createElement(React.Fragment, null,
+                label,
+                "\u00A0",
+                (pathValidationPending || suggestionsPending) && (React.createElement(Spinner, { size: "tiny", position: "inline", description: "Validating value path" }))))
+        }, hasStateDanger: hasError, messageText: hasError ? validationErrorText : undefined }, withRightElement)) : withRightElement;
+};
+export default AutoSuggestion;
+//# sourceMappingURL=AutoSuggestion.js.map

package/dist/esm/components/AutoSuggestion/AutoSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSuggestion.js","sourceRoot":"","sources":["../../../../src/components/AutoSuggestion/AutoSuggestion.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/AutoSuggestion/AutoSuggestionList.js

@@ -0,0 +1,93 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+import computeScrollIntoView from "compute-scroll-into-view";
+import { Menu, MenuItem, Highlighter, OverviewItem, OverviewItemDescription, OverviewItemLine, OverflowText, Spinner, Spacing, Tooltip, } from "./../..//index.js";
+var ListItem = function (_a, ref) {
+    var item = _a.item;
+    var listItem = (React.createElement(OverviewItem, { densityHigh: true },
+        React.createElement(OverviewItemDescription, null,
+            React.createElement(OverviewItemLine, null,
+                React.createElement(OverflowText, { ellipsis: "reverse" },
+                    React.createElement(Highlighter, { label: item.value, searchValue: item.query }))),
+            item.description ? (React.createElement(OverviewItemLine, { small: true },
+                React.createElement(OverflowText, null,
+                    React.createElement(Highlighter, { label: item.description, searchValue: item.query })))) : null)));
+    return (React.createElement("div", { ref: ref }, !!item.description && item.description.length > 50 ? (React.createElement(Tooltip, { content: item.description }, listItem)) : (React.createElement(React.Fragment, null, listItem))));
+};
+var Item = React.forwardRef(ListItem);
+/** A drop-down-like list that can be used in combination with other components to show and select items. */
+export var AutoSuggestionList = function (_a) {
+    var isOpen = _a.isOpen, options = _a.options, loading = _a.loading, onItemSelectionChange = _a.onItemSelectionChange, left = _a.left, currentlyFocusedIndex = _a.currentlyFocusedIndex, itemToHighlight = _a.itemToHighlight;
+    var _b = __read(React.useState(undefined), 2), hoveredItem = _b[0], setHoveredItem = _b[1];
+    // Refs of list items
+    var _c = __read(React.useState([]), 1), refs = _c[0];
+    var dropdownRef = React.useRef(null);
+    var generateRef = function (index) {
+        if (!refs[index]) {
+            refs[index] = React.createRef();
+        }
+        return refs[index];
+    };
+    React.useEffect(function () {
+        var listIndexNode = refs[currentlyFocusedIndex];
+        if ((dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && (listIndexNode === null || listIndexNode === void 0 ? void 0 : listIndexNode.current)) {
+            var actions = computeScrollIntoView(listIndexNode.current, {
+                boundary: dropdownRef.current,
+                block: "nearest",
+                scrollMode: "if-needed",
+            });
+            actions.forEach(function (_a) {
+                var el = _a.el, top = _a.top, left = _a.left;
+                el.scrollTop = top;
+                el.scrollLeft = left;
+            });
+        }
+    }, [currentlyFocusedIndex, refs]);
+    var focusedItem = options[currentlyFocusedIndex];
+    // Decide which item to highlight
+    React.useEffect(function () {
+        itemToHighlight(!isOpen ? undefined : hoveredItem || focusedItem);
+    }, [
+        currentlyFocusedIndex,
+        itemToHighlight,
+        focusedItem,
+        isOpen,
+        hoveredItem,
+    ]);
+    var Loader = (React.createElement(OverviewItem, { hasSpacing: true },
+        React.createElement(OverviewItemLine, null, "Fetching suggestions"),
+        React.createElement(Spacing, { size: "tiny", vertical: true }),
+        React.createElement(Spinner, { position: "inline", description: "" })));
+    var loadingOrHasSuggestions = loading || options.length;
+    if (!loadingOrHasSuggestions || !isOpen)
+        return null;
+    return (React.createElement("div", { className: "ecc-auto-suggestion-box__dropdown", style: { left: left }, ref: dropdownRef }, loading ? (Loader) : (React.createElement(Menu, null, options.map(function (item, index) { return (React.createElement(MenuItem, { key: index, internalProps: {
+            active: currentlyFocusedIndex === index,
+            onMouseDown: function (e) { return e.preventDefault(); },
+            onClick: function () { return onItemSelectionChange(item); },
+            text: (React.createElement(Item, { ref: generateRef(index), item: item })),
+            onMouseEnter: function () { return setHoveredItem(item); },
+            onMouseLeave: function () { return setHoveredItem(undefined); },
+            onMouseOver: function () {
+                if (item.value !== (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.value)) {
+                    setHoveredItem(item);
+                }
+            },
+        } })); })))));
+};
+//# sourceMappingURL=AutoSuggestionList.js.map

package/dist/esm/components/AutoSuggestion/AutoSuggestionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSuggestionList.js","sourceRoot":"","sources":["../../../../src/components/AutoSuggestion/AutoSuggestionList.tsx"],"names":[],"mappings":"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"}