@spaziodati/atoka-design-system 2.0.72-beta

package/Suggester/index.js

@@ -0,0 +1,1126 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("@fortawesome/pro-light-svg-icons/faSearch"), require("@fortawesome/react-fontawesome"), require("classnames"), require("react"), require("react-select"), require("react-select/async"));
+	else if(typeof define === 'function' && define.amd)
+		define("atoka-design-system", ["@fortawesome/pro-light-svg-icons/faSearch", "@fortawesome/react-fontawesome", "classnames", "react", "react-select", "react-select/async"], factory);
+	else if(typeof exports === 'object')
+		exports["atoka-design-system"] = factory(require("@fortawesome/pro-light-svg-icons/faSearch"), require("@fortawesome/react-fontawesome"), require("classnames"), require("react"), require("react-select"), require("react-select/async"));
+	else
+		root["atoka-design-system"] = factory(root["@fortawesome/pro-light-svg-icons/faSearch"], root["@fortawesome/react-fontawesome"], root["classnames"], root["react"], root["react-select"], root["react-select/async"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__8427__, __WEBPACK_EXTERNAL_MODULE__5692__, __WEBPACK_EXTERNAL_MODULE__8310__, __WEBPACK_EXTERNAL_MODULE__8156__, __WEBPACK_EXTERNAL_MODULE__1738__, __WEBPACK_EXTERNAL_MODULE__1553__) {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 8811:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "HighlightableText": () => (/* reexport */ HighlightableText)
+});
+
+// EXTERNAL MODULE: ./node_modules/autobind-decorator/lib/esm/index.js
+var esm = __webpack_require__(6627);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ./src/components/Utils/Text.ts
+var Text = __webpack_require__(6347);
+;// CONCATENATED MODULE: ./src/components/HighlightableText/HighlightableText.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+
+
+var HighlightableText = /** @class */ (function (_super) {
+    __extends(HighlightableText, _super);
+    function HighlightableText() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HighlightableText.prototype.needToHighlight = function () {
+        return !(0,Text/* isStringEmpty */.Wq)(this.props.highlighted);
+    };
+    HighlightableText.prototype.getParts = function () {
+        if (typeof this.props.children != 'string') {
+            throw Error('In this component, children have to be a string');
+        }
+        return (0,Text/* splitTextInParts */.ho)(this.props.highlighted, this.props.children);
+    };
+    HighlightableText.prototype.renderPart = function (text, index) {
+        var _a;
+        var isSelected = (0,Text/* isMatching */.OH)(text, this.props.highlighted), classname = external_classnames_default()('atoka-highlightable-text', this.props.size, (_a = {
+                'text-muted': this.props.isDisabled === true,
+                'bold': this.props.isBold,
+                'selected-text': isSelected
+            },
+            _a[this.props.highlightColor] = isSelected,
+            _a)), output = text;
+        if (isSelected) {
+            output = external_react_default().createElement("strong", null, text);
+        }
+        return (external_react_default().createElement("span", { key: text + "-" + index, className: classname }, output));
+    };
+    HighlightableText.prototype.highlightedText = function () {
+        var parts = this.getParts();
+        if (parts == null) {
+            return null;
+        }
+        return external_react_default().createElement("span", { className: this.props.className }, parts.map(this.renderPart));
+    };
+    HighlightableText.prototype.render = function () {
+        var children = this.props.children, classname = external_classnames_default()('atoka-highlightable-text', this.props.highlightColor, this.props.size, this.props.className, {
+            'text-muted': this.props.isDisabled === true,
+            'bold': this.props.isBold,
+        });
+        // We just need the style, which will apply on the <strong> or <b> elements
+        if (typeof children !== 'string') {
+            return external_react_default().createElement("span", { className: classname }, children);
+        }
+        if (!this.needToHighlight()) {
+            return external_react_default().createElement("span", { className: classname }, children);
+        }
+        return this.highlightedText();
+    };
+    var _a;
+    HighlightableText.displayName = 'HighlightableText';
+    HighlightableText.defaultProps = {
+        size: 'md',
+        highlightColor: 'orange',
+    };
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Number]),
+        __metadata("design:returntype", typeof (_a = typeof (external_react_default()) !== "undefined" && (external_react_default()).ReactNode) === "function" ? _a : Object)
+    ], HighlightableText.prototype, "renderPart", null);
+    return HighlightableText;
+}((external_react_default()).PureComponent));
+
+
+;// CONCATENATED MODULE: ./src/components/HighlightableText/index.ts
+
+
+
+/***/ }),
+
+/***/ 5447:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "CustomOptionProps": () => (/* reexport */ CustomOption_namespaceObject.CustomOptionProps),
+  "RenderMultiValueContainer": () => (/* reexport */ Suggester_namespaceObject.RenderMultiValueContainer),
+  "Suggester": () => (/* reexport */ Suggester),
+  "SuggesterProps": () => (/* reexport */ Suggester_namespaceObject.SuggesterProps),
+  "getRenderCustomMultiValueWithIcon": () => (/* reexport */ getRenderCustomMultiValueWithIcon)
+});
+
+// NAMESPACE OBJECT: ./src/components/Suggester/CustomOption.tsx
+var CustomOption_namespaceObject = {};
+__webpack_require__.r(CustomOption_namespaceObject);
+__webpack_require__.d(CustomOption_namespaceObject, {
+  "W": () => (CustomOption)
+});
+
+// NAMESPACE OBJECT: ./src/components/Suggester/Suggester.tsx
+var Suggester_namespaceObject = {};
+__webpack_require__.r(Suggester_namespaceObject);
+__webpack_require__.d(Suggester_namespaceObject, {
+  "_": () => (Suggester)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "react-select"
+var external_react_select_ = __webpack_require__(1738);
+var external_react_select_default = /*#__PURE__*/__webpack_require__.n(external_react_select_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: ./node_modules/autobind-decorator/lib/esm/index.js
+var esm = __webpack_require__(6627);
+// EXTERNAL MODULE: external "react-select/async"
+var async_ = __webpack_require__(1553);
+var async_default = /*#__PURE__*/__webpack_require__.n(async_);
+// EXTERNAL MODULE: external "@fortawesome/pro-light-svg-icons/faSearch"
+var faSearch_ = __webpack_require__(8427);
+// EXTERNAL MODULE: ./src/components/Utils/CommonTypes.ts
+var CommonTypes = __webpack_require__(6055);
+// EXTERNAL MODULE: ./src/components/HighlightableText/index.ts + 1 modules
+var HighlightableText = __webpack_require__(8811);
+// EXTERNAL MODULE: ./src/components/Utils/Text.ts
+var Text = __webpack_require__(6347);
+;// CONCATENATED MODULE: ./src/components/Suggester/CustomOption.tsx
+
+
+
+
+
+/**
+ * ### Overview
+ *
+ * The `CustomOption` also supports to have children.
+ * You can use the `.custom-value` class also in its children if you want it to be styled in uppercase.
+ * */
+var CustomOption = function (_a) {
+    var item = _a.item, optionDataValueKey = _a.optionDataValueKey, optionDataLabelKey = _a.optionDataLabelKey, optionDataCustomValueKey = _a.optionDataCustomValueKey, children = _a.children, selectedText = _a.selectedText, className = _a.className;
+    function getLabel(key) {
+        if (!(0,Text/* isStringEmpty */.Wq)(selectedText)) {
+            return external_react_default().createElement(HighlightableText.HighlightableText, { highlighted: selectedText }, item[key]);
+        }
+        return item[key];
+    }
+    // eslint-disable-next-line react/display-name
+    function updateOptionContent(value, optionLabelKey) {
+        if (value === '') {
+            return external_react_default().createElement("span", { className: 'label' }, getLabel(optionLabelKey));
+        }
+        return (external_react_default().createElement((external_react_default()).Fragment, null,
+            external_react_default().createElement("span", { className: 'label mr-1' },
+                value,
+                ":"),
+            getLabel(optionLabelKey)));
+    }
+    var optionContent = '', customValue = null;
+    if (optionDataValueKey && item[optionDataValueKey] != null) {
+        optionContent = getLabel(optionDataValueKey);
+    }
+    if (optionDataLabelKey && item[optionDataLabelKey] != null) {
+        optionContent = updateOptionContent(optionContent, optionDataLabelKey);
+    }
+    if (optionDataCustomValueKey && item[optionDataCustomValueKey] != null) {
+        customValue = external_react_default().createElement("span", { className: 'custom-value ml-2' }, item[optionDataCustomValueKey]);
+    }
+    var classNames = external_classnames_default()('option-data-item overflow-hidden', className);
+    return (external_react_default().createElement("span", { className: classNames },
+        optionContent,
+        customValue,
+        children));
+};
+CustomOption.displayName = 'CustomOption';
+
+// EXTERNAL MODULE: external "@fortawesome/react-fontawesome"
+var react_fontawesome_ = __webpack_require__(5692);
+;// CONCATENATED MODULE: ./src/components/Suggester/InputValueContainer.tsx
+var __assign = (undefined && undefined.__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 __rest = (undefined && undefined.__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 InputValueContainer = function (_a) {
+    var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
+    // eslint-disable-next-line react/display-name
+    function renderIcon() {
+        if (children == null || icon == null) {
+            return null;
+        }
+        return external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { icon: icon });
+    }
+    if (external_react_select_.components.ValueContainer == null) {
+        return null;
+    }
+    return (external_react_default().createElement(external_react_select_.components.ValueContainer, __assign({}, props, { className: 'input-value-container' }),
+        renderIcon(),
+        children));
+};
+InputValueContainer.displayName = 'InputValueContainer';
+
+;// CONCATENATED MODULE: ./src/components/Suggester/getRenderCustomMultiValueWithIcon.tsx
+var getRenderCustomMultiValueWithIcon_assign = (undefined && undefined.__assign) || function () {
+    getRenderCustomMultiValueWithIcon_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 getRenderCustomMultiValueWithIcon_assign.apply(this, arguments);
+};
+
+
+
+
+
+var getRenderCustomMultiValueWithIcon = function (icon, color) {
+    if (color === void 0) { color = 'blue300'; }
+    return function (props) {
+        // eslint-disable-next-line react/display-name
+        function getIcon() {
+            if (icon == null) {
+                return null;
+            }
+            return (external_react_default().createElement("div", { className: 'icon-container' },
+                external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { icon: icon })));
+        }
+        var className = external_classnames_default()('custom-multi-value-with-icon', props.className, color), labelClassName = external_classnames_default()({ 'ml-1': icon != null, 'ml-2': icon == null });
+        return (external_react_default().createElement(external_react_select_.components.MultiValue, getRenderCustomMultiValueWithIcon_assign({}, props, { className: className }),
+            getIcon(),
+            external_react_default().createElement("span", { className: labelClassName }, props.data.label)));
+    };
+};
+
+;// CONCATENATED MODULE: ./src/components/Suggester/Suggester.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var Suggester_assign = (undefined && undefined.__assign) || function () {
+    Suggester_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 Suggester_assign.apply(this, arguments);
+};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __read = (undefined && undefined.__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 __spread = (undefined && undefined.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+
+
+
+
+
+
+
+
+
+
+
+// eslint-disable-next-line react/display-name
+var DefaultSuggestedOption = function (item, insertedText) { return (external_react_default().createElement(Suggester.CustomOption, { item: item, optionDataValueKey: 'label', selectedText: insertedText })); };
+var DefaultMultiValue = getRenderCustomMultiValueWithIcon();
+/**
+ * ### Overview
+ *
+ * The `Suggester` allows users to either filter or sort items in a list according to specific parameters.
+ * It can be used in sync as well as in async.
+ * */
+var Suggester = /** @class */ (function (_super) {
+    __extends(Suggester, _super);
+    function Suggester() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            insertedText: '',
+        };
+        return _this;
+    }
+    Suggester.prototype.loadOptions = function (input, callback) {
+        var _a, _b;
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.loadOptions) === null || _b === void 0 ? void 0 : _b.call(_a, input, callback);
+    };
+    Suggester.prototype.getOptionsAsync = function (input, callback) {
+        var _this = this;
+        var _a, _b;
+        if (this.props.debouncer == null) {
+            this.loadOptions(input, callback);
+        }
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.debouncer) === null || _b === void 0 ? void 0 : _b.call(_a, function () { return _this.loadOptions(input, callback); });
+    };
+    Suggester.prototype.getNoResultsText = function () {
+        if (this.props.hasError) {
+            return this.props.errorMessage;
+        }
+        if (this.state.insertedText === '') {
+            return this.props.emptyMessage;
+        }
+        return this.props.noResultsMessage;
+    };
+    Suggester.prototype.renderNoOptionsMessage = function (props) {
+        var _a;
+        var className = external_classnames_default()({
+            invalid: (_a = this.props) === null || _a === void 0 ? void 0 : _a.hasError,
+        });
+        return (external_react_default().createElement(external_react_select_.components.NoOptionsMessage, Suggester_assign({}, props, { className: className }), this.getNoResultsText()));
+    };
+    Suggester.prototype.handleOnInputChange = function (newValue) {
+        if (this.props.hasError) {
+            return '';
+        }
+        this.setState({ insertedText: newValue });
+        return newValue;
+    };
+    Suggester.prototype.renderLoadingMessage = function (props) {
+        return external_react_default().createElement(external_react_select_.components.LoadingMessage, Suggester_assign({}, props), this.props.children);
+    };
+    Suggester.prototype.renderOptionContainer = function (props) {
+        var _a, _b;
+        var optionProps = [props.data];
+        if (this.props.withHighlight) {
+            optionProps.push(this.state.insertedText);
+        }
+        return external_react_default().createElement(external_react_select_.components.Option, Suggester_assign({}, props), (_b = (_a = this.props).renderSuggestedOption) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spread([_a], optionProps)));
+    };
+    Suggester.prototype.renderValueContainer = function (props) {
+        return (external_react_default().createElement(InputValueContainer, Suggester_assign({ icon: this.props.icon }, props), props.children));
+    };
+    Suggester.prototype.getComponentsConfig = function () {
+        return {
+            Option: this.renderOptionContainer,
+            ValueContainer: this.renderValueContainer,
+            IndicatorsContainer: function () { return null; },
+            NoOptionsMessage: this.renderNoOptionsMessage,
+            LoadingMessage: this.renderLoadingMessage,
+            MultiValue: this.props.renderMultiValueContainer,
+        };
+    };
+    Suggester.prototype.isOptionDisabled = function (option) {
+        var _a, _b;
+        if (((_a = this.props) === null || _a === void 0 ? void 0 : _a.selectedOption) == null) {
+            return false;
+        }
+        return (option === null || option === void 0 ? void 0 : option.value) === ((_b = this.props.selectedOption) === null || _b === void 0 ? void 0 : _b.value);
+    };
+    Suggester.prototype.handleChange = function (item) {
+        var _a, _b, _c, _d, _e, _f;
+        this.setState({ insertedText: '' });
+        if (item == null) {
+            (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, []);
+            return;
+        }
+        if (!Array.isArray(item)) {
+            (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.onChange) === null || _d === void 0 ? void 0 : _d.call(_c, [item]);
+            return;
+        }
+        (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.onChange) === null || _f === void 0 ? void 0 : _f.call(_e, item);
+    };
+    Suggester.prototype.render = function () {
+        var _a, _b, _c;
+        var className = external_classnames_default()('atoka-suggester', this.props.className, {
+            'atoka-shadow': this.props.withShadow === true,
+            'with-icon': this.props.icon != null,
+        }), commonProps = {
+            value: (_a = this.props) === null || _a === void 0 ? void 0 : _a.value,
+            isClearable: false,
+            components: this.getComponentsConfig(),
+            classNamePrefix: 'suggester',
+            placeholder: this.props.placeholder,
+            isOptionDisabled: this.isOptionDisabled,
+            filterOption: this.props.filterOption,
+            onInputChange: this.handleOnInputChange,
+            inputValue: this.state.insertedText,
+            isMulti: this.props.isMulti,
+            isDisabled: this.props.isDisabled,
+            onChange: this.handleChange,
+        };
+        if (this.props.isAsync) {
+            return (external_react_default().createElement("div", { className: className },
+                external_react_default().createElement((async_default()), Suggester_assign({}, commonProps, { value: this.props.value, loadOptions: this.getOptionsAsync, defaultOptions: this.props.options }))));
+        }
+        return (external_react_default().createElement("div", { className: className },
+            external_react_default().createElement((external_react_select_default()), Suggester_assign({}, commonProps, { defaultValue: (_b = this.props) === null || _b === void 0 ? void 0 : _b.selectedOption, options: (_c = this.props.options) !== null && _c !== void 0 ? _c : [] }))));
+    };
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    Suggester.displayName = 'Suggester';
+    Suggester.CustomOption = CustomOption;
+    Suggester.defaultProps = {
+        withShadow: false,
+        withHighlight: false,
+        isAsync: false,
+        isMulti: false,
+        hasError: false,
+        renderSuggestedOption: DefaultSuggestedOption,
+        errorMessage: '',
+        emptyMessage: '',
+        noResultsMessage: '',
+        icon: faSearch_.faSearch,
+        renderMultiValueContainer: DefaultMultiValue,
+    };
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Function]),
+        __metadata("design:returntype", void 0)
+    ], Suggester.prototype, "loadOptions", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Function]),
+        __metadata("design:returntype", void 0)
+    ], Suggester.prototype, "getOptionsAsync", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", String)
+    ], Suggester.prototype, "getNoResultsText", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_a = typeof external_react_select_.OptionProps !== "undefined" && external_react_select_.OptionProps) === "function" ? _a : Object]),
+        __metadata("design:returntype", typeof (_b = typeof JSX !== "undefined" && JSX.Element) === "function" ? _b : Object)
+    ], Suggester.prototype, "renderNoOptionsMessage", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", String)
+    ], Suggester.prototype, "handleOnInputChange", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_c = typeof external_react_select_.OptionProps !== "undefined" && external_react_select_.OptionProps) === "function" ? _c : Object]),
+        __metadata("design:returntype", typeof (_d = typeof JSX !== "undefined" && JSX.Element) === "function" ? _d : Object)
+    ], Suggester.prototype, "renderLoadingMessage", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_e = typeof external_react_select_.OptionProps !== "undefined" && external_react_select_.OptionProps) === "function" ? _e : Object]),
+        __metadata("design:returntype", typeof (_f = typeof JSX !== "undefined" && JSX.Element) === "function" ? _f : Object)
+    ], Suggester.prototype, "renderOptionContainer", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_g = typeof external_react_select_.ValueContainerProps !== "undefined" && external_react_select_.ValueContainerProps) === "function" ? _g : Object]),
+        __metadata("design:returntype", typeof (_h = typeof JSX !== "undefined" && JSX.Element) === "function" ? _h : Object)
+    ], Suggester.prototype, "renderValueContainer", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_j = typeof CommonTypes.OptionData !== "undefined" && CommonTypes.OptionData) === "function" ? _j : Object]),
+        __metadata("design:returntype", Boolean)
+    ], Suggester.prototype, "isOptionDisabled", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Suggester.prototype, "handleChange", null);
+    return Suggester;
+}((external_react_default()).Component));
+
+
+;// CONCATENATED MODULE: ./src/components/Suggester/index.ts
+
+
+
+
+
+/***/ }),
+
+/***/ 6055:
+/***/ (() => {
+
+
+
+/***/ }),
+
+/***/ 6347:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Wq": () => (/* binding */ isStringEmpty),
+/* harmony export */   "OH": () => (/* binding */ isMatching),
+/* harmony export */   "ho": () => (/* binding */ splitTextInParts)
+/* harmony export */ });
+/* unused harmony exports slugify, estimateWordSize, ellipse, matchAndFormatRangeLabel, formatRange, ellipseAndFormat, escapeRegExp */
+var __values = (undefined && undefined.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (undefined && undefined.__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 __spread = (undefined && undefined.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+function isStringEmpty(s) {
+    if (s == null) {
+        return true;
+    }
+    return s.match(/^\s*$/) !== null;
+}
+function slugify(text) {
+    var a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;', b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------', p = new RegExp(a.split('').join('|'), 'g');
+    return text
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with -
+        .replace(p, function (c) { return b.charAt(a.indexOf(c)); }) // Replace special characters
+        .replace(/&/g, '-and-') // Replace & with 'and'
+        .replace(/[^\w-]+/g, '') // Remove all non-word characters
+        .replace(/--+/g, '-') // Replace multiple - with single -
+        .replace(/^-+/, '') // Trim - from start of text
+        .replace(/-+$/, ''); // Trim - from end of text
+}
+function estimateWordSize(wordLength, letterPixels, constant) {
+    return wordLength * letterPixels + constant;
+}
+function ellipse(input, length) {
+    if (input == null) {
+        return '';
+    }
+    return input.length > length ? input.substr(0, length - 1) + "\u2026" : input;
+}
+function matchAndFormatRangeLabel(formatter) {
+    return function (label) {
+        var match = /^([\d*]+)-([\d*]+)$/.exec(label);
+        if (match == null) {
+            return label;
+        }
+        return formatRange({
+            from: match[1],
+            to: match[2],
+        }, formatter !== null && formatter !== void 0 ? formatter : (function (v) { return v; }));
+    };
+}
+function formatRange(item, formatter) {
+    var _a, _b;
+    var to = item.to === '*' ? '*' : formatter(parseInt((_a = item.to) !== null && _a !== void 0 ? _a : '0', 10)), from = formatter(parseInt((_b = item.from) !== null && _b !== void 0 ? _b : '0', 10));
+    if (from === to) {
+        return "" + from;
+    }
+    return from + " - " + to;
+}
+function ellipseAndFormat(formatter, maxLabelLength) {
+    return function (value) {
+        var strValue = value.toString();
+        if (formatter == null) {
+            return ellipse(strValue, maxLabelLength);
+        }
+        return ellipse("" + formatter(strValue), maxLabelLength);
+    };
+}
+function escapeRegExp(input) {
+    // eslint-disable-next-line
+    return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+}
+function isMatching(text0, text1) {
+    var e_1, _a;
+    if (text0 == null || text1 == null) {
+        return false;
+    }
+    text0 = text0.toLowerCase();
+    text1 = text1.toLowerCase();
+    if (text1.match(' ') === null) {
+        return text0.match(escapeRegExp(text1)) !== null;
+    }
+    var splitNeedles = text1
+        .split(' ')
+        .filter(function (s) { return !isStringEmpty(s); })
+        .sort(function (a, b) { return b.length - a.length; });
+    try {
+        for (var splitNeedles_1 = __values(splitNeedles), splitNeedles_1_1 = splitNeedles_1.next(); !splitNeedles_1_1.done; splitNeedles_1_1 = splitNeedles_1.next()) {
+            var needle = splitNeedles_1_1.value;
+            if (text0 === needle) {
+                return true;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (splitNeedles_1_1 && !splitNeedles_1_1.done && (_a = splitNeedles_1.return)) _a.call(splitNeedles_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+}
+function splitTextInParts(needles, text) {
+    var e_2, _a;
+    if (text == null) {
+        return [];
+    }
+    if (needles.match(' ') === null) {
+        var re = new RegExp('(' + escapeRegExp(needles) + ')', 'gi');
+        return text.split(re);
+    }
+    var splitNeedles = needles
+        .split(' ')
+        .filter(function (s) { return !isStringEmpty(s); })
+        .sort(function (a, b) { return b.length - a.length; }), ret = [text];
+    try {
+        for (var splitNeedles_2 = __values(splitNeedles), splitNeedles_2_1 = splitNeedles_2.next(); !splitNeedles_2_1.done; splitNeedles_2_1 = splitNeedles_2.next()) {
+            var needle = splitNeedles_2_1.value;
+            var re = new RegExp('(' + needle + ')', 'gi');
+            for (var index = 0; index < ret.length; index++) {
+                var currentText = ret[index];
+                if (isMatching(currentText, escapeRegExp(needles))) {
+                    continue;
+                }
+                var newParts = currentText.split(re).filter(function (s) { return s !== ''; });
+                ret.splice.apply(ret, __spread([index, 1], newParts));
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (splitNeedles_2_1 && !splitNeedles_2_1.done && (_a = splitNeedles_2.return)) _a.call(splitNeedles_2);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return ret;
+}
+
+
+/***/ }),
+
+/***/ 6627:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MR": () => (/* binding */ boundMethod),
+/* harmony export */   "ZP": () => (/* binding */ autobind)
+/* harmony export */ });
+/* unused harmony export boundClass */
+/* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4329);
+
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && (0,_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(Symbol.iterator) === "symbol") {
+    _typeof = function _typeof(obj) {
+      return (0,_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(obj);
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : (0,_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(obj);
+    };
+  }
+
+  return _typeof(obj);
+}
+/**
+ * Return a descriptor removing the value and returning a getter
+ * The getter will return a .bind version of the function
+ * and memoize the result against a symbol on the instance
+ */
+
+
+function boundMethod(target, key, descriptor) {
+  var fn = descriptor.value;
+
+  if (typeof fn !== 'function') {
+    throw new TypeError("@boundMethod decorator can only be applied to methods not: ".concat(_typeof(fn)));
+  } // In IE11 calling Object.defineProperty has a side-effect of evaluating the
+  // getter for the property which is being replaced. This causes infinite
+  // recursion and an "Out of stack space" error.
+
+
+  var definingProperty = false;
+  return {
+    configurable: true,
+    get: function get() {
+      // eslint-disable-next-line no-prototype-builtins
+      if (definingProperty || this === target.prototype || this.hasOwnProperty(key) || typeof fn !== 'function') {
+        return fn;
+      }
+
+      var boundFn = fn.bind(this);
+      definingProperty = true;
+      Object.defineProperty(this, key, {
+        configurable: true,
+        get: function get() {
+          return boundFn;
+        },
+        set: function set(value) {
+          fn = value;
+          delete this[key];
+        }
+      });
+      definingProperty = false;
+      return boundFn;
+    },
+    set: function set(value) {
+      fn = value;
+    }
+  };
+}
+/**
+ * Use boundMethod to bind all methods on the target.prototype
+ */
+
+function boundClass(target) {
+  // (Using reflect to get all keys including symbols)
+  var keys; // Use Reflect if exists
+
+  if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {
+    keys = Reflect.ownKeys(target.prototype);
+  } else {
+    keys = Object.getOwnPropertyNames(target.prototype); // Use symbols if support is provided
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      keys = keys.concat(Object.getOwnPropertySymbols(target.prototype));
+    }
+  }
+
+  keys.forEach(function (key) {
+    // Ignore special case target method
+    if (key === 'constructor') {
+      return;
+    }
+
+    var descriptor = Object.getOwnPropertyDescriptor(target.prototype, key); // Only methods need binding
+
+    if (typeof descriptor.value === 'function') {
+      Object.defineProperty(target.prototype, key, boundMethod(target, key, descriptor));
+    }
+  });
+  return target;
+}
+function autobind() {
+  if (arguments.length === 1) {
+    return boundClass.apply(void 0, arguments);
+  }
+
+  return boundMethod.apply(void 0, arguments);
+}
+
+/***/ }),
+
+/***/ 8427:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8427__;
+
+/***/ }),
+
+/***/ 5692:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__5692__;
+
+/***/ }),
+
+/***/ 8310:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8310__;
+
+/***/ }),
+
+/***/ 8156:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8156__;
+
+/***/ }),
+
+/***/ 1738:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__1738__;
+
+/***/ }),
+
+/***/ 1553:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__1553__;
+
+/***/ }),
+
+/***/ 4329:
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (/* binding */ _typeof)
+/* harmony export */ });
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/chunk loaded */
+/******/ 	(() => {
+/******/ 		var deferred = [];
+/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 			if(chunkIds) {
+/******/ 				priority = priority || 0;
+/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 				deferred[i] = [chunkIds, fn, priority];
+/******/ 				return;
+/******/ 			}
+/******/ 			var notFulfilled = Infinity;
+/******/ 			for (var i = 0; i < deferred.length; i++) {
+/******/ 				var [chunkIds, fn, priority] = deferred[i];
+/******/ 				var fulfilled = true;
+/******/ 				for (var j = 0; j < chunkIds.length; j++) {
+/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ 						chunkIds.splice(j--, 1);
+/******/ 					} else {
+/******/ 						fulfilled = false;
+/******/ 						if(priority < notFulfilled) notFulfilled = priority;
+/******/ 					}
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferred.splice(i--, 1)
+/******/ 					var r = fn();
+/******/ 					if (r !== undefined) result = r;
+/******/ 				}
+/******/ 			}
+/******/ 			return result;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			4659: 0,
+/******/ 			4953: 0,
+/******/ 			1981: 0
+/******/ 		};
+/******/ 		
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0;
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
+/******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
+/******/ 			}
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					installedChunks[chunkId][0]();
+/******/ 				}
+/******/ 				installedChunks[chunkIds[i]] = 0;
+/******/ 			}
+/******/ 			return __webpack_require__.O(result);
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunkatoka_design_system"] = self["webpackChunkatoka_design_system"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [1981], () => (__webpack_require__(5447)))
+/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});
+//# sourceMappingURL=index.js.map