@synerise/ds-search 0.9.19 → 0.9.20

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.9.19...@synerise/ds-search@0.9.20) (2024-11-28)
+
+**Note:** Version bump only for package @synerise/ds-search
+
+
+
+
+
 ## [0.9.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.9.18...@synerise/ds-search@0.9.19) (2024-11-21)
 
 **Note:** Version bump only for package @synerise/ds-search

package/dist/Elements/SearchButton/SearchButton.js

@@ -2,13 +2,12 @@ import React from 'react';
 import Icon, { SearchM } from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
 import * as S from '../../Search.styles';
-
 var SearchButton = function SearchButton(_ref) {
   var inputOpen = _ref.inputOpen,
-      hidden = _ref.hidden,
-      onClick = _ref.onClick,
-      inputFocused = _ref.inputFocused,
-      clickable = _ref.clickable;
+    hidden = _ref.hidden,
+    onClick = _ref.onClick,
+    inputFocused = _ref.inputFocused,
+    clickable = _ref.clickable;
   return /*#__PURE__*/React.createElement(S.SearchButton, {
     isOpen: inputOpen,
     hidden: hidden,
@@ -25,5 +24,4 @@ var SearchButton = function SearchButton(_ref) {
     component: /*#__PURE__*/React.createElement(SearchM, null)
   })));
 };
-
 export default SearchButton;

package/dist/Elements/SearchHeader/SearchHeader.js

@@ -2,10 +2,9 @@ import React from 'react';
 import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
 import Icon, { InfoFillS } from '@synerise/ds-icon';
 import * as S from '../../Search.styles';
-
 var SearchHeader = function SearchHeader(_ref) {
   var headerText = _ref.headerText,
-      tooltip = _ref.tooltip;
+    tooltip = _ref.tooltip;
   return /*#__PURE__*/React.createElement(S.MenuHeader, null, headerText, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
     type: "default",
     trigger: "hover",
@@ -14,5 +13,4 @@ var SearchHeader = function SearchHeader(_ref) {
     component: /*#__PURE__*/React.createElement(InfoFillS, null)
   }))));
 };
-
 export default SearchHeader;

package/dist/Elements/SearchInput/SearchInput.js

@@ -1,15 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 import React from 'react';
 import onClickOutside from 'react-onclickoutside';
 import Input from 'antd/lib/input';
@@ -18,110 +12,86 @@ import { theme } from '@synerise/ds-core';
 import Icon, { Close3M } from '@synerise/ds-icon';
 import * as S from '../../Search.styles';
 import SearchButton from '../SearchButton/SearchButton';
-
 var SearchInput = /*#__PURE__*/function (_React$Component) {
   function SearchInput(props) {
     var _this;
-
-    _this = _React$Component.call(this, props) || this; // eslint-disable-next-line react/state-in-constructor
-
+    _this = _React$Component.call(this, props) || this;
+    // eslint-disable-next-line react/state-in-constructor
     _defineProperty(_this, "inputRef", React.createRef());
-
     _defineProperty(_this, "componentDidUpdate", function () {
       var _this$props = _this.props,
-          moveCursorToEnd = _this$props.moveCursorToEnd,
-          value = _this$props.value;
+        moveCursorToEnd = _this$props.moveCursorToEnd,
+        value = _this$props.value;
       var input = _this.inputRef;
-
       if (moveCursorToEnd && input && input.current) {
         input.current.input.selectionStart = value.length || 0;
         input.current.input.selectionEnd = value.length || 0;
       }
     });
-
     _defineProperty(_this, "focusInput", function () {
       _this.inputRef.current && _this.inputRef.current.focus();
     });
-
     _defineProperty(_this, "toggleOpen", function () {
       var onToggle = _this.props.onToggle;
       var isInputOpen = _this.state.isInputOpen;
       onToggle && onToggle(!isInputOpen);
-
       _this.setState(function (prevState) {
         return {
           isInputOpen: !prevState.isInputOpen
         };
       });
     });
-
     _defineProperty(_this, "handleSearchButtonClick", function () {
       var _this$props2 = _this.props,
-          alwaysExpanded = _this$props2.alwaysExpanded,
-          onButtonClick = _this$props2.onButtonClick;
-
+        alwaysExpanded = _this$props2.alwaysExpanded,
+        onButtonClick = _this$props2.onButtonClick;
       if (!alwaysExpanded) {
         _this.toggleOpen();
-
         _this.focusInput();
-
         onButtonClick && onButtonClick();
       }
     });
-
     _defineProperty(_this, "handleClearValue", function () {
       var onClear = _this.props.onClear;
-
       _this.setState({
         inputOffset: 0,
         isResultChosen: false
       });
-
       _this.focusInput();
-
       onClear();
     });
-
     _defineProperty(_this, "handleChangeValue", function (_ref) {
       var value = _ref.target.value;
       var onChange = _this.props.onChange;
       onChange(value);
-
       _this.setState({
         isResultChosen: false
       });
     });
-
     _defineProperty(_this, "handleSearchInputContentClick", function () {
       var onClick = _this.props.onClick;
       onClick && onClick();
-
       _this.focusInput();
     });
-
     _defineProperty(_this, "handleOffsetWithFilter", function (ref) {
       ref && _this.setState({
         inputOffset: ref.getBoundingClientRect().width
       });
     });
-
     // This handler is used for onClickOutside HOC
     _defineProperty(_this, "handleClickOutside", function () {
       var _this$props3 = _this.props,
-          closeOnClickOutside = _this$props3.closeOnClickOutside,
-          onToggle = _this$props3.onToggle,
-          value = _this$props3.value,
-          filterLabel = _this$props3.filterLabel;
-
+        closeOnClickOutside = _this$props3.closeOnClickOutside,
+        onToggle = _this$props3.onToggle,
+        value = _this$props3.value,
+        filterLabel = _this$props3.filterLabel;
       if (closeOnClickOutside && !value && !filterLabel) {
         _this.setState({
           isInputOpen: false
         });
-
         onToggle && onToggle(false);
       }
     });
-
     _this.state = {
       inputOffset: 0,
       isInputOpen: props.alwaysExpanded || !!props.value || !!props.filterLabel,
@@ -130,52 +100,43 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   _inheritsLoose(SearchInput, _React$Component);
-
   var _proto = SearchInput.prototype;
-
   _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
     var _this2 = this;
-
     var _this$props4 = this.props,
-        focusTrigger = _this$props4.focusTrigger,
-        toggleTrigger = _this$props4.toggleTrigger;
-
+      focusTrigger = _this$props4.focusTrigger,
+      toggleTrigger = _this$props4.toggleTrigger;
     if (prevProps.focusTrigger !== focusTrigger) {
       setTimeout(function () {
         _this2.focusInput();
       }, 0);
     }
-
     if (prevProps.toggleTrigger !== toggleTrigger) {
       this.toggleOpen();
     }
-
     return null;
   };
-
   _proto.render = function render() {
     var _this3 = this;
-
     var _this$props5 = this.props,
-        alwaysExpanded = _this$props5.alwaysExpanded,
-        alwaysHighlight = _this$props5.alwaysHighlight,
-        clearTooltip = _this$props5.clearTooltip,
-        filterLabel = _this$props5.filterLabel,
-        filterLookupKey = _this$props5.filterLookupKey,
-        onKeyDown = _this$props5.onKeyDown,
-        placeholder = _this$props5.placeholder,
-        textLookupKey = _this$props5.textLookupKey,
-        value = _this$props5.value,
-        disableInput = _this$props5.disableInput,
-        _this$props5$inputPro = _this$props5.inputProps,
-        inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro;
+      alwaysExpanded = _this$props5.alwaysExpanded,
+      alwaysHighlight = _this$props5.alwaysHighlight,
+      clearTooltip = _this$props5.clearTooltip,
+      filterLabel = _this$props5.filterLabel,
+      filterLookupKey = _this$props5.filterLookupKey,
+      onKeyDown = _this$props5.onKeyDown,
+      placeholder = _this$props5.placeholder,
+      textLookupKey = _this$props5.textLookupKey,
+      value = _this$props5.value,
+      disableInput = _this$props5.disableInput,
+      _this$props5$inputPro = _this$props5.inputProps,
+      inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro;
     var _this$state = this.state,
-        isInputOpen = _this$state.isInputOpen,
-        inputOffset = _this$state.inputOffset,
-        isResultChosen = _this$state.isResultChosen,
-        isInputFocused = _this$state.isInputFocused;
+      isInputOpen = _this$state.isInputOpen,
+      inputOffset = _this$state.inputOffset,
+      isResultChosen = _this$state.isResultChosen,
+      isInputFocused = _this$state.isInputFocused;
     return /*#__PURE__*/React.createElement(S.SearchInputWrapper, null, /*#__PURE__*/React.createElement(S.SearchInputContent, {
       className: isInputOpen || !!value || !!filterLabel ? 'is-open search-input-wrapper' : 'search-input-wrapper',
       offset: inputOffset,
@@ -227,8 +188,6 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
       size: 18
     })));
   };
-
   return SearchInput;
 }(React.Component);
-
 export default onClickOutside(SearchInput);

package/dist/Elements/SearchItems/SearchItems.js

@@ -1,37 +1,29 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 import React, { useMemo, useRef, useEffect, cloneElement } from 'react';
 import Menu from '@synerise/ds-menu';
 import { FixedSizeList as List } from 'react-window';
 var listStyle = {
   overflowX: 'unset',
   overflowY: 'unset'
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+};
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function renderSearchList(props, children) {
   return /*#__PURE__*/React.createElement(SearchItems, props, children);
 }
-
 var rowRenderer = function rowRenderer(_ref) {
   var index = _ref.index,
-      style = _ref.style,
-      data = _ref.data;
+    style = _ref.style,
+    data = _ref.data;
   var item = data && data.items[index];
   var itemReturnedFromRenderer = data.itemRender(item);
   var rendererCustomStyles = itemReturnedFromRenderer && itemReturnedFromRenderer.props && itemReturnedFromRenderer.props.style || {};
-
   var mergedStyles = _objectSpread({}, rendererCustomStyles, {}, style);
-
   return cloneElement(itemReturnedFromRenderer, _objectSpread({}, itemReturnedFromRenderer.props, {
     style: mergedStyles,
     highlight: data.highlight,
@@ -41,35 +33,30 @@ var rowRenderer = function rowRenderer(_ref) {
     className: 'ds-search-item'
   }));
 };
-
 var SearchItems = function SearchItems(_ref2) {
   var data = _ref2.data,
-      height = _ref2.height,
-      highlight = _ref2.highlight,
-      itemRender = _ref2.itemRender,
-      listProps = _ref2.listProps,
-      onItemClick = _ref2.onItemClick,
-      rowHeight = _ref2.rowHeight,
-      visibleRows = _ref2.visibleRows,
-      width = _ref2.width,
-      _ref2$renderInMenu = _ref2.renderInMenu,
-      renderInMenu = _ref2$renderInMenu === void 0 ? true : _ref2$renderInMenu;
+    height = _ref2.height,
+    highlight = _ref2.highlight,
+    itemRender = _ref2.itemRender,
+    listProps = _ref2.listProps,
+    onItemClick = _ref2.onItemClick,
+    rowHeight = _ref2.rowHeight,
+    visibleRows = _ref2.visibleRows,
+    width = _ref2.width,
+    _ref2$renderInMenu = _ref2.renderInMenu,
+    renderInMenu = _ref2$renderInMenu === void 0 ? true : _ref2$renderInMenu;
   var listRef = useRef(null);
   var listHeight = useMemo(function () {
     if (data) {
       var dataHeight = data.length * rowHeight;
-
       if (visibleRows) {
         return visibleRows < data.length ? visibleRows * rowHeight : dataHeight;
       }
-
       if (height) {
         return dataHeight > height ? height : dataHeight;
       }
-
       return dataHeight;
     }
-
     return 0;
   }, [data, height, rowHeight, visibleRows]);
   useEffect(function () {
@@ -93,5 +80,4 @@ var SearchItems = function SearchItems(_ref2) {
   }, listProps), rowRenderer);
   return renderInMenu ? /*#__PURE__*/React.createElement(Menu, null, list) : /*#__PURE__*/React.createElement(React.Fragment, null, list);
 };
-
 export default SearchItems;

package/dist/Search.js

@@ -1,17 +1,10 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 import React from 'react';
 import onClickOutside from 'react-onclickoutside';
 import Scrollbar from '@synerise/ds-scrollbar';
@@ -24,52 +17,44 @@ var MENU_WIDTH_OFFSET = 17;
 export var INPUT_EXPAND_ANIMATION_DURATION = 100;
 var SCROLLBAR_HEIGHT_OFFSET = 28;
 var LIST_HEADER_HEIGHT = 42;
-
 var getParametersScrollTop = function getParametersScrollTop(_ref) {
   var scrollTop = _ref.scrollTop,
-      rowHeight = _ref.rowHeight,
-      recent = _ref.recent;
+    rowHeight = _ref.rowHeight,
+    recent = _ref.recent;
   return scrollTop - LIST_HEADER_HEIGHT - (hasSomeElement(recent) ? recent.length * rowHeight : 0);
 };
-
 var Search = /*#__PURE__*/function (_React$PureComponent) {
   function Search(props) {
     var _this;
-
-    _this = _React$PureComponent.call(this, props) || this; // eslint-disable-next-line react/state-in-constructor
-
+    _this = _React$PureComponent.call(this, props) || this;
+    // eslint-disable-next-line react/state-in-constructor
     _defineProperty(_this, "wrapperRef", React.createRef());
-
     // This handler is used for onClickOutside HOC
     _defineProperty(_this, "handleClickOutside", function () {
       var _this$state = _this.state,
-          isInputOpen = _this$state.isInputOpen,
-          label = _this$state.label,
-          toggleInputTrigger = _this$state.toggleInputTrigger;
+        isInputOpen = _this$state.isInputOpen,
+        label = _this$state.label,
+        toggleInputTrigger = _this$state.toggleInputTrigger;
       var _this$props = _this.props,
-          value = _this$props.value,
-          alwaysExpanded = _this$props.alwaysExpanded;
-
+        value = _this$props.value,
+        alwaysExpanded = _this$props.alwaysExpanded;
       if (isInputOpen && !value && !label && !alwaysExpanded) {
         _this.setState({
           toggleInputTrigger: !toggleInputTrigger
         });
       }
-
       _this.setState({
         isListVisible: false,
         scrollbarScrollTop: 0
       });
     });
-
     _defineProperty(_this, "handleClearValue", function () {
       var _this$props2 = _this.props,
-          parameters = _this$props2.parameters,
-          recent = _this$props2.recent,
-          suggestions = _this$props2.suggestions,
-          onClear = _this$props2.onClear;
+        parameters = _this$props2.parameters,
+        recent = _this$props2.recent,
+        suggestions = _this$props2.suggestions,
+        onClear = _this$props2.onClear;
       onClear && onClear();
-
       _this.setState({
         label: null,
         filteredRecent: recent,
@@ -78,7 +63,6 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         isResultChosen: false
       });
     });
-
     _this.state = {
       isInputOpen: !!props.value || !!props.parameterValue || !!props.alwaysExpanded,
       label: props.parameterValue ? props.parameters.find(function (param) {
@@ -97,52 +81,43 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
     };
     return _this;
   }
-
   _inheritsLoose(Search, _React$PureComponent);
-
   var _proto = Search.prototype;
-
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _prevProps$suggestion;
-
     var _this$props3 = this.props,
-        recent = _this$props3.recent,
-        suggestions = _this$props3.suggestions,
-        parameters = _this$props3.parameters,
-        value = _this$props3.value,
-        textLookupConfig = _this$props3.textLookupConfig,
-        hideLabel = _this$props3.hideLabel,
-        parameterValue = _this$props3.parameterValue;
-
+      recent = _this$props3.recent,
+      suggestions = _this$props3.suggestions,
+      parameters = _this$props3.parameters,
+      value = _this$props3.value,
+      textLookupConfig = _this$props3.textLookupConfig,
+      hideLabel = _this$props3.hideLabel,
+      parameterValue = _this$props3.parameterValue;
     if (prevProps.value !== value && !value || prevProps.parameterValue && !parameterValue) {
-      this.handleChange(value); // eslint-disable-next-line react/no-did-update-set-state
-
+      this.handleChange(value);
+      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         isResultChosen: false
       });
     }
-
     if (prevProps.recent.length !== recent.length) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         filteredRecent: getAllElementsFiltered(recent, value, textLookupConfig.recent)
       });
     }
-
     if (prevProps.parameters.length !== parameters.length) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         filteredParameters: parameterValue ? parameters : getAllElementsFiltered(parameters, value, textLookupConfig.parameters)
       });
     }
-
     if (suggestions && ((_prevProps$suggestion = prevProps.suggestions) == null ? void 0 : _prevProps$suggestion.length) !== suggestions.length) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         filteredSuggestions: getAllElementsFiltered(suggestions, value, textLookupConfig.suggestions)
       });
     }
-
     if (hideLabel && prevProps.hideLabel !== hideLabel) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
@@ -151,14 +126,12 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   };
-
   _proto.onKeyDown = function onKeyDown(e) {
     var _this$props4 = this.props,
-        value = _this$props4.value,
-        onParameterValueChange = _this$props4.onParameterValueChange,
-        recent = _this$props4.recent;
+      value = _this$props4.value,
+      onParameterValueChange = _this$props4.onParameterValueChange,
+      recent = _this$props4.recent;
     var isInputOpen = this.state.isInputOpen;
-
     if (e.key === 'Backspace' && value === '' && isInputOpen) {
       this.setState({
         label: null,
@@ -167,43 +140,35 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       onParameterValueChange('', null);
       return;
     }
-
     if (e.key === 'Enter' && isInputOpen) {
       this.setState({
         isResultChosen: !!value
       });
     }
-
     this.setState({
       moveCursorToEnd: false
     });
   };
-
   _proto.getSearchWrapperWidth = function getSearchWrapperWidth() {
     var width = this.props.width;
-
     if (width) {
       return width - MENU_WIDTH_OFFSET;
     }
-
     if (this.wrapperRef !== null && this.wrapperRef.current && this.wrapperRef.current.clientWidth > MENU_WIDTH_OFFSET) {
       return this.wrapperRef.current.clientWidth - MENU_WIDTH_OFFSET;
     }
-
     return 0;
   };
-
   _proto.handleChange = function handleChange(currentValue) {
     var _this$props5 = this.props,
-        parameterValue = _this$props5.parameterValue,
-        recent = _this$props5.recent,
-        suggestions = _this$props5.suggestions,
-        parameters = _this$props5.parameters,
-        onValueChange = _this$props5.onValueChange,
-        textLookupConfig = _this$props5.textLookupConfig;
+      parameterValue = _this$props5.parameterValue,
+      recent = _this$props5.recent,
+      suggestions = _this$props5.suggestions,
+      parameters = _this$props5.parameters,
+      onValueChange = _this$props5.onValueChange,
+      textLookupConfig = _this$props5.textLookupConfig;
     var isAnythingToShow;
     onValueChange(currentValue);
-
     if (parameterValue) {
       var matchingSuggestions = getAllElementsFiltered(suggestions, currentValue, textLookupConfig.suggestions);
       this.setState({
@@ -219,23 +184,20 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       });
       isAnythingToShow = matchingRecent.length > 0 || matchingParameters.length > 0;
     }
-
     this.setState({
       isResultChosen: false,
       isListVisible: isAnythingToShow
     });
   };
-
   _proto.isListItemRendered = function isListItemRendered() {
     var _this$props6 = this.props,
-        suggestions = _this$props6.suggestions,
-        recent = _this$props6.recent,
-        parameters = _this$props6.parameters,
-        value = _this$props6.value,
-        parameterValue = _this$props6.parameterValue,
-        textLookupConfig = _this$props6.textLookupConfig;
+      suggestions = _this$props6.suggestions,
+      recent = _this$props6.recent,
+      parameters = _this$props6.parameters,
+      value = _this$props6.value,
+      parameterValue = _this$props6.parameterValue,
+      textLookupConfig = _this$props6.textLookupConfig;
     var isAnythingToShow;
-
     if (parameterValue) {
       isAnythingToShow = hasSomeElementFiltered(suggestions, value, textLookupConfig.suggestions);
     } else {
@@ -243,27 +205,24 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       var anyFilter = hasSomeElementFiltered(parameters, value, textLookupConfig.parameters);
       isAnythingToShow = anyFilter || anyRecentItem;
     }
-
     return isAnythingToShow;
   };
-
   _proto.selectResult = function selectResult(item, dataKey) {
     var _this$props7 = this.props,
-        onValueChange = _this$props7.onValueChange,
-        textLookupConfig = _this$props7.textLookupConfig;
+      onValueChange = _this$props7.onValueChange,
+      textLookupConfig = _this$props7.textLookupConfig;
     this.setState({
       isResultChosen: true,
       moveCursorToEnd: true
     });
     onValueChange(item[textLookupConfig[dataKey]]);
   };
-
   _proto.selectFilter = function selectFilter(item) {
     var _this$props8 = this.props,
-        onValueChange = _this$props8.onValueChange,
-        onParameterValueChange = _this$props8.onParameterValueChange,
-        filterLookupKey = _this$props8.filterLookupKey,
-        textLookupConfig = _this$props8.textLookupConfig;
+      onValueChange = _this$props8.onValueChange,
+      onParameterValueChange = _this$props8.onParameterValueChange,
+      filterLookupKey = _this$props8.filterLookupKey,
+      textLookupConfig = _this$props8.textLookupConfig;
     var focusInputTrigger = this.state.focusInputTrigger;
     onValueChange('');
     this.setState({
@@ -271,10 +230,10 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       focusInputTrigger: !focusInputTrigger,
       moveCursorToEnd: true
     });
-
     if (filterLookupKey && item[filterLookupKey]) {
-      onValueChange(item[textLookupConfig.parameters]); // @ts-ignore
+      onValueChange(item[textLookupConfig.parameters]);
 
+      // @ts-ignore
       onParameterValueChange(item[filterLookupKey], item);
       this.setState({
         isResultChosen: true
@@ -284,22 +243,20 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       onParameterValueChange(item[textLookupConfig.parameters], item);
     }
   };
-
   _proto.renderRecentItems = function renderRecentItems() {
     var _this2 = this;
-
     var _this$props9 = this.props,
-        recent = _this$props9.recent,
-        recentDisplayProps = _this$props9.recentDisplayProps,
-        value = _this$props9.value;
+      recent = _this$props9.recent,
+      recentDisplayProps = _this$props9.recentDisplayProps,
+      value = _this$props9.value;
     var _this$state2 = this.state,
-        label = _this$state2.label,
-        filteredRecent = _this$state2.filteredRecent,
-        itemsListWidth = _this$state2.itemsListWidth;
+      label = _this$state2.label,
+      filteredRecent = _this$state2.filteredRecent,
+      itemsListWidth = _this$state2.itemsListWidth;
     var title = recentDisplayProps.title,
-        tooltip = recentDisplayProps.tooltip,
-        rowHeight = recentDisplayProps.rowHeight,
-        itemRender = recentDisplayProps.itemRender;
+      tooltip = recentDisplayProps.tooltip,
+      rowHeight = recentDisplayProps.rowHeight,
+      itemRender = recentDisplayProps.itemRender;
     return recent && !label && hasSomeElement(filteredRecent) && /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
       headerText: title,
       tooltip: tooltip
@@ -314,27 +271,25 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       width: itemsListWidth
     }));
   };
-
   _proto.renderParameters = function renderParameters() {
     var _this3 = this;
-
     var _this$props10 = this.props,
-        parameters = _this$props10.parameters,
-        parametersDisplayProps = _this$props10.parametersDisplayProps,
-        value = _this$props10.value,
-        dropdownMaxHeight = _this$props10.dropdownMaxHeight,
-        recentDisplayProps = _this$props10.recentDisplayProps;
+      parameters = _this$props10.parameters,
+      parametersDisplayProps = _this$props10.parametersDisplayProps,
+      value = _this$props10.value,
+      dropdownMaxHeight = _this$props10.dropdownMaxHeight,
+      recentDisplayProps = _this$props10.recentDisplayProps;
     var _this$state3 = this.state,
-        label = _this$state3.label,
-        filteredParameters = _this$state3.filteredParameters,
-        itemsListWidth = _this$state3.itemsListWidth,
-        scrollbarScrollTop = _this$state3.scrollbarScrollTop,
-        filteredRecent = _this$state3.filteredRecent;
+      label = _this$state3.label,
+      filteredParameters = _this$state3.filteredParameters,
+      itemsListWidth = _this$state3.itemsListWidth,
+      scrollbarScrollTop = _this$state3.scrollbarScrollTop,
+      filteredRecent = _this$state3.filteredRecent;
     var title = parametersDisplayProps.title,
-        tooltip = parametersDisplayProps.tooltip,
-        rowHeight = parametersDisplayProps.rowHeight,
-        itemRender = parametersDisplayProps.itemRender,
-        listProps = parametersDisplayProps.listProps;
+      tooltip = parametersDisplayProps.tooltip,
+      rowHeight = parametersDisplayProps.rowHeight,
+      itemRender = parametersDisplayProps.itemRender,
+      listProps = parametersDisplayProps.listProps;
     return parameters && !label && hasSomeElement(filteredParameters) && /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
       headerText: title,
       tooltip: tooltip
@@ -357,21 +312,19 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       }, listProps || {})
     }));
   };
-
   _proto.renderSuggestions = function renderSuggestions() {
     var _this4 = this;
-
     var _this$props11 = this.props,
-        suggestions = _this$props11.suggestions,
-        parameterValue = _this$props11.parameterValue,
-        suggestionsDisplayProps = _this$props11.suggestionsDisplayProps,
-        value = _this$props11.value,
-        dropdownMaxHeight = _this$props11.dropdownMaxHeight;
+      suggestions = _this$props11.suggestions,
+      parameterValue = _this$props11.parameterValue,
+      suggestionsDisplayProps = _this$props11.suggestionsDisplayProps,
+      value = _this$props11.value,
+      dropdownMaxHeight = _this$props11.dropdownMaxHeight;
     var _this$state4 = this.state,
-        isResultChosen = _this$state4.isResultChosen,
-        itemsListWidth = _this$state4.itemsListWidth,
-        filteredSuggestions = _this$state4.filteredSuggestions,
-        scrollbarScrollTop = _this$state4.scrollbarScrollTop;
+      isResultChosen = _this$state4.isResultChosen,
+      itemsListWidth = _this$state4.itemsListWidth,
+      filteredSuggestions = _this$state4.filteredSuggestions,
+      scrollbarScrollTop = _this$state4.scrollbarScrollTop;
     return suggestions && suggestionsDisplayProps && parameterValue && !isResultChosen && filteredSuggestions && hasSomeElement(filteredSuggestions) && /*#__PURE__*/React.createElement(React.Fragment, null, !!suggestionsDisplayProps.title && /*#__PURE__*/React.createElement(SearchHeader, {
       headerText: suggestionsDisplayProps.title,
       tooltip: suggestionsDisplayProps.tooltip
@@ -390,25 +343,23 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       }, suggestionsDisplayProps.listProps || {})
     }));
   };
-
   _proto.renderInputWrapper = function renderInputWrapper() {
     var _this5 = this;
-
     var _this$props12 = this.props,
-        placeholder = _this$props12.placeholder,
-        clearTooltip = _this$props12.clearTooltip,
-        value = _this$props12.value,
-        textLookupConfig = _this$props12.textLookupConfig,
-        filterLookupKey = _this$props12.filterLookupKey,
-        disableInput = _this$props12.disableInput,
-        inputProps = _this$props12.inputProps,
-        alwaysExpanded = _this$props12.alwaysExpanded;
+      placeholder = _this$props12.placeholder,
+      clearTooltip = _this$props12.clearTooltip,
+      value = _this$props12.value,
+      textLookupConfig = _this$props12.textLookupConfig,
+      filterLookupKey = _this$props12.filterLookupKey,
+      disableInput = _this$props12.disableInput,
+      inputProps = _this$props12.inputProps,
+      alwaysExpanded = _this$props12.alwaysExpanded;
     var _this$state5 = this.state,
-        label = _this$state5.label,
-        isListVisible = _this$state5.isListVisible,
-        focusInputTrigger = _this$state5.focusInputTrigger,
-        toggleInputTrigger = _this$state5.toggleInputTrigger,
-        moveCursorToEnd = _this$state5.moveCursorToEnd;
+      label = _this$state5.label,
+      isListVisible = _this$state5.isListVisible,
+      focusInputTrigger = _this$state5.focusInputTrigger,
+      toggleInputTrigger = _this$state5.toggleInputTrigger,
+      moveCursorToEnd = _this$state5.moveCursorToEnd;
     return /*#__PURE__*/React.createElement(SearchInput, {
       alwaysHighlight: true,
       clearTooltip: clearTooltip,
@@ -439,7 +390,6 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
           isListVisible: toggle,
           isInputOpen: toggle
         });
-
         setTimeout(function () {
           _this5.setState({
             itemsListWidth: _this5.getSearchWrapperWidth()
@@ -456,23 +406,21 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       closeOnClickOutside: !alwaysExpanded && !isListVisible
     });
   };
-
   _proto.render = function render() {
     var _this6 = this;
-
     var _this$props13 = this.props,
-        divider = _this$props13.divider,
-        dropdownMaxHeight = _this$props13.dropdownMaxHeight,
-        width = _this$props13.width,
-        style = _this$props13.style;
+      divider = _this$props13.divider,
+      dropdownMaxHeight = _this$props13.dropdownMaxHeight,
+      width = _this$props13.width,
+      style = _this$props13.style;
     var _this$state6 = this.state,
-        isInputOpen = _this$state6.isInputOpen,
-        label = _this$state6.label,
-        isListVisible = _this$state6.isListVisible,
-        focusInputTrigger = _this$state6.focusInputTrigger,
-        isResultChosen = _this$state6.isResultChosen,
-        filteredParameters = _this$state6.filteredParameters,
-        filteredRecent = _this$state6.filteredRecent;
+      isInputOpen = _this$state6.isInputOpen,
+      label = _this$state6.label,
+      isListVisible = _this$state6.isListVisible,
+      focusInputTrigger = _this$state6.focusInputTrigger,
+      isResultChosen = _this$state6.isResultChosen,
+      filteredParameters = _this$state6.filteredParameters,
+      filteredRecent = _this$state6.filteredRecent;
     return /*#__PURE__*/React.createElement(S.SearchWrapper, {
       ref: this.wrapperRef,
       className: "SearchWrapper",
@@ -500,15 +448,12 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       maxHeight: dropdownMaxHeight - SCROLLBAR_HEIGHT_OFFSET,
       onScroll: function onScroll(_ref2) {
         var currentTarget = _ref2.currentTarget;
-
         _this6.setState({
           scrollbarScrollTop: currentTarget.scrollTop
         });
       }
     }, this.renderRecentItems(), !!(filteredParameters != null && filteredParameters.length) && !!(filteredRecent != null && filteredRecent.length) && !label && divider, this.renderParameters(), this.renderSuggestions()))));
   };
-
   return Search;
 }(React.PureComponent);
-
 export default onClickOutside(Search);

package/dist/Search.types.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export var SelectResultDataKeys;
 
+export var SelectResultDataKeys;
 (function (SelectResultDataKeys) {
   SelectResultDataKeys["RECENT"] = "recent";
   SelectResultDataKeys["SUGGESTIONS"] = "suggestions";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "0.9.19",
+  "version": "0.9.20",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,11 +34,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.19",
-    "@synerise/ds-icon": "^0.67.0",
-    "@synerise/ds-menu": "^0.20.6",
-    "@synerise/ds-scrollbar": "^0.11.19",
-    "@synerise/ds-tooltip": "^0.14.49",
+    "@synerise/ds-button": "^0.21.20",
+    "@synerise/ds-icon": "^0.67.1",
+    "@synerise/ds-menu": "^0.20.7",
+    "@synerise/ds-scrollbar": "^0.11.20",
+    "@synerise/ds-tooltip": "^0.14.50",
     "@synerise/ds-utils": "^0.31.2",
     "react-onclickoutside": "^6.9.0",
     "react-window": "^1.8.5"
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc"
 }