@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
524 lines • 29.7 kB
JavaScript
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 (g && (g = 0, op[0] && (_ = 0)), _) 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));
};
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useMemo, useState } from "react";
import { Classes as BlueprintClassNames } from "@blueprintjs/core";
import { debounce } from "lodash";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { ContextOverlay, FieldItem, IconButton, Spinner, Toolbar, ToolbarSection } from "./../../index.js";
import { markText, removeMarkFromText } from "./extensions/markText.js";
import { AutoSuggestionList } from "./AutoSuggestionList.js";
//custom components
import ExtendedCodeEditor from "./ExtendedCodeEditor.js";
var EXTRA_VERTICAL_PADDING = 10;
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["Escape"] = "Escape";
})(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.
*
* Example usage: input of a path string offering auto-completion for each single part of the path.
*/
export var CodeAutocompleteField = function (_a) {
var _b, _c, _d;
var className = _a.className, label = _a.label, initialValue = _a.initialValue, onChange = _a.onChange, fetchSuggestions = _a.fetchSuggestions, checkInput = _a.checkInput, _e = _a.validationErrorText, validationErrorText = _e === void 0 ? "Invalid value" : _e, _f = _a.clearIconText, clearIconText = _f === void 0 ? "Clear" : _f, onFocusChange = _a.onFocusChange, id = _a.id, onInputChecked = _a.onInputChecked, leftElement = _a.leftElement, rightElement = _a.rightElement, _g = _a.useTabForCompletions, useTabForCompletions = _g === void 0 ? false : _g, placeholder = _a.placeholder, _h = _a.showScrollBar, showScrollBar = _h === void 0 ? true : _h, _j = _a.autoCompletionRequestDelay, autoCompletionRequestDelay = _j === void 0 ? 1000 : _j, _k = _a.validationRequestDelay, validationRequestDelay = _k === void 0 ? 200 : _k, mode = _a.mode, _l = _a.multiline, multiline = _l === void 0 ? false : _l, _m = _a.reInitOnInitialValueChange, reInitOnInitialValueChange = _m === void 0 ? false : _m, height = _a.height, readOnly = _a.readOnly, outerDivAttributes = _a.outerDivAttributes;
var value = React.useRef(initialValue);
var cursorPosition = React.useRef(0);
var dropdownXYoffset = React.useRef({ x: 0, y: 0 });
var _o = __read(React.useState(false), 2), shouldShowDropdown = _o[0], setShouldShowDropdown = _o[1];
var _p = __read(React.useState([]), 2), suggestions = _p[0], setSuggestions = _p[1];
var _q = __read(React.useState(false), 2), suggestionsPending = _q[0], setSuggestionsPending = _q[1];
var suggestionRequestData = React.useRef({ requestId: undefined });
var _r = __read(React.useState(false), 2), pathValidationPending = _r[0], setPathValidationPending = _r[1];
var validationRequestData = React.useRef({ requestId: undefined });
var errorMarkers = React.useRef([]);
var _s = __read(useState(undefined), 2), validationResponse = _s[0], setValidationResponse = _s[1];
var _t = __read(useState(undefined), 2), suggestionResponse = _t[0], setSuggestionResponse = _t[1];
// The element that should be used for replacement highlighting
var _u = __read(useState(undefined), 2), highlightedElement = _u[0], setHighlightedElement = _u[1];
var _v = __read(React.useState(), 2), cm = _v[0], setCM = _v[1];
var currentCm = React.useRef();
currentCm.current = cm;
var isFocused = React.useRef(false);
var autoSuggestionDivRef = React.useRef(null);
/** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
var _w = __read(React.useState({ index: 0, suggestions: [], dropdownShown: false }), 1), editorState = _w[0];
/** This is for the AutoSuggestionList component in order to re-render. */
var _x = __read(React.useState(0), 2), focusedIndex = _x[0], setFocusedIndex = _x[1];
var selectedTextRanges = React.useRef([]);
var pathIsValid = (_b = validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.valid) !== null && _b !== void 0 ? _b : true;
React.useEffect(function () {
var _a;
if (reInitOnInitialValueChange && initialValue != null && currentCm.current) {
dispatch({
changes: { from: 0, to: (_a = currentCm.current.state) === null || _a === void 0 ? void 0 : _a.doc.length, insert: initialValue },
});
// Validate initial value change
checkValuePathValidity(initialValue);
}
}, [initialValue, reInitOnInitialValueChange]);
React.useEffect(function () {
if (currentCm.current) {
// Validate initial value
checkValuePathValidity(initialValue);
}
}, [!!currentCm.current]);
var setCurrentIndex = function (newIndex) {
editorState.index = newIndex;
setFocusedIndex(newIndex);
};
var currentIndex = function () { return editorState.index; };
React.useEffect(function () {
editorState.cm = cm;
}, [cm, editorState]);
var dispatch = (typeof ((_c = editorState === null || editorState === void 0 ? void 0 : editorState.cm) === null || _c === void 0 ? void 0 : _c.dispatch) === "function" ? (_d = editorState === null || editorState === void 0 ? void 0 : editorState.cm) === null || _d === void 0 ? void 0 : _d.dispatch : function () { });
React.useEffect(function () {
editorState.dropdownShown = shouldShowDropdown;
}, [shouldShowDropdown, editorState]);
// Handle replacement highlighting
useEffect(function () {
var _a;
if (highlightedElement && cm) {
var from_1 = highlightedElement.from, length_1 = highlightedElement.length;
if (length_1 > 0 && selectedTextRanges.current.length === 0) {
var to_1 = from_1 + length_1;
var _b = getOffsetRange(cm, from_1, to_1), toOffset = _b.toOffset, fromOffset = _b.fromOffset;
markText({
view: cm,
from: fromOffset,
to: toOffset,
className: "".concat(eccgui, "-autosuggestion__text--highlighted"),
});
return function () { return removeMarkFromText({ view: cm, from: from_1, to: to_1 }); };
}
}
else {
if (cm) {
removeMarkFromText({ view: cm, from: 0, to: (_a = cm.state) === null || _a === void 0 ? void 0 : _a.doc.length });
}
}
return;
}, [highlightedElement, selectedTextRanges, cm]);
//handle linting
React.useEffect(function () {
var parseError = validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.parseError;
if (cm) {
var clearCurrentErrorMarker = function () {
if (errorMarkers.current.length) {
var _a = __read(errorMarkers.current, 2), from = _a[0], to = _a[1];
removeMarkFromText({ view: cm, from: from, to: to });
errorMarkers.current = [];
}
};
if (parseError) {
var message = parseError.message, start = parseError.start, end = parseError.end;
clearCurrentErrorMarker();
var _a = markText({
view: cm,
from: start,
to: end,
className: "".concat(eccgui, "-autosuggestion__text--highlighted-error"),
title: message,
}), from = _a.from, to = _a.to;
errorMarkers.current = [from, to];
}
else {
clearCurrentErrorMarker();
}
}
var isValid = (validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.valid) === undefined || validationResponse.valid;
onInputChecked === null || onInputChecked === void 0 ? void 0 : onInputChecked(isValid);
}, [validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.valid, validationResponse === null || validationResponse === void 0 ? void 0 : validationResponse.parseError, cm, 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([]);
}
setCurrentIndex(0);
}, [suggestionResponse, editorState]);
var getOffsetRange = function (cm, from, to) {
if (!cm)
return { fromOffset: 0, toOffset: 0 };
var cursor = cm.state.selection.main.head;
var cursorLine = cm.state.doc.lineAt(cursor).number;
var offsetFromFirstLine = cm.state.doc.line(cursorLine).from; //all characters including line breaks
var fromOffset = offsetFromFirstLine + from;
var toOffset = offsetFromFirstLine + to;
return { fromOffset: fromOffset, toOffset: toOffset };
};
var inputActionsDisplayed = React.useCallback(function (node) {
if (!node)
return;
var width = node.offsetWidth;
var slCodeEditor = node.parentElement.getElementsByClassName("".concat(eccgui, "-singlelinecodeeditor"));
if (slCodeEditor.length > 0) {
slCodeEditor[0].style.paddingRight = "".concat(width, "px");
}
}, []);
var asyncCheckInput = useMemo(function () { return 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 ||
inputString !== value.current ||
validationRequestData.current.requestId === inputString) {
return [2 /*return*/];
}
validationRequestData.current.requestId = inputString;
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*/];
}
});
}); }; }, [checkInput]);
var checkValuePathValidity = useMemo(function () { return debounce(function (inputString) { return asyncCheckInput(inputString); }, validationRequestDelay); }, [asyncCheckInput, validationRequestDelay]);
var asyncHandleEditorInputChange = useMemo(function () { return function (inputString, cursorPosition) { return __awaiter(void 0, void 0, void 0, function () {
var requestId, cursor, cursorLine, result, e_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
requestId = "".concat(inputString, " ").concat(cursorPosition);
if (requestId === suggestionRequestData.current.requestId || !(editorState === null || editorState === void 0 ? void 0 : editorState.cm)) {
return [2 /*return*/];
}
suggestionRequestData.current.requestId = requestId;
setSuggestionsPending(true);
_a.label = 1;
case 1:
_a.trys.push([1, 4, 5, 6]);
cursor = editorState === null || editorState === void 0 ? void 0 : editorState.cm.state.selection.main.head;
cursorLine = editorState === null || editorState === void 0 ? void 0 : editorState.cm.state.doc.lineAt(cursor !== null && cursor !== void 0 ? cursor : 0).number;
if (!cursorLine) return [3 /*break*/, 3];
return [4 /*yield*/, fetchSuggestions(inputString.split("\n")[cursorLine - 1], //line starts from 1
cursorPosition)];
case 2:
result = _a.sent();
if (value.current === inputString) {
setSuggestionResponse(result);
}
_a.label = 3;
case 3: return [3 /*break*/, 6];
case 4:
e_2 = _a.sent();
setSuggestionResponse(undefined);
return [3 /*break*/, 6];
case 5:
setSuggestionsPending(false);
return [7 /*endfinally*/];
case 6: return [2 /*return*/];
}
});
}); }; }, [fetchSuggestions, cm]);
var handleEditorInputChange = useMemo(function () {
return debounce(function (inputString, cursorPosition) {
return asyncHandleEditorInputChange(inputString, cursorPosition);
}, autoCompletionRequestDelay);
}, [asyncHandleEditorInputChange, autoCompletionRequestDelay]);
var handleChange = React.useMemo(function () {
return function (val) {
value.current = val;
checkValuePathValidity.cancel();
checkValuePathValidity(value.current);
onChange(val);
};
}, [onChange, checkValuePathValidity]);
var handleCursorChange = function (cursor, coords, scrollinfo, view) {
//cursor here is offset from line 1, autosuggestion works with cursor per-line.
// derived cursor is current cursor position - start of line of cursor
var cursorLine = view.state.doc.lineAt(cursor).number;
var offsetFromFirstLine = view.state.doc.line(cursorLine).from; //;
cursorPosition.current = cursor - offsetFromFirstLine;
// cursor change is fired after onChange, so we put the auto-complete logic here
//get value at line
if (isFocused.current) {
setShouldShowDropdown(true);
handleEditorInputChange.cancel();
handleEditorInputChange(value.current, cursorPosition.current);
}
setTimeout(function () {
dropdownXYoffset.current = {
x: Math.min(coords.left, Math.max(coords.left - (scrollinfo === null || scrollinfo === void 0 ? void 0 : scrollinfo.scrollLeft), 0)),
y: multiline
? Math.min(coords.bottom, Math.max(coords.bottom - (scrollinfo === null || scrollinfo === void 0 ? void 0 : scrollinfo.scrollTop), 0)) +
EXTRA_VERTICAL_PADDING
: 0,
};
}, 1);
};
var handleInputEditorKeyPress = function (event) {
var overWrittenKeys = Object.values(OVERWRITTEN_KEYS);
if (overWrittenKeys.includes(event.key) && (useTabForCompletions || event.key !== OVERWRITTEN_KEYS.Tab)) {
//don't prevent when enter should create new line (multiline config) and dropdown isn't shown
var allowDefaultEnterKeyPressBehavior = multiline && !editorState.suggestions.length;
var overwrittenKey = OVERWRITTEN_KEYS[event.key];
if (!allowDefaultEnterKeyPressBehavior) {
event.preventDefault();
makeDropDownRespondToKeyPress(overwrittenKey);
return true; //prevent new line
}
makeDropDownRespondToKeyPress(overwrittenKey);
return false; // allow new line if enter
}
return true;
};
var closeDropDown = function () {
setHighlightedElement(undefined);
setShouldShowDropdown(false);
};
var handleDropdownChange = function (selectedSuggestion) {
var _a;
if (selectedSuggestion && editorState.cm) {
var from = selectedSuggestion.from, length_2 = selectedSuggestion.length, value_1 = selectedSuggestion.value;
// const cursor = editorState.editorInstance.getCursor();
var cursor = (_a = editorState.cm) === null || _a === void 0 ? void 0 : _a.state.selection.main.head;
var to = from + length_2;
var _b = getOffsetRange(editorState.cm, from, to), fromOffset = _b.fromOffset, toOffset = _b.toOffset;
editorState.cm.dispatch({
changes: {
from: fromOffset,
to: toOffset,
insert: value_1,
},
});
closeDropDown();
var cursorLine = editorState.cm.state.doc.lineAt(cursor).number;
var newCursorPos = editorState.cm.state.doc.line(cursorLine).from + (from + value_1.length);
editorState.cm.dispatch({ selection: { anchor: newCursorPos } });
editorState.cm.focus();
}
};
var handleInputEditorClear = function () {
dispatch({
changes: { from: 0, to: cm === null || cm === void 0 ? void 0 : cm.state.doc.length, insert: "" },
});
cursorPosition.current = 0;
handleChange("");
cm === null || cm === void 0 ? void 0 : cm.focus();
};
var handleInputFocus = function (focusState) {
onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(focusState);
if (focusState) {
setShouldShowDropdown(true);
}
else {
closeDropDown();
}
if (!isFocused.current && focusState) {
// Just got focus
// Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused
setSuggestions([]);
suggestionRequestData.current.requestId = undefined;
isFocused.current = focusState;
handleEditorInputChange.cancel();
handleEditorInputChange(value.current, cursorPosition.current);
}
else {
isFocused.current = focusState;
}
};
var handleInputMouseDown = React.useCallback(function (editor) {
var _a, _b;
var cursor = (_a = editorState.cm) === null || _a === void 0 ? void 0 : _a.state.selection.main.head;
var currentLine = (_b = editorState.cm) === null || _b === void 0 ? void 0 : _b.state.doc.lineAt(cursor !== null && cursor !== void 0 ? cursor : 0).number;
var clickedLine = editor === null || editor === void 0 ? void 0 : editor.state.doc.lineAt(cursor !== null && cursor !== void 0 ? cursor : 0).number;
//Clicking on a different line other than the current line
//where the dropdown already suggests should close the dropdown
if (currentLine !== clickedLine) {
closeDropDown();
editorState.suggestions = [];
setSuggestions([]);
}
}, []);
//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 handleEscapePressed = function () {
closeDropDown();
editorState.suggestions = [];
setSuggestions([]);
};
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;
case OVERWRITTEN_KEYS.Escape:
handleEscapePressed();
break;
default:
//do nothing
closeDropDown();
}
}
};
var handleItemHighlighting = React.useCallback(function (item) {
setHighlightedElement(item);
}, []);
var onSelection = React.useMemo(function () { return function (ranges) {
selectedTextRanges.current = ranges;
}; }, []);
var codeEditor = React.useMemo(function () {
return (React.createElement(ExtendedCodeEditor, { mode: mode, setCM: setCM, onChange: handleChange, onCursorChange: handleCursorChange, initialValue: initialValue, onFocusChange: handleInputFocus, onKeyDown: handleInputEditorKeyPress, enableTab: useTabForCompletions, placeholder: placeholder, onSelection: onSelection, showScrollBar: showScrollBar, multiline: multiline, onMouseDown: handleInputMouseDown, height: height, readOnly: readOnly }));
}, [
mode,
setCM,
handleChange,
initialValue,
useTabForCompletions,
placeholder,
showScrollBar,
multiline,
handleInputMouseDown,
readOnly,
]);
var hasError = !!value.current && !pathIsValid && !pathValidationPending;
var autoSuggestionInput = (React.createElement("div", __assign({ id: id, ref: autoSuggestionDivRef, className: "".concat(eccgui, "-codeautocompletefield ").concat(eccgui, "-autosuggestion") + (className ? " ".concat(className) : "") }, outerDivAttributes),
React.createElement("div", { className: " ".concat(eccgui, "-autosuggestion__inputfield ").concat(BlueprintClassNames.INPUT_GROUP, " ").concat(BlueprintClassNames.FILL, " ").concat(hasError ? BlueprintClassNames.INTENT_DANGER : "") },
React.createElement(ContextOverlay, { minimal: true, fill: true, isOpen: shouldShowDropdown, placement: "bottom-start", modifiers: { flip: { enabled: false } }, openOnTargetFocus: false, autoFocus: false, content: React.createElement(AutoSuggestionList, { id: id + "__dropdown", offsetValues: dropdownXYoffset.current, loading: suggestionsPending, options: suggestions, isOpen: !suggestionsPending && shouldShowDropdown, onItemSelectionChange: handleDropdownChange, currentlyFocusedIndex: focusedIndex, itemToHighlight: handleItemHighlighting }) }, codeEditor),
!!value.current && (React.createElement("span", { className: BlueprintClassNames.INPUT_ACTION, ref: inputActionsDisplayed },
React.createElement(IconButton, { "data-test-id": "value-path-clear-btn", name: "operation-clear", text: clearIconText, disabled: readOnly, onClick: handleInputEditorClear }))))));
var withRightElement = rightElement || leftElement ? (React.createElement(Toolbar, { noWrap: true },
leftElement && React.createElement(ToolbarSection, null, leftElement),
React.createElement(ToolbarSection, { canGrow: true, canShrink: true },
React.createElement("div", { style: { minWidth: "100%", maxWidth: "100%" } }, autoSuggestionInput)),
rightElement && React.createElement(ToolbarSection, null, rightElement))) : (autoSuggestionInput);
return label ? (React.createElement(FieldItem, { labelProps: {
text: (React.createElement(React.Fragment, null,
label,
"\u00A0",
(pathValidationPending || suggestionsPending) && (React.createElement(Spinner, { size: "tiny", position: "inline" })))),
}, intent: hasError ? "danger" : undefined, messageText: hasError ? validationErrorText : undefined }, withRightElement)) : (withRightElement);
};
export default CodeAutocompleteField;
//# sourceMappingURL=AutoSuggestion.js.map