@eccenca/gui-elements 22.0.0-rc.6 → 22.1.0-rc.0

package/dist/components/AutocompleteField/AutoCompleteField.js

@@ -1,309 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AutoCompleteField = AutoCompleteField;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _select = require("@blueprintjs/select");
-
-var _index = require("../../index");
-
-var _constants = require("../../configuration/constants");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-AutoCompleteField.defaultProps = {
-  autoFocus: false,
-  disabled: false
-};
-/** Style object to be used in menu option items. */
-
-/** Hook that returns the element width of the given ref.*/
-const elementWidth = elRef => {
-  if (elRef && elRef.current) {
-    return {
-      width: elRef.current.offsetWidth + "px",
-      maxWidth: "90vw"
-    };
-  } else {
-    return {
-      width: "40rem",
-      maxWidth: "90vw"
-    };
-  }
-};
-/** Auto-complete input widget. */
-
-
-function AutoCompleteField(props) {
-  var _otherProps$inputProp;
-
-  const {
-    reset,
-    noResultText,
-    disabled,
-    itemValueSelector,
-    itemRenderer,
-    onSearch,
-    onChange,
-    initialValue,
-    autoFocus,
-    createNewItem,
-    itemValueRenderer,
-    resetQueryToValue,
-    ...otherProps
-  } = props;
-  const [selectedItem, setSelectedItem] = (0, _react.useState)(initialValue); // If the selection list elements are currently fetched from the backend
-
-  const [listLoading, setListLoading] = (0, _react.useState)(false);
-  const [query, setQuery] = (0, _react.useState)("");
-  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
-  const [highlightingEnabled, setHighlightingEnabled] = (0, _react.useState)(true); // The suggestions that match the user's input
-
-  const [filtered, setFiltered] = (0, _react.useState)([]);
-
-  const SuggestAutocomplete = _select.Suggest.ofType(); // Sets the query to the item value if it has a valid string value
-
-
-  const setQueryToSelectedValue = item => {
-    if (item) {
-      // If new values can be created, always reset the query value to the actual value of the selected item.
-      // This e.g. prevents that the "create new" option will be shown, since an item with the same value already exists.
-      const defaultResetValue = createNewItem && typeof itemValueSelector(item) === "string" ? itemValueSelector(item) : itemValueRenderer(item);
-      const resetVal = resetQueryToValue ? resetQueryToValue(item) : defaultResetValue;
-      setQuery(resetVal);
-    }
-  };
-
-  const fieldRef = (0, _react.useRef)(null); // The key for the option elements
-
-  const itemKey = item => {
-    let itemValue = itemValueSelector(item);
-
-    if (typeof itemValue !== "string") {
-      itemValue = itemValueRenderer(item);
-    }
-
-    return itemValue;
-  };
-
-  (0, _react.useEffect)(() => {
-    setQueryToSelectedValue(selectedItem);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [selectedItem]);
-  (0, _react.useEffect)(() => {
-    if (!disabled && hasFocus) {
-      setListLoading(true);
-      const timeout = window.setTimeout(async () => {
-        fetchQueryResults(query);
-      }, 200);
-      return () => {
-        clearTimeout(timeout);
-        setListLoading(false);
-      };
-    }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [hasFocus, query]);
-  const fieldWidthLimits = elementWidth(fieldRef); // We need to fire some actions when the auto-complete widget gets or loses focus
-
-  const handleOnFocusIn = () => {
-    setHasFocus(true);
-  };
-
-  const handleOnFocusOut = () => {
-    setHasFocus(false);
-  }; // On popover close reset query to selected item
-
-
-  const onPopoverClose = () => {
-    // Reset query to selected value when loosing focus, so the selected value can always be edited.
-    setQueryToSelectedValue(selectedItem); // Reset option list when the popover closes, so next use there is not displayed a stale list
-
-    setFiltered([]);
-  }; // Triggered when an item from the selection list gets selected
-
-
-  const onSelectionChange = (value, e) => {
-    setSelectedItem(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(itemValueSelector(value), e);
-    setQueryToSelectedValue(value);
-  };
-
-  const areEqualItems = (itemA, itemB) => itemValueSelector(itemA) === itemValueSelector(itemB); // Return the index of the item in the array based on the itemValueRenderer value
-
-
-  const itemIndexOf = (arr, searchItem) => {
-    let idx = -1;
-    const searchItemString = itemValueSelector(searchItem);
-    arr.forEach((v, i) => {
-      if (itemValueSelector(v) === searchItemString) {
-        idx = i;
-      }
-    });
-    return idx;
-  }; // Fetches the results for the given query
-
-
-  const fetchQueryResults = async input => {
-    setListLoading(true);
-
-    try {
-      let result = await onSearch(input);
-      const onlySelectItemReturned = result.length <= 1 && selectedItem && input.length > 0 && (itemValueRenderer(selectedItem) === input || itemValueSelector(selectedItem) === input);
-      let enableHighlighting = true;
-
-      if (onlySelectItemReturned) {
-        // If the auto-completion only returns no suggestion or the selected item itself, query with empty string.
-        const emptyStringResults = await onSearch(""); // Disable highlighting, since we used empty string search
-
-        enableHighlighting = false; // Put selected item at the top if it is not in the result list
-
-        if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) === -1) {
-          result = [selectedItem, ...emptyStringResults];
-        } else {
-          result = emptyStringResults;
-        }
-      }
-
-      setHighlightingEnabled(enableHighlighting);
-      setFiltered(result);
-    } catch (e) {
-      console.log(e);
-    } finally {
-      setListLoading(false);
-    }
-  }; // Renders the item in the selection list
-
-
-  const optionRenderer = (item, {
-    handleClick,
-    modifiers,
-    query
-  }) => {
-    if (!modifiers.matchesPredicate) {
-      return null;
-    }
-
-    const relevantModifiers = {
-      active: modifiers.active,
-      disabled: modifiers.disabled,
-      styleWidth: fieldWidthLimits,
-      highlightingEnabled: highlightingEnabled
-    };
-    const renderedItem = itemRenderer(item, query, relevantModifiers, handleClick);
-
-    if (typeof renderedItem === "string") {
-      return /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
-        active: modifiers.active,
-        disabled: modifiers.disabled,
-        key: itemKey(item),
-        onClick: handleClick,
-        text: /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
-          style: fieldWidthLimits
-        }, !highlightingEnabled ? renderedItem : /*#__PURE__*/_react.default.createElement(_index.Highlighter, {
-          label: renderedItem,
-          searchValue: query
-        }))
-      });
-    } else {
-      return renderedItem;
-    }
-  }; // Resets the selection
-
-
-  const clearSelection = resetValue => () => {
-    setSelectedItem(undefined);
-    onChange === null || onChange === void 0 ? void 0 : onChange(resetValue);
-    setQuery("");
-  }; // Optional clear button to reset the selected value
-
-
-  const clearButton = reset && selectedItem != null && reset.resettableValue(selectedItem) ? /*#__PURE__*/_react.default.createElement(_index.IconButton, {
-    "data-test-id": ((_otherProps$inputProp = otherProps.inputProps) !== null && _otherProps$inputProp !== void 0 && _otherProps$inputProp.id ? `${otherProps.inputProps.id}-` : "") + "auto-complete-clear-btn",
-    name: "operation-clear",
-    text: reset.resetButtonText,
-    onClick: clearSelection(reset.resetValue)
-  }) : undefined; // Additional properties for the input element of the auto-completion widget
-
-  const updatedInputProps = {
-    rightElement: clearButton,
-    autoFocus: autoFocus,
-    onBlur: handleOnFocusOut,
-    onFocus: handleOnFocusIn,
-    ...otherProps.inputProps
-  };
-  const updatedPopOverProps = {
-    minimal: true,
-    position: "bottom",
-    popoverClassName: `${_constants.CLASSPREFIX}-autocompletefield__options`,
-    wrapperTagName: "div",
-    onClosed: onPopoverClose,
-    ...otherProps.popoverProps
-  };
-
-  if (selectedItem !== undefined) {
-    // Makes sure that even when an empty string is selected, the placeholder won't be shown.
-    updatedInputProps.placeholder = "";
-  } // For some reason Typescript is not able to infer the union type from the ternary expression
-
-
-  const createNewItemPosition = createNewItem !== null && createNewItem !== void 0 && createNewItem.showNewItemOptionFirst ? "first" : "last";
-  const createNewItemProps = createNewItem ? {
-    createNewItemFromQuery: createNewItem.itemFromQuery,
-    createNewItemRenderer: (query, active, handleClick) => {
-      if (selectedItem && query === itemValueSelector(selectedItem)) {
-        // Never show create new item option if the same item is already selected
-        return undefined;
-      } else {
-        return createNewItem.itemRenderer(query, {
-          active,
-          styleWidth: fieldWidthLimits,
-          highlightingEnabled: false
-        }, handleClick);
-      }
-    },
-    createNewItemPosition
-  } : {};
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: fieldRef
-  }, /*#__PURE__*/_react.default.createElement(SuggestAutocomplete, (0, _extends2.default)({
-    className: `${_constants.CLASSPREFIX}-autocompletefield__input`,
-    disabled: disabled,
-    items: filtered,
-    inputValueRenderer: selectedItem !== undefined ? itemValueRenderer : () => "",
-    itemRenderer: optionRenderer,
-    itemsEqual: areEqualItems,
-    noResults: /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
-      disabled: true,
-      text: noResultText,
-      style: fieldWidthLimits
-    }),
-    onItemSelect: onSelectionChange,
-    onQueryChange: q => setQuery(q),
-    closeOnSelect: true,
-    query: query // FIXME: This leads to odd compile errors without "as any"
-    ,
-    popoverProps: updatedPopOverProps,
-    selectedItem: selectedItem,
-    fill: true
-  }, createNewItemProps, {
-    // FIXME: This leads to odd compile errors without "as any"
-    inputProps: updatedInputProps,
-    itemListRenderer: listLoading ? () => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
-      disabled: true,
-      text: /*#__PURE__*/_react.default.createElement(_index.Spinner, {
-        position: "inline"
-      }),
-      style: fieldWidthLimits
-    })) : undefined
-  })));
-}

package/dist/components/AutocompleteField/AutoCompleteField.jsx

@@ -1,295 +0,0 @@
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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, { useEffect, useRef, useState } from "react";
-import { Suggest } from "@blueprintjs/select";
-import { Highlighter, IconButton, Menu, MenuItem, OverflowText, Spinner } from "../../index";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-AutoCompleteField.defaultProps = {
-    autoFocus: false,
-    disabled: false,
-};
-/** Hook that returns the element width of the given ref.*/
-var elementWidth = function (elRef) {
-    if (elRef && elRef.current) {
-        return { width: elRef.current.offsetWidth + "px", maxWidth: "90vw" };
-    }
-    else {
-        return { width: "40rem", maxWidth: "90vw" };
-    }
-};
-/** Auto-complete input widget. */
-export function AutoCompleteField(props) {
-    var _this = this;
-    var _a;
-    var reset = props.reset, noResultText = props.noResultText, disabled = props.disabled, itemValueSelector = props.itemValueSelector, itemRenderer = props.itemRenderer, onSearch = props.onSearch, onChange = props.onChange, initialValue = props.initialValue, autoFocus = props.autoFocus, createNewItem = props.createNewItem, itemValueRenderer = props.itemValueRenderer, resetQueryToValue = props.resetQueryToValue, otherProps = __rest(props, ["reset", "noResultText", "disabled", "itemValueSelector", "itemRenderer", "onSearch", "onChange", "initialValue", "autoFocus", "createNewItem", "itemValueRenderer", "resetQueryToValue"]);
-    var _b = __read(useState(initialValue), 2), selectedItem = _b[0], setSelectedItem = _b[1];
-    // If the selection list elements are currently fetched from the backend
-    var _c = __read(useState(false), 2), listLoading = _c[0], setListLoading = _c[1];
-    var _d = __read(useState(""), 2), query = _d[0], setQuery = _d[1];
-    var _e = __read(useState(false), 2), hasFocus = _e[0], setHasFocus = _e[1];
-    var _f = __read(useState(true), 2), highlightingEnabled = _f[0], setHighlightingEnabled = _f[1];
-    // The suggestions that match the user's input
-    var _g = __read(useState([]), 2), filtered = _g[0], setFiltered = _g[1];
-    var SuggestAutocomplete = Suggest.ofType();
-    // Sets the query to the item value if it has a valid string value
-    var setQueryToSelectedValue = function (item) {
-        if (item) {
-            // If new values can be created, always reset the query value to the actual value of the selected item.
-            // This e.g. prevents that the "create new" option will be shown, since an item with the same value already exists.
-            var defaultResetValue = createNewItem && typeof itemValueSelector(item) === "string" ? itemValueSelector(item) : itemValueRenderer(item);
-            var resetVal = resetQueryToValue ? resetQueryToValue(item) : defaultResetValue;
-            setQuery(resetVal);
-        }
-    };
-    var fieldRef = useRef(null);
-    // The key for the option elements
-    var itemKey = function (item) {
-        var itemValue = itemValueSelector(item);
-        if (typeof itemValue !== "string") {
-            itemValue = itemValueRenderer(item);
-        }
-        return itemValue;
-    };
-    useEffect(function () {
-        setQueryToSelectedValue(selectedItem);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedItem]);
-    useEffect(function () {
-        if (!disabled && hasFocus) {
-            setListLoading(true);
-            var timeout_1 = window.setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    fetchQueryResults(query);
-                    return [2 /*return*/];
-                });
-            }); }, 200);
-            return function () {
-                clearTimeout(timeout_1);
-                setListLoading(false);
-            };
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hasFocus, query]);
-    var fieldWidthLimits = elementWidth(fieldRef);
-    // We need to fire some actions when the auto-complete widget gets or loses focus
-    var handleOnFocusIn = function () {
-        setHasFocus(true);
-    };
-    var handleOnFocusOut = function () {
-        setHasFocus(false);
-    };
-    // On popover close reset query to selected item
-    var onPopoverClose = function () {
-        // Reset query to selected value when loosing focus, so the selected value can always be edited.
-        setQueryToSelectedValue(selectedItem);
-        // Reset option list when the popover closes, so next use there is not displayed a stale list
-        setFiltered([]);
-    };
-    // Triggered when an item from the selection list gets selected
-    var onSelectionChange = function (value, e) {
-        setSelectedItem(value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(itemValueSelector(value), e);
-        setQueryToSelectedValue(value);
-    };
-    var areEqualItems = function (itemA, itemB) { return itemValueSelector(itemA) === itemValueSelector(itemB); };
-    // Return the index of the item in the array based on the itemValueRenderer value
-    var itemIndexOf = function (arr, searchItem) {
-        var idx = -1;
-        var searchItemString = itemValueSelector(searchItem);
-        arr.forEach(function (v, i) {
-            if (itemValueSelector(v) === searchItemString) {
-                idx = i;
-            }
-        });
-        return idx;
-    };
-    // Fetches the results for the given query
-    var fetchQueryResults = function (input) { return __awaiter(_this, void 0, void 0, function () {
-        var result, onlySelectItemReturned, enableHighlighting, emptyStringResults, e_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setListLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 5, 6, 7]);
-                    return [4 /*yield*/, onSearch(input)];
-                case 2:
-                    result = _a.sent();
-                    onlySelectItemReturned = result.length <= 1 && selectedItem && input.length > 0 &&
-                        (itemValueRenderer(selectedItem) === input || itemValueSelector(selectedItem) === input);
-                    enableHighlighting = true;
-                    if (!onlySelectItemReturned) return [3 /*break*/, 4];
-                    return [4 /*yield*/, onSearch("")];
-                case 3:
-                    emptyStringResults = _a.sent();
-                    // Disable highlighting, since we used empty string search
-                    enableHighlighting = false;
-                    // Put selected item at the top if it is not in the result list
-                    if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) === -1) {
-                        result = __spreadArray([selectedItem], __read(emptyStringResults), false);
-                    }
-                    else {
-                        result = emptyStringResults;
-                    }
-                    _a.label = 4;
-                case 4:
-                    setHighlightingEnabled(enableHighlighting);
-                    setFiltered(result);
-                    return [3 /*break*/, 7];
-                case 5:
-                    e_1 = _a.sent();
-                    console.log(e_1);
-                    return [3 /*break*/, 7];
-                case 6:
-                    setListLoading(false);
-                    return [7 /*endfinally*/];
-                case 7: return [2 /*return*/];
-            }
-        });
-    }); };
-    // Renders the item in the selection list
-    var optionRenderer = function (item, _a) {
-        var handleClick = _a.handleClick, modifiers = _a.modifiers, query = _a.query;
-        if (!modifiers.matchesPredicate) {
-            return null;
-        }
-        var relevantModifiers = {
-            active: modifiers.active,
-            disabled: modifiers.disabled,
-            styleWidth: fieldWidthLimits,
-            highlightingEnabled: highlightingEnabled,
-        };
-        var renderedItem = itemRenderer(item, query, relevantModifiers, handleClick);
-        if (typeof renderedItem === "string") {
-            return (<MenuItem active={modifiers.active} disabled={modifiers.disabled} key={itemKey(item)} onClick={handleClick} text={<OverflowText style={fieldWidthLimits}>
-                            {!highlightingEnabled ? renderedItem : <Highlighter label={renderedItem} searchValue={query}/>}
-                        </OverflowText>}/>);
-        }
-        else {
-            return renderedItem;
-        }
-    };
-    // Resets the selection
-    var clearSelection = function (resetValue) { return function () {
-        setSelectedItem(undefined);
-        onChange === null || onChange === void 0 ? void 0 : onChange(resetValue);
-        setQuery("");
-    }; };
-    // Optional clear button to reset the selected value
-    var clearButton = reset &&
-        selectedItem != null &&
-        reset.resettableValue(selectedItem) ? (<IconButton data-test-id={(((_a = otherProps.inputProps) === null || _a === void 0 ? void 0 : _a.id) ? otherProps.inputProps.id + "-" : "") + "auto-complete-clear-btn"} name="operation-clear" text={reset.resetButtonText} onClick={clearSelection(reset.resetValue)}/>) : undefined;
-    // Additional properties for the input element of the auto-completion widget
-    var updatedInputProps = __assign({ rightElement: clearButton, autoFocus: autoFocus, onBlur: handleOnFocusOut, onFocus: handleOnFocusIn }, otherProps.inputProps);
-    var updatedPopOverProps = __assign({ minimal: true, position: "bottom", popoverClassName: eccgui + "-autocompletefield__options", wrapperTagName: "div", onClosed: onPopoverClose }, otherProps.popoverProps);
-    if (selectedItem !== undefined) {
-        // Makes sure that even when an empty string is selected, the placeholder won't be shown.
-        updatedInputProps.placeholder = "";
-    }
-    // For some reason Typescript is not able to infer the union type from the ternary expression
-    var createNewItemPosition = (createNewItem === null || createNewItem === void 0 ? void 0 : createNewItem.showNewItemOptionFirst) ? "first" : "last";
-    var createNewItemProps = createNewItem ? {
-        createNewItemFromQuery: createNewItem.itemFromQuery,
-        createNewItemRenderer: function (query, active, handleClick) {
-            if (selectedItem && query === itemValueSelector(selectedItem)) {
-                // Never show create new item option if the same item is already selected
-                return undefined;
-            }
-            else {
-                return createNewItem.itemRenderer(query, { active: active, styleWidth: fieldWidthLimits, highlightingEnabled: false }, handleClick);
-            }
-        },
-        createNewItemPosition: createNewItemPosition
-    } : {};
-    return (<div ref={fieldRef}>
-            <SuggestAutocomplete className={eccgui + "-autocompletefield__input"} disabled={disabled} items={filtered} inputValueRenderer={selectedItem !== undefined ? itemValueRenderer : function () { return ""; }} itemRenderer={optionRenderer} itemsEqual={areEqualItems} noResults={<MenuItem disabled={true} text={noResultText} style={fieldWidthLimits}/>} onItemSelect={onSelectionChange} onQueryChange={function (q) { return setQuery(q); }} closeOnSelect={true} query={query} 
-    // FIXME: This leads to odd compile errors without "as any"
-    popoverProps={updatedPopOverProps} selectedItem={selectedItem} fill {...createNewItemProps} 
-    // FIXME: This leads to odd compile errors without "as any"
-    inputProps={updatedInputProps} itemListRenderer={listLoading ? function () { return <Menu><MenuItem disabled={true} text={<Spinner position={"inline"}/>} style={fieldWidthLimits}/></Menu>; } : undefined}/>
-        </div>);
-}

package/dist/components/AutocompleteField/autoCompleteFieldUtils.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createNewItemRendererFactory = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _OverflowText = _interopRequireDefault(require("../Typography/OverflowText"));
-
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
-
-/** Returns a function to be used in an AutoComplete widget for rendering custom elements based on the query string.
- *
- * @param itemTextRenderer The text or element that should be displayed for the new custom item suggestion.
- * @param iconName Optional icon to show left to the text.
- */
-const createNewItemRendererFactory = (itemTextRenderer, iconName) => {
-  // Return custom render function
-  return (query, modifiers, handleClick) => {
-    let textElement = itemTextRenderer(query, modifiers.styleWidth);
-
-    if (typeof textElement === "string") {
-      textElement = /*#__PURE__*/_react.default.createElement(_OverflowText.default, {
-        style: modifiers.styleWidth
-      }, `Create option '${query}'`);
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      icon: iconName,
-      active: modifiers.active,
-      key: query,
-      onClick: handleClick,
-      text: textElement
-    });
-  };
-};
-
-exports.createNewItemRendererFactory = createNewItemRendererFactory;