@synerise/ds-search 1.3.10 → 1.3.11

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.3.10...@synerise/ds-search@1.3.11) (2025-11-28)
+
+
+### Bug Fixes
+
+* **search:** fix types ([44042fa](https://github.com/Synerise/synerise-design/commit/44042fa0e22f04800969f5a25ea6335b4552f4ab))
+* **search:** refactor search component from class to function ([16e3c0c](https://github.com/Synerise/synerise-design/commit/16e3c0c2b04082e811cdd625f564321faf8811ed))
+
+
+
+
+
 ## [1.3.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.3.9...@synerise/ds-search@1.3.10) (2025-11-06)
 
 **Note:** Version bump only for package @synerise/ds-search

package/dist/Elements/SearchRenderer/SearchRenderer.d.ts

@@ -0,0 +1,3 @@
+import { type SearchRendererProps } from './SearchRenderer.types';
+declare const SearchRenderer: ({ title, tooltip, data, width, height, rowHeight, listProps, itemRender, highlight, onItemClick, }: SearchRendererProps) => JSX.Element | null;
+export default SearchRenderer;

package/dist/Elements/SearchRenderer/SearchRenderer.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import SearchHeader from '../SearchHeader/SearchHeader';
+import SearchItems from '../SearchItems/SearchItems';
+var SearchRenderer = function SearchRenderer(_ref) {
+  var title = _ref.title,
+    tooltip = _ref.tooltip,
+    data = _ref.data,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$rowHeight = _ref.rowHeight,
+    rowHeight = _ref$rowHeight === void 0 ? 30 : _ref$rowHeight,
+    listProps = _ref.listProps,
+    _ref$itemRender = _ref.itemRender,
+    itemRender = _ref$itemRender === void 0 ? function (item) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, item);
+    } : _ref$itemRender,
+    highlight = _ref.highlight,
+    onItemClick = _ref.onItemClick;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
+    headerText: title,
+    tooltip: tooltip
+  }), /*#__PURE__*/React.createElement(SearchItems, {
+    data: data,
+    height: height,
+    highlight: highlight,
+    width: width,
+    rowHeight: rowHeight,
+    itemRender: itemRender,
+    onItemClick: onItemClick,
+    listProps: listProps,
+    renderInMenu: false
+  }));
+};
+export default SearchRenderer;

package/dist/Elements/SearchRenderer/SearchRenderer.types.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from 'react';
+import { type AnyObject } from '../../Search.types';
+export type SearchRendererProps = {
+    title?: string;
+    tooltip?: string;
+    data: AnyObject[] | undefined;
+    width: number;
+    height?: number;
+    rowHeight?: number;
+    listProps?: Record<string, unknown>;
+    itemRender?: (item: AnyObject) => ReactElement;
+    onItemClick: (item: AnyObject) => void;
+    highlight: string;
+};

package/dist/Elements/SearchRenderer/SearchRenderer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Elements/utils/searchUtils.d.ts

@@ -1,3 +1,9 @@
-export declare const getAllElementsFiltered: <T extends object>(data: T[] | undefined | null, value: string, elementTextLookupKey: keyof T) => object[];
-export declare const hasSomeElementFiltered: <T extends object>(data: T[] | undefined | null, currentValue: string, elementTextLookupKey: keyof T) => boolean;
+import { type AnyObject } from '../../Search.types';
+export declare const getAllElementsFiltered: <T extends AnyObject>(data: T[] | undefined | null, value: string, elementTextLookupKey: keyof T) => T[];
+export declare const hasSomeElementFiltered: <T extends AnyObject>(data: T[] | undefined | null, currentValue: string, elementTextLookupKey: keyof T) => boolean;
 export declare const hasSomeElement: (data: Record<string, unknown>[] | undefined) => boolean;
+export declare const getParametersScrollTop: ({ scrollTop, rowHeight, recent, }: {
+    scrollTop: number;
+    rowHeight: number;
+    recent: AnyObject[];
+}) => number;

package/dist/Elements/utils/searchUtils.js

@@ -1,3 +1,4 @@
+import { LIST_HEADER_HEIGHT } from '../../const';
 export var getAllElementsFiltered = function getAllElementsFiltered(data, value, elementTextLookupKey) {
   return data && data.filter(function (el) {
     return String(el[elementTextLookupKey]).toLowerCase().includes(value.toLocaleLowerCase());
@@ -10,4 +11,10 @@ export var hasSomeElementFiltered = function hasSomeElementFiltered(data, curren
 };
 export var hasSomeElement = function hasSomeElement(data) {
   return !!data && data.length > 0;
+};
+export var getParametersScrollTop = function getParametersScrollTop(_ref) {
+  var scrollTop = _ref.scrollTop,
+    rowHeight = _ref.rowHeight,
+    recent = _ref.recent;
+  return scrollTop - LIST_HEADER_HEIGHT - (hasSomeElement(recent) ? recent.length * rowHeight : 0);
 };

package/dist/Search.d.ts

@@ -1,23 +1,5 @@
 import React from 'react';
-import { type AnyObject, type SearchProps, type SearchState, SelectResultDataKeys } from './Search.types';
+import { type AnyObject, type SearchProps } from './Search.types';
 import './style/index.less';
-declare class Search extends React.PureComponent<SearchProps<AnyObject, AnyObject>, SearchState<AnyObject>> {
-    private wrapperRef;
-    constructor(props: SearchProps<AnyObject, AnyObject>);
-    componentDidUpdate(prevProps: SearchProps<AnyObject, AnyObject>): void;
-    onKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void;
-    getSearchWrapperWidth(): number;
-    handleClickOutside: () => void;
-    handleClearValue: () => void;
-    handleChange(currentValue: string): void;
-    isListItemRendered(): boolean;
-    selectResult(item: object, dataKey: SelectResultDataKeys): void;
-    selectFilter(item: object): void;
-    renderRecentItems(): React.ReactNode | false;
-    renderParameters(): React.ReactNode | false;
-    renderSuggestions(): React.ReactNode | false;
-    renderInputWrapper(): React.ReactNode;
-    render(): React.ReactElement;
-}
-declare const _default: import("react-onclickoutside").WrapperClass<SearchProps<AnyObject, AnyObject>, typeof Search>;
-export default _default;
+export declare function Search<T extends AnyObject, U extends AnyObject, S extends AnyObject>({ divider, dropdownMaxHeight, width, searchWidth, style, dropdownWidth, recent, suggestions, parameters, value, textLookupConfig, hideLabel, parameterValue, onParameterValueChange, alwaysExpanded, onClear, onValueChange, filterLookupKey, recentDisplayProps, parametersDisplayProps, suggestionsDisplayProps, placeholder, clearTooltip, disableInput, inputProps, searchTooltipProps, }: SearchProps<T, U, S>): React.JSX.Element;
+export default Search;

package/dist/Search.js

@@ -1,396 +1,269 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React from 'react';
-import onClickOutside from 'react-onclickoutside';
+import React, { useEffect, useRef, useState } from 'react';
 import Scrollbar from '@synerise/ds-scrollbar';
-import { focusWithArrowKeys } from '@synerise/ds-utils';
-import { SearchHeader, SearchInput, SearchItems } from './Elements';
-import { getAllElementsFiltered, hasSomeElement, hasSomeElementFiltered } from './Elements/utils/searchUtils';
+import { focusWithArrowKeys, useOnClickOutside } from '@synerise/ds-utils';
+import { SearchInput } from './Elements';
+import SearchRenderer from './Elements/SearchRenderer/SearchRenderer';
+import { getAllElementsFiltered, getParametersScrollTop, hasSomeElement, hasSomeElementFiltered } from './Elements/utils/searchUtils';
 import * as S from './Search.styles';
 import { SelectResultDataKeys } from './Search.types';
-import { INPUT_EXPAND_ANIMATION_DURATION, LIST_HEADER_HEIGHT, MENU_WIDTH_OFFSET, SCROLLBAR_HEIGHT_OFFSET } from './const';
+import { INPUT_EXPAND_ANIMATION_DURATION, MENU_WIDTH_OFFSET, SCROLLBAR_HEIGHT_OFFSET } from './const';
 import "./style/index.css";
-var getParametersScrollTop = function getParametersScrollTop(_ref) {
-  var scrollTop = _ref.scrollTop,
-    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;
-    _this.wrapperRef = /*#__PURE__*/React.createRef();
-    // This handler is used for onClickOutside HOC
-    _this.handleClickOutside = function () {
-      var _this$state = _this.state,
-        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;
-      if (isInputOpen && !value && !label && !alwaysExpanded) {
-        _this.setState({
-          toggleInputTrigger: !toggleInputTrigger
+export function Search(_ref) {
+  var divider = _ref.divider,
+    dropdownMaxHeight = _ref.dropdownMaxHeight,
+    width = _ref.width,
+    searchWidth = _ref.searchWidth,
+    style = _ref.style,
+    dropdownWidth = _ref.dropdownWidth,
+    recent = _ref.recent,
+    _ref$suggestions = _ref.suggestions,
+    suggestions = _ref$suggestions === void 0 ? null : _ref$suggestions,
+    parameters = _ref.parameters,
+    value = _ref.value,
+    textLookupConfig = _ref.textLookupConfig,
+    hideLabel = _ref.hideLabel,
+    parameterValue = _ref.parameterValue,
+    onParameterValueChange = _ref.onParameterValueChange,
+    alwaysExpanded = _ref.alwaysExpanded,
+    onClear = _ref.onClear,
+    onValueChange = _ref.onValueChange,
+    filterLookupKey = _ref.filterLookupKey,
+    recentDisplayProps = _ref.recentDisplayProps,
+    parametersDisplayProps = _ref.parametersDisplayProps,
+    suggestionsDisplayProps = _ref.suggestionsDisplayProps,
+    placeholder = _ref.placeholder,
+    clearTooltip = _ref.clearTooltip,
+    disableInput = _ref.disableInput,
+    inputProps = _ref.inputProps,
+    searchTooltipProps = _ref.searchTooltipProps;
+  var wrapperRef = useRef(null);
+  var _useState = useState(function () {
+      if (parameterValue) {
+        var _ref2;
+        var found = parameters.find(function (param) {
+          return param[textLookupConfig.parameters] === parameterValue;
         });
+        return (_ref2 = found) != null ? _ref2 : null;
       }
-      _this.setState({
-        isListVisible: false,
-        scrollbarScrollTop: 0
-      });
-    };
-    _this.handleClearValue = function () {
-      var _this$props2 = _this.props,
-        parameters = _this$props2.parameters,
-        recent = _this$props2.recent,
-        suggestions = _this$props2.suggestions,
-        onClear = _this$props2.onClear;
-      onClear && onClear();
-      _this.setState({
-        label: null,
-        filteredRecent: recent,
-        filteredParameters: parameters,
-        filteredSuggestions: suggestions,
-        isResultChosen: false
-      });
-    };
-    var searchWidth = props.width || props.searchWidth;
-    // eslint-disable-next-line react/state-in-constructor
-    _this.state = {
-      isInputOpen: !!props.value || !!props.parameterValue || !!props.alwaysExpanded,
-      label: props.parameterValue ? props.parameters.find(function (param) {
-        return param[props.textLookupConfig.parameters] === props.parameterValue;
-      }) : null,
-      filteredParameters: props.parameters,
-      filteredRecent: props.recent,
-      filteredSuggestions: props.suggestions,
-      isListVisible: false,
-      isResultChosen: false,
-      itemsListWidth: searchWidth ? searchWidth - MENU_WIDTH_OFFSET : 0,
-      toggleInputTrigger: false,
-      focusInputTrigger: false,
-      scrollbarScrollTop: 0,
-      moveCursorToEnd: true
-    };
-    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;
-    if (prevProps.value !== value && !value || prevProps.parameterValue && !parameterValue) {
-      this.handleChange(value);
-      this.setState({
-        isResultChosen: false
+      return null;
+    }),
+    label = _useState[0],
+    setLabel = _useState[1];
+  var _useState2 = useState(parameters),
+    filteredParameters = _useState2[0],
+    setFilteredParameters = _useState2[1];
+  var _useState3 = useState(recent),
+    filteredRecent = _useState3[0],
+    setFilteredRecent = _useState3[1];
+  var _useState4 = useState(suggestions != null ? suggestions : null),
+    filteredSuggestions = _useState4[0],
+    setFilteredSuggestions = _useState4[1];
+  var _useState5 = useState(false),
+    isListVisible = _useState5[0],
+    setIsListVisible = _useState5[1];
+  var _useState6 = useState(false),
+    isResultChosen = _useState6[0],
+    setIsResultChosen = _useState6[1];
+  var _useState7 = useState(false),
+    toggleInputTrigger = _useState7[0],
+    setToggleInputTrigger = _useState7[1];
+  var _useState8 = useState(false),
+    focusInputTrigger = _useState8[0],
+    setFocusInputTrigger = _useState8[1];
+  var _useState9 = useState(0),
+    scrollbarScrollTop = _useState9[0],
+    setScrollbarScrollTop = _useState9[1];
+  var _useState10 = useState(true),
+    moveCursorToEnd = _useState10[0],
+    setMoveCursorToEnd = _useState10[1];
+  var _useState11 = useState(width || searchWidth ? (width || searchWidth) - MENU_WIDTH_OFFSET : 0),
+    itemsListWidth = _useState11[0],
+    setItemsListWidth = _useState11[1];
+  useEffect(function () {
+    if (parameterValue) {
+      var _ref3;
+      var found = parameters.find(function (param) {
+        return param[textLookupConfig.parameters] === parameterValue;
       });
+      setLabel((_ref3 = found) != null ? _ref3 : null);
+    } else {
+      setLabel(null);
     }
-    if (prevProps.recent.length !== recent.length) {
-      this.setState({
-        filteredRecent: getAllElementsFiltered(recent, value, textLookupConfig.recent)
-      });
+  }, [parameterValue, parameters, textLookupConfig.parameters]);
+  useEffect(function () {
+    setFilteredRecent(getAllElementsFiltered(recent, value, textLookupConfig.recent));
+  }, [recent, value, textLookupConfig.recent]);
+  useEffect(function () {
+    setFilteredParameters(parameterValue ? parameters : getAllElementsFiltered(parameters, value, textLookupConfig.parameters));
+  }, [parameters, value, parameterValue, textLookupConfig.parameters]);
+  useEffect(function () {
+    if (suggestions) {
+      setFilteredSuggestions(getAllElementsFiltered(suggestions, value, textLookupConfig.suggestions));
+    } else {
+      setFilteredSuggestions(null);
     }
-    if (prevProps.parameters.length !== parameters.length) {
-      this.setState({
-        filteredParameters: parameterValue ? parameters : getAllElementsFiltered(parameters, value, textLookupConfig.parameters)
-      });
+  }, [suggestions, value, textLookupConfig.suggestions]);
+  useEffect(function () {
+    var newWidth = (width || searchWidth || 0) - MENU_WIDTH_OFFSET;
+    setItemsListWidth(Math.max(0, newWidth));
+  }, [width, searchWidth]);
+  useEffect(function () {
+    if (hideLabel) {
+      setLabel(null);
+      setIsResultChosen(false);
     }
-    if (suggestions && ((_prevProps$suggestion = prevProps.suggestions) == null ? void 0 : _prevProps$suggestion.length) !== suggestions.length) {
-      this.setState({
-        filteredSuggestions: getAllElementsFiltered(suggestions, value, textLookupConfig.suggestions)
-      });
-    }
-    if (hideLabel && prevProps.hideLabel !== hideLabel) {
-      this.setState({
-        label: null,
-        isResultChosen: false
-      });
+  }, [hideLabel]);
+  useEffect(function () {
+    if (!value) {
+      setIsResultChosen(false);
     }
+  }, [value]);
+  var handleScroll = function handleScroll(event) {
+    var scrollTop = event.currentTarget.scrollTop;
+    setScrollbarScrollTop(scrollTop);
   };
-  _proto.onKeyDown = function onKeyDown(e) {
-    var _this$props4 = this.props,
-      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,
-        filteredRecent: recent
+  var handleKeyDownWrapper = function handleKeyDownWrapper(event) {
+    focusWithArrowKeys(event, 'ds-search-item', function () {
+      setFocusInputTrigger(function (prev) {
+        return !prev;
       });
-      onParameterValueChange('', null);
+    });
+  };
+  var handleDropdownClick = function handleDropdownClick() {
+    setFocusInputTrigger(function (prev) {
+      return !prev;
+    });
+  };
+  var mergedWidth = searchWidth !== undefined ? searchWidth : width;
+  var onKeyDown = function onKeyDown(event) {
+    if (event.key === 'Backspace' && value === '' && isOpen) {
+      setLabel(null);
+      setFilteredRecent(recent);
+      onParameterValueChange == null || onParameterValueChange('', null);
       return;
     }
-    if (e.key === 'Enter' && isInputOpen) {
-      this.setState({
-        isResultChosen: !!value
-      });
+    if (event.key === 'Enter' && isOpen) {
+      setIsResultChosen(!!value);
     }
-    this.setState({
-      moveCursorToEnd: false
-    });
+    setMoveCursorToEnd(false);
   };
-  _proto.getSearchWrapperWidth = function getSearchWrapperWidth() {
-    var width = this.props.width;
+  var getSearchWrapperWidth = function getSearchWrapperWidth() {
     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;
+    if (wrapperRef.current && wrapperRef.current.clientWidth > MENU_WIDTH_OFFSET) {
+      return 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;
-    var isAnythingToShow;
-    onValueChange(currentValue);
-    if (parameterValue) {
-      var matchingSuggestions = getAllElementsFiltered(suggestions, currentValue, textLookupConfig.suggestions);
-      this.setState({
-        filteredSuggestions: matchingSuggestions
+  var _useState12 = useState(false),
+    isOpen = _useState12[0],
+    setIsOpen = _useState12[1];
+  useOnClickOutside(wrapperRef, function () {
+    if (isOpen && !value && !label && !alwaysExpanded) {
+      setToggleInputTrigger(function (prev) {
+        return !prev;
       });
-      isAnythingToShow = matchingSuggestions.length > 0;
+    }
+    setIsOpen(false);
+    setIsListVisible(false);
+    setScrollbarScrollTop(0);
+  });
+  var handleClearValue = function handleClearValue() {
+    onClear == null || onClear();
+    setLabel(null);
+    setFilteredRecent(recent);
+    setFilteredParameters(parameters);
+    setFilteredSuggestions(suggestions != null ? suggestions : null);
+    setIsResultChosen(false);
+  };
+  var handleChange = function handleChange(currentValue) {
+    onValueChange == null || onValueChange(currentValue);
+    if (parameterValue) {
+      var matchingSuggestions = getAllElementsFiltered(suggestions != null ? suggestions : [], currentValue, textLookupConfig.suggestions);
+      setFilteredSuggestions(matchingSuggestions);
+      setIsResultChosen(false);
+      setIsListVisible(matchingSuggestions.length > 0);
     } else {
       var matchingRecent = getAllElementsFiltered(recent, currentValue, textLookupConfig.recent);
       var matchingParameters = getAllElementsFiltered(parameters, currentValue, textLookupConfig.parameters);
-      this.setState({
-        filteredParameters: matchingParameters,
-        filteredRecent: matchingRecent
-      });
-      isAnythingToShow = matchingRecent.length > 0 || matchingParameters.length > 0;
+      setFilteredParameters(matchingParameters);
+      setFilteredRecent(matchingRecent);
+      setIsResultChosen(false);
+      setIsListVisible(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;
-    var isAnythingToShow;
+  var isListItemRendered = function isListItemRendered() {
     if (parameterValue) {
-      isAnythingToShow = hasSomeElementFiltered(suggestions, value, textLookupConfig.suggestions);
+      return hasSomeElementFiltered(suggestions, value, textLookupConfig.suggestions);
     } else {
       var anyRecentItem = hasSomeElementFiltered(recent, value, textLookupConfig.recent);
       var anyFilter = hasSomeElementFiltered(parameters, value, textLookupConfig.parameters);
-      isAnythingToShow = anyFilter || anyRecentItem;
+      return anyRecentItem || anyFilter;
     }
-    return isAnythingToShow;
   };
-  _proto.selectResult = function selectResult(item, dataKey) {
-    var _this$props7 = this.props,
-      onValueChange = _this$props7.onValueChange,
-      textLookupConfig = _this$props7.textLookupConfig;
-    this.setState({
-      isResultChosen: true,
-      moveCursorToEnd: true
-    });
-    onValueChange(item[textLookupConfig[dataKey]]);
+  var selectResult = function selectResult(item, dataKey) {
+    var newValue = item[textLookupConfig[dataKey]];
+    onValueChange == null || onValueChange(newValue);
+    setIsResultChosen(true);
+    setMoveCursorToEnd(true);
   };
-  _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;
-    var focusInputTrigger = this.state.focusInputTrigger;
-    onValueChange('');
-    this.setState({
-      label: item,
-      focusInputTrigger: !focusInputTrigger,
-      moveCursorToEnd: true
+  var selectFilter = function selectFilter(item) {
+    var paramKey = textLookupConfig.parameters;
+    var paramValue = item[paramKey];
+    onValueChange == null || onValueChange('');
+    setLabel(item);
+    setFocusInputTrigger(function (prev) {
+      return !prev;
     });
+    setMoveCursorToEnd(true);
     if (filterLookupKey && item[filterLookupKey]) {
-      onValueChange(item[textLookupConfig.parameters]);
-      onParameterValueChange(item[filterLookupKey], item);
-      this.setState({
-        isResultChosen: true
-      });
+      var inputValue = item[paramKey];
+      var filterValue = item[filterLookupKey];
+      onValueChange == null || onValueChange(inputValue);
+      onParameterValueChange == null || onParameterValueChange(filterValue, item);
+      setIsResultChosen(true);
     } else {
-      onParameterValueChange(item[textLookupConfig.parameters], item);
+      onParameterValueChange == null || onParameterValueChange(paramValue, item);
     }
   };
-  _proto.renderRecentItems = function renderRecentItems() {
-    var _this2 = this;
-    var _this$props9 = this.props,
-      recent = _this$props9.recent,
-      recentDisplayProps = _this$props9.recentDisplayProps,
-      dropdownWidth = _this$props9.dropdownWidth,
-      value = _this$props9.value;
-    var _this$state2 = this.state,
-      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;
-    return recent && !label && hasSomeElement(filteredRecent) && /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
-      headerText: title,
-      tooltip: tooltip
-    }), /*#__PURE__*/React.createElement(SearchItems, {
-      data: filteredRecent,
-      highlight: value,
-      itemRender: itemRender,
-      onItemClick: function onItemClick(item) {
-        return _this2.selectResult(item, SelectResultDataKeys.RECENT);
-      },
-      rowHeight: rowHeight,
-      width: dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth,
-      renderInMenu: false
-    }));
-  };
-  _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,
-      dropdownWidth = _this$props10.dropdownWidth,
-      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;
-    var title = parametersDisplayProps.title,
-      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
-    }), /*#__PURE__*/React.createElement(SearchItems, {
-      data: filteredParameters,
-      height: dropdownMaxHeight,
-      highlight: value,
-      itemRender: itemRender,
-      onItemClick: function onItemClick(item) {
-        return _this3.selectFilter(item);
-      },
-      rowHeight: rowHeight,
-      width: dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth,
-      listProps: _extends({
-        scrollTop: getParametersScrollTop({
-          scrollTop: scrollbarScrollTop,
-          recent: filteredRecent,
-          rowHeight: recentDisplayProps.rowHeight
-        })
-      }, listProps || {}),
-      renderInMenu: false
-    }));
-  };
-  _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,
-      dropdownWidth = _this$props11.dropdownWidth,
-      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;
-    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
-    }), /*#__PURE__*/React.createElement(SearchItems, {
-      data: filteredSuggestions,
-      height: dropdownMaxHeight,
-      highlight: value,
-      itemRender: suggestionsDisplayProps.itemRender,
-      onItemClick: function onItemClick(item) {
-        return _this4.selectResult(item, SelectResultDataKeys.SUGGESTIONS);
-      },
-      rowHeight: suggestionsDisplayProps.rowHeight,
-      width: dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth,
-      listProps: _extends({
-        scrollTop: scrollbarScrollTop
-      }, suggestionsDisplayProps.listProps || {}),
-      renderInMenu: false
-    }));
-  };
-  _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,
-      searchTooltipProps = _this$props12.searchTooltipProps;
-    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;
+  var widthDropdownSearch = dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth;
+  var shouldRenderRecent = Boolean(recent && !label && hasSomeElement(filteredRecent));
+  var shouldRenderParameters = Boolean(parameters && !label && hasSomeElement(filteredParameters));
+  var shouldRenderSuggestions = Boolean(suggestions && suggestionsDisplayProps && parameterValue && !isResultChosen && filteredSuggestions && hasSomeElement(filteredSuggestions));
+  var renderInputWrapper = function renderInputWrapper() {
+    var handleInputClick = function handleInputClick() {
+      setIsOpen(true);
+      setIsListVisible(true);
+      setItemsListWidth(getSearchWrapperWidth());
+    };
+    var handleToggle = function handleToggle(toggle) {
+      setIsOpen(toggle);
+      setIsListVisible(toggle);
+      setTimeout(function () {
+        setItemsListWidth(getSearchWrapperWidth());
+      }, INPUT_EXPAND_ANIMATION_DURATION);
+    };
+    var handleButtonClick = function handleButtonClick() {
+      setFocusInputTrigger(function (prev) {
+        return !prev;
+      });
+    };
     return /*#__PURE__*/React.createElement(SearchInput, {
       alwaysHighlight: true,
       clearTooltip: clearTooltip,
       searchTooltipProps: searchTooltipProps,
       filterLookupKey: filterLookupKey,
-      textLookupKey: textLookupConfig.parameters,
+      textLookupKey: String(textLookupConfig.parameters),
       filterLabel: label,
       focusTrigger: focusInputTrigger,
-      onButtonClick: function onButtonClick() {
-        return _this5.setState({
-          focusInputTrigger: !focusInputTrigger
-        });
-      },
-      onChange: function onChange(newValue) {
-        return _this5.handleChange(newValue);
-      },
-      onClear: this.handleClearValue,
-      onClick: function onClick() {
-        _this5.setState({
-          isListVisible: true,
-          itemsListWidth: _this5.getSearchWrapperWidth()
-        });
-      },
-      onKeyDown: function onKeyDown(e) {
-        return _this5.onKeyDown(e);
-      },
-      onToggle: function onToggle(toggle) {
-        _this5.setState({
-          isListVisible: toggle,
-          isInputOpen: toggle
-        });
-        setTimeout(function () {
-          _this5.setState({
-            itemsListWidth: _this5.getSearchWrapperWidth()
-          });
-        }, INPUT_EXPAND_ANIMATION_DURATION);
-      },
+      onButtonClick: handleButtonClick,
+      onChange: handleChange,
+      onClear: handleClearValue,
+      onClick: handleInputClick,
+      onKeyDown: onKeyDown,
+      onToggle: handleToggle,
       placeholder: placeholder,
       toggleTrigger: toggleInputTrigger,
       value: value,
@@ -401,58 +274,56 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       closeOnClickOutside: !alwaysExpanded && !isListVisible && !value && !label
     });
   };
-  _proto.render = function render() {
-    var _this6 = this;
-    var _this$props13 = this.props,
-      divider = _this$props13.divider,
-      dropdownMaxHeight = _this$props13.dropdownMaxHeight,
-      width = _this$props13.width,
-      searchWidth = _this$props13.searchWidth,
-      style = _this$props13.style,
-      dropdownWidth = _this$props13.dropdownWidth;
-    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;
-    var mergedWidth = searchWidth !== undefined ? searchWidth : width;
-    return /*#__PURE__*/React.createElement(S.SearchWrapper, {
-      ref: this.wrapperRef,
-      className: "SearchWrapper",
-      inputOpen: isInputOpen,
-      $width: mergedWidth,
-      onKeyDown: function onKeyDown(e) {
-        focusWithArrowKeys(e, 'ds-search-item', function () {
-          _this6.setState({
-            focusInputTrigger: !focusInputTrigger
-          });
-        });
-      },
-      style: style
-    }, this.renderInputWrapper(), isListVisible && /*#__PURE__*/React.createElement(S.SearchDropdownWrapper, {
-      dropdownWidth: dropdownWidth,
-      onClick: function onClick() {
-        _this6.setState({
-          focusInputTrigger: !focusInputTrigger
-        });
-      }
-    }, /*#__PURE__*/React.createElement(S.SearchDropdownContent, {
-      maxHeight: dropdownMaxHeight,
-      className: isInputOpen && !isResultChosen && this.isListItemRendered() ? 'search-list-open' : ''
-    }, /*#__PURE__*/React.createElement(Scrollbar, {
-      absolute: true,
-      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);
+  return /*#__PURE__*/React.createElement(S.SearchWrapper, {
+    ref: wrapperRef,
+    className: "SearchWrapper",
+    inputOpen: isOpen,
+    $width: mergedWidth,
+    onKeyDown: handleKeyDownWrapper,
+    style: style
+  }, renderInputWrapper(), isListVisible && /*#__PURE__*/React.createElement(S.SearchDropdownWrapper, {
+    dropdownWidth: dropdownWidth,
+    onClick: handleDropdownClick
+  }, /*#__PURE__*/React.createElement(S.SearchDropdownContent, {
+    maxHeight: dropdownMaxHeight,
+    className: isOpen && !isResultChosen && isListItemRendered() ? 'search-list-open' : ''
+  }, /*#__PURE__*/React.createElement(Scrollbar, {
+    absolute: true,
+    maxHeight: dropdownMaxHeight - SCROLLBAR_HEIGHT_OFFSET,
+    onScroll: handleScroll
+  }, shouldRenderRecent && /*#__PURE__*/React.createElement(SearchRenderer, _extends({
+    data: filteredRecent,
+    highlight: value,
+    width: widthDropdownSearch,
+    onItemClick: function onItemClick(item) {
+      return selectResult(item, SelectResultDataKeys.RECENT);
+    }
+  }, recentDisplayProps)), !!(filteredParameters != null && filteredParameters.length) && !!(filteredRecent != null && filteredRecent.length) && !label && divider, shouldRenderParameters && /*#__PURE__*/React.createElement(SearchRenderer, _extends({
+    data: filteredParameters,
+    highlight: value,
+    width: widthDropdownSearch,
+    height: dropdownMaxHeight,
+    listProps: _extends({
+      scrollTop: getParametersScrollTop({
+        scrollTop: scrollbarScrollTop,
+        recent: filteredRecent,
+        rowHeight: recentDisplayProps.rowHeight
+      })
+    }, parametersDisplayProps.listProps || {}),
+    onItemClick: function onItemClick(item) {
+      return selectFilter(item);
+    }
+  }, parametersDisplayProps)), shouldRenderSuggestions && /*#__PURE__*/React.createElement(SearchRenderer, _extends({
+    data: filteredSuggestions || [],
+    highlight: value,
+    width: widthDropdownSearch,
+    height: dropdownMaxHeight,
+    listProps: _extends({
+      scrollTop: scrollbarScrollTop
+    }, (suggestionsDisplayProps == null ? void 0 : suggestionsDisplayProps.listProps) || {}),
+    onItemClick: function onItemClick(item) {
+      return selectResult(item, SelectResultDataKeys.SUGGESTIONS);
+    }
+  }, suggestionsDisplayProps))))));
+}
+export default Search;

package/dist/Search.types.d.ts

@@ -11,12 +11,12 @@ export type DataSetProps = {
     visibleRows?: number;
     listProps?: Partial<ListProps>;
 };
-export type SearchLookupConfig<T extends AnyObject, U extends AnyObject> = {
+export type SearchLookupConfig<T extends AnyObject, U extends AnyObject, S extends AnyObject> = {
     parameters: keyof U;
     recent: keyof T;
-    suggestions: keyof T;
+    suggestions: keyof S;
 };
-export type SearchProps<T extends AnyObject, U extends AnyObject> = {
+export type SearchProps<T extends AnyObject, U extends AnyObject, S extends AnyObject> = {
     clearTooltip: string;
     divider?: React.ReactNode;
     dropdownMaxHeight: number;
@@ -32,9 +32,9 @@ export type SearchProps<T extends AnyObject, U extends AnyObject> = {
     recent: T[];
     recentDisplayProps: DataSetProps;
     style?: React.CSSProperties;
-    suggestions?: T[] | null;
+    suggestions?: S[] | null;
     suggestionsDisplayProps?: DataSetProps | null;
-    textLookupConfig: SearchLookupConfig<T, U>;
+    textLookupConfig: SearchLookupConfig<T, U, S>;
     value: string;
     /** @deprecated - use searchWidth instead */
     width?: number;
@@ -47,20 +47,6 @@ export type SearchProps<T extends AnyObject, U extends AnyObject> = {
     alwaysExpanded?: boolean;
     searchTooltipProps?: TooltipProps;
 };
-export type SearchState<T extends AnyObject> = {
-    isInputOpen: boolean;
-    label: T | null | undefined;
-    filteredParameters: T[];
-    filteredRecent: T[];
-    filteredSuggestions?: T[] | null;
-    isListVisible: boolean;
-    focusInputTrigger: boolean;
-    toggleInputTrigger: boolean;
-    isResultChosen: boolean;
-    itemsListWidth: number;
-    scrollbarScrollTop: number;
-    moveCursorToEnd: boolean;
-};
 export declare enum SelectResultDataKeys {
     RECENT = "recent",
     SUGGESTIONS = "suggestions"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,11 +35,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.0",
-    "@synerise/ds-icon": "^1.8.0",
-    "@synerise/ds-menu": "^1.2.0",
-    "@synerise/ds-scrollbar": "^1.2.0",
-    "@synerise/ds-tooltip": "^1.3.0",
+    "@synerise/ds-button": "^1.5.1",
+    "@synerise/ds-icon": "^1.9.0",
+    "@synerise/ds-menu": "^1.2.1",
+    "@synerise/ds-scrollbar": "^1.2.1",
+    "@synerise/ds-tooltip": "^1.3.1",
     "@synerise/ds-utils": "^1.5.0",
     "react-onclickoutside": "^6.9.0",
     "react-window": "^1.8.11"
@@ -50,5 +50,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
+  "gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
 }