@synerise/ds-search 1.5.9 → 1.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/Elements/SearchButton/SearchButton.d.ts +2 -2
  3. package/dist/Elements/SearchButton/SearchButton.js +16 -28
  4. package/dist/Elements/SearchButton/SearchButton.types.js +1 -1
  5. package/dist/Elements/SearchHeader/SearchHeader.d.ts +2 -2
  6. package/dist/Elements/SearchHeader/SearchHeader.js +15 -15
  7. package/dist/Elements/SearchHeader/SearchHeader.types.js +1 -1
  8. package/dist/Elements/SearchInput/SearchInput.d.ts +2 -2
  9. package/dist/Elements/SearchInput/SearchInput.js +74 -117
  10. package/dist/Elements/SearchInput/SearchInput.types.d.ts +3 -3
  11. package/dist/Elements/SearchInput/SearchInput.types.js +1 -1
  12. package/dist/Elements/SearchItems/SearchItems.d.ts +2 -2
  13. package/dist/Elements/SearchItems/SearchItems.js +54 -58
  14. package/dist/Elements/SearchItems/SearchItems.types.d.ts +1 -1
  15. package/dist/Elements/SearchItems/SearchItems.types.js +1 -1
  16. package/dist/Elements/SearchRenderer/SearchRenderer.d.ts +1 -1
  17. package/dist/Elements/SearchRenderer/SearchRenderer.js +22 -33
  18. package/dist/Elements/SearchRenderer/SearchRenderer.types.d.ts +2 -2
  19. package/dist/Elements/SearchRenderer/SearchRenderer.types.js +1 -1
  20. package/dist/Elements/index.js +12 -4
  21. package/dist/Elements/utils/searchUtils.d.ts +1 -1
  22. package/dist/Elements/utils/searchUtils.js +16 -17
  23. package/dist/Search.d.ts +2 -3
  24. package/dist/Search.js +145 -230
  25. package/dist/Search.styles.d.ts +15 -15
  26. package/dist/Search.styles.js +59 -62
  27. package/dist/Search.types.d.ts +4 -4
  28. package/dist/Search.types.js +8 -7
  29. package/dist/assets/style/index-tn0RQdqM.css +0 -0
  30. package/dist/const.js +16 -7
  31. package/dist/index.js +14 -2
  32. package/dist/modules.d.js +1 -1
  33. package/dist/modules.d.ts +0 -0
  34. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.5.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.10...@synerise/ds-search@1.5.11) (2026-04-01)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-search
9
+
10
+ ## [1.5.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.9...@synerise/ds-search@1.5.10) (2026-03-24)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-search
13
+
6
14
  ## [1.5.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.8...@synerise/ds-search@1.5.9) (2026-03-20)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-search
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type SearchButtonProps } from './SearchButton.types';
1
+ import { default as React } from 'react';
2
+ import { SearchButtonProps } from './SearchButton.types';
3
3
  declare const SearchButton: React.FC<SearchButtonProps>;
4
4
  export default SearchButton;
@@ -1,29 +1,17 @@
1
- import React from 'react';
2
- import Button from '@synerise/ds-button';
3
- import Icon, { SearchM } from '@synerise/ds-icon';
4
- import * as S from '../../Search.styles';
5
- var SearchButton = function SearchButton(_ref) {
6
- var inputOpen = _ref.inputOpen,
7
- hidden = _ref.hidden,
8
- onClick = _ref.onClick,
9
- inputFocused = _ref.inputFocused,
10
- clickable = _ref.clickable,
11
- disabled = _ref.disabled;
12
- return /*#__PURE__*/React.createElement(S.SearchButton, {
13
- isOpen: inputOpen,
14
- hidden: hidden,
15
- className: "SearchButton",
16
- inputFocused: inputFocused,
17
- clickable: !disabled && clickable,
18
- onClick: onClick
19
- }, /*#__PURE__*/React.createElement(Button, {
20
- mode: "single-icon",
21
- type: "ghost",
22
- disabled: disabled,
23
- className: inputOpen ? 'btn-search-open' : 'btn-search',
24
- "data-testid": "btn"
25
- }, /*#__PURE__*/React.createElement(Icon, {
26
- component: /*#__PURE__*/React.createElement(SearchM, null)
27
- })));
1
+ import { jsx } from "react/jsx-runtime";
2
+ import Button from "@synerise/ds-button";
3
+ import Icon, { SearchM } from "@synerise/ds-icon";
4
+ import { SearchButton as SearchButton$1 } from "../../Search.styles.js";
5
+ const SearchButton = ({
6
+ inputOpen,
7
+ hidden,
8
+ onClick,
9
+ inputFocused,
10
+ clickable,
11
+ disabled
12
+ }) => {
13
+ return /* @__PURE__ */ jsx(SearchButton$1, { isOpen: inputOpen, hidden, className: "SearchButton", inputFocused, clickable: !disabled && clickable, onClick, children: /* @__PURE__ */ jsx(Button, { mode: "single-icon", type: "ghost", disabled, className: inputOpen ? "btn-search-open" : "btn-search", "data-testid": "btn", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}) }) }) });
14
+ };
15
+ export {
16
+ SearchButton as default
28
17
  };
29
- export default SearchButton;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type SearchHeaderProps } from './SearchHeader.types';
1
+ import { default as React } from 'react';
2
+ import { SearchHeaderProps } from './SearchHeader.types';
3
3
  declare const SearchHeader: React.FC<SearchHeaderProps>;
4
4
  export default SearchHeader;
@@ -1,16 +1,16 @@
1
- import React from 'react';
2
- import Icon, { InfoFillS } from '@synerise/ds-icon';
3
- import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
4
- import * as S from '../../Search.styles';
5
- var SearchHeader = function SearchHeader(_ref) {
6
- var headerText = _ref.headerText,
7
- tooltip = _ref.tooltip;
8
- return /*#__PURE__*/React.createElement(S.MenuHeader, null, headerText, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
9
- type: "default",
10
- trigger: "hover",
11
- title: tooltip || headerText
12
- }, /*#__PURE__*/React.createElement(S.HeaderIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
13
- component: /*#__PURE__*/React.createElement(InfoFillS, null)
14
- }))));
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import Icon, { InfoFillS } from "@synerise/ds-icon";
3
+ import Tooltip from "@synerise/ds-tooltip/dist/Tooltip";
4
+ import { MenuHeader, HeaderIconWrapper } from "../../Search.styles.js";
5
+ const SearchHeader = ({
6
+ headerText,
7
+ tooltip
8
+ }) => {
9
+ return /* @__PURE__ */ jsxs(MenuHeader, { children: [
10
+ headerText,
11
+ tooltip && /* @__PURE__ */ jsx(Tooltip, { type: "default", trigger: "hover", title: tooltip || headerText, children: /* @__PURE__ */ jsx(HeaderIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(InfoFillS, {}) }) }) })
12
+ ] });
13
+ };
14
+ export {
15
+ SearchHeader as default
15
16
  };
16
- export default SearchHeader;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type SearchInputProps } from './SearchInput.types';
1
+ import { default as React } from 'react';
2
+ import { SearchInputProps } from './SearchInput.types';
3
3
  declare const SearchInput: ({ alwaysExpanded, alwaysHighlight, clearTooltip, filterLabel, filterLookupKey, onKeyDown, onClick, onChange, onClear, onToggle, onButtonClick, moveCursorToEnd, placeholder, textLookupKey, value, closeOnClickOutside, disableInput, disabled, focusTrigger, toggleTrigger, inputProps, searchTooltipProps, }: SearchInputProps) => React.JSX.Element;
4
4
  export default SearchInput;
@@ -1,158 +1,115 @@
1
- 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); }
2
- import Input from 'antd/lib/input';
3
- import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
4
- import { theme } from '@synerise/ds-core';
5
- import Icon, { Close3M } from '@synerise/ds-icon';
6
- import Tooltip from '@synerise/ds-tooltip';
7
- import { useOnClickOutside, usePrevious } from '@synerise/ds-utils';
8
- import * as S from '../../Search.styles';
9
- import SearchButton from '../SearchButton/SearchButton';
10
- var SearchInput = function SearchInput(_ref) {
11
- var alwaysExpanded = _ref.alwaysExpanded,
12
- alwaysHighlight = _ref.alwaysHighlight,
13
- clearTooltip = _ref.clearTooltip,
14
- filterLabel = _ref.filterLabel,
15
- filterLookupKey = _ref.filterLookupKey,
16
- onKeyDown = _ref.onKeyDown,
17
- onClick = _ref.onClick,
18
- onChange = _ref.onChange,
19
- onClear = _ref.onClear,
20
- onToggle = _ref.onToggle,
21
- onButtonClick = _ref.onButtonClick,
22
- moveCursorToEnd = _ref.moveCursorToEnd,
23
- placeholder = _ref.placeholder,
24
- textLookupKey = _ref.textLookupKey,
25
- value = _ref.value,
26
- closeOnClickOutside = _ref.closeOnClickOutside,
27
- disableInput = _ref.disableInput,
28
- disabled = _ref.disabled,
29
- focusTrigger = _ref.focusTrigger,
30
- toggleTrigger = _ref.toggleTrigger,
31
- _ref$inputProps = _ref.inputProps,
32
- inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
33
- _ref$searchTooltipPro = _ref.searchTooltipProps,
34
- searchTooltipProps = _ref$searchTooltipPro === void 0 ? {} : _ref$searchTooltipPro;
35
- var inputRef = useRef(null);
36
- var wrapperRef = useRef(null);
37
- var _useState = useState(alwaysExpanded || !!value || !!filterLabel),
38
- isInputOpen = _useState[0],
39
- setIsInputOpen = _useState[1];
40
- var _useState2 = useState(0),
41
- inputOffset = _useState2[0],
42
- setInputOffset = _useState2[1];
43
- var _useState3 = useState(false),
44
- isResultChosen = _useState3[0],
45
- setIsResultChosen = _useState3[1];
46
- var _useState4 = useState(true),
47
- isInputFocused = _useState4[0],
48
- setIsInputFocused = _useState4[1];
49
- var renderInputOpened = isInputOpen || !!value || !!filterLabel;
50
- var prevFocusTrigger = usePrevious(focusTrigger);
51
- var prevToggleTrigger = usePrevious(toggleTrigger);
52
- useLayoutEffect(function () {
53
- if (prevFocusTrigger !== undefined && prevFocusTrigger !== focusTrigger) {
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import Input from "antd/lib/input";
3
+ import { useRef, useState, useLayoutEffect, useEffect } from "react";
4
+ import { theme } from "@synerise/ds-core";
5
+ import Icon, { Close3M } from "@synerise/ds-icon";
6
+ import Tooltip from "@synerise/ds-tooltip";
7
+ import { usePrevious, useOnClickOutside } from "@synerise/ds-utils";
8
+ import { SearchInputWrapper, SearchInputContent, LeftSide, Filter, SearchInner, ClearButton } from "../../Search.styles.js";
9
+ import SearchButton from "../SearchButton/SearchButton.js";
10
+ const SearchInput = ({
11
+ alwaysExpanded,
12
+ alwaysHighlight,
13
+ clearTooltip,
14
+ filterLabel,
15
+ filterLookupKey,
16
+ onKeyDown,
17
+ onClick,
18
+ onChange,
19
+ onClear,
20
+ onToggle,
21
+ onButtonClick,
22
+ moveCursorToEnd,
23
+ placeholder,
24
+ textLookupKey,
25
+ value,
26
+ closeOnClickOutside,
27
+ disableInput,
28
+ disabled,
29
+ focusTrigger,
30
+ toggleTrigger,
31
+ inputProps = {},
32
+ searchTooltipProps = {}
33
+ }) => {
34
+ const inputRef = useRef(null);
35
+ const wrapperRef = useRef(null);
36
+ const [isInputOpen, setIsInputOpen] = useState(alwaysExpanded || !!value || !!filterLabel);
37
+ const [inputOffset, setInputOffset] = useState(0);
38
+ const [isResultChosen, setIsResultChosen] = useState(false);
39
+ const [isInputFocused, setIsInputFocused] = useState(true);
40
+ const renderInputOpened = isInputOpen || !!value || !!filterLabel;
41
+ const prevFocusTrigger = usePrevious(focusTrigger);
42
+ const prevToggleTrigger = usePrevious(toggleTrigger);
43
+ useLayoutEffect(() => {
44
+ if (prevFocusTrigger !== void 0 && prevFocusTrigger !== focusTrigger) {
54
45
  focusInput();
55
46
  }
56
- if (prevToggleTrigger !== undefined && prevToggleTrigger !== toggleTrigger) {
47
+ if (prevToggleTrigger !== void 0 && prevToggleTrigger !== toggleTrigger) {
57
48
  toggleOpen();
58
49
  }
59
50
  });
60
- useOnClickOutside(wrapperRef, function () {
51
+ useOnClickOutside(wrapperRef, () => {
61
52
  if (closeOnClickOutside && !alwaysExpanded) {
62
53
  setIsInputOpen(false);
63
54
  onToggle && onToggle(false);
64
55
  }
65
56
  });
66
- var focusInput = function focusInput() {
57
+ const focusInput = () => {
67
58
  inputRef.current && inputRef.current.focus();
68
59
  };
69
- var handleSearchInputContentClick = function handleSearchInputContentClick() {
60
+ const handleSearchInputContentClick = () => {
70
61
  onClick && onClick();
71
62
  focusInput();
72
63
  };
73
- var handleOffsetWithFilter = function handleOffsetWithFilter(ref) {
64
+ const handleOffsetWithFilter = (ref) => {
74
65
  ref && setInputOffset(ref.getBoundingClientRect().width);
75
66
  };
76
- var handleChangeValue = function handleChangeValue(_ref2) {
77
- var changedValue = _ref2.target.value;
67
+ const handleChangeValue = ({
68
+ target: {
69
+ value: changedValue
70
+ }
71
+ }) => {
78
72
  onChange(changedValue);
79
73
  setIsResultChosen(false);
80
74
  };
81
- var toggleOpen = function toggleOpen() {
82
- setIsInputOpen(function (open) {
75
+ const toggleOpen = () => {
76
+ setIsInputOpen((open) => {
83
77
  onToggle && onToggle(!open);
84
78
  return !open;
85
79
  });
86
80
  };
87
- var handleSearchButtonClick = function handleSearchButtonClick() {
81
+ const handleSearchButtonClick = () => {
88
82
  if (!alwaysExpanded) {
89
83
  toggleOpen();
90
84
  focusInput();
91
85
  onButtonClick && onButtonClick();
92
86
  }
93
87
  };
94
- var handleClearValue = function handleClearValue() {
88
+ const handleClearValue = () => {
95
89
  setInputOffset(0);
96
90
  setIsResultChosen(false);
97
91
  onClear();
98
92
  setIsInputOpen(true);
99
93
  focusInput();
100
94
  };
101
- useEffect(function () {
102
- var _inputRef$current;
103
- if (moveCursorToEnd && (_inputRef$current = inputRef.current) != null && _inputRef$current.input) {
95
+ useEffect(() => {
96
+ if (moveCursorToEnd && inputRef.current?.input) {
104
97
  inputRef.current.input.selectionStart = value.length || 0;
105
98
  inputRef.current.input.selectionEnd = value.length || 0;
106
99
  }
107
100
  }, [moveCursorToEnd, value.length]);
108
- return /*#__PURE__*/React.createElement(S.SearchInputWrapper, {
109
- ref: wrapperRef
110
- }, !disabled && /*#__PURE__*/React.createElement(S.SearchInputContent, {
111
- className: renderInputOpened ? 'is-open search-input-wrapper' : 'search-input-wrapper',
112
- offset: inputOffset,
113
- filterLabel: filterLabel,
114
- onClick: handleSearchInputContentClick
115
- }, /*#__PURE__*/React.createElement(S.LeftSide, {
116
- isOpen: isInputOpen
117
- }, filterLabel && /*#__PURE__*/React.createElement(S.Filter, {
118
- ref: handleOffsetWithFilter
119
- }, filterLabel.icon && !isResultChosen && /*#__PURE__*/React.createElement(Icon, {
120
- component: filterLabel.icon
121
- }), /*#__PURE__*/React.createElement("span", null, filterLabel[filterLookupKey || ''] || filterLabel[textLookupKey || '']))), /*#__PURE__*/React.createElement(Tooltip, searchTooltipProps, /*#__PURE__*/React.createElement(S.SearchInner, {
122
- hasValue: !!value,
123
- alwaysHighlight: alwaysHighlight
124
- }, /*#__PURE__*/React.createElement(Input, _extends({
125
- placeholder: placeholder,
126
- ref: inputRef,
127
- value: value,
128
- onChange: handleChangeValue,
129
- onKeyDown: onKeyDown,
130
- onFocus: function onFocus() {
131
- return setIsInputFocused(true);
132
- },
133
- onBlur: function onBlur() {
134
- return setIsInputFocused(false);
135
- },
136
- autoComplete: "off",
137
- autoFocus: true,
138
- disabled: disableInput
139
- }, inputProps))))), /*#__PURE__*/React.createElement(SearchButton, {
140
- disabled: disabled,
141
- inputOpen: isInputOpen,
142
- hidden: !!value || !!filterLabel,
143
- inputFocused: isInputFocused,
144
- clickable: !disabled && !alwaysExpanded,
145
- onClick: handleSearchButtonClick
146
- }), !disabled && /*#__PURE__*/React.createElement(S.ClearButton, {
147
- hidden: !value && !filterLabel
148
- }, /*#__PURE__*/React.createElement(Icon, {
149
- "data-testid": "clear",
150
- onClick: handleClearValue,
151
- component: /*#__PURE__*/React.createElement(Tooltip, {
152
- title: clearTooltip
153
- }, /*#__PURE__*/React.createElement(Close3M, null)),
154
- color: theme.palette['red-600'],
155
- size: 18
156
- })));
101
+ return /* @__PURE__ */ jsxs(SearchInputWrapper, { ref: wrapperRef, children: [
102
+ !disabled && /* @__PURE__ */ jsxs(SearchInputContent, { className: renderInputOpened ? "is-open search-input-wrapper" : "search-input-wrapper", offset: inputOffset, filterLabel, onClick: handleSearchInputContentClick, children: [
103
+ /* @__PURE__ */ jsx(LeftSide, { isOpen: isInputOpen, children: filterLabel && /* @__PURE__ */ jsxs(Filter, { ref: handleOffsetWithFilter, children: [
104
+ filterLabel.icon && !isResultChosen && /* @__PURE__ */ jsx(Icon, { component: filterLabel.icon }),
105
+ /* @__PURE__ */ jsx("span", { children: filterLabel[filterLookupKey || ""] || filterLabel[textLookupKey || ""] })
106
+ ] }) }),
107
+ /* @__PURE__ */ jsx(Tooltip, { ...searchTooltipProps, children: /* @__PURE__ */ jsx(SearchInner, { hasValue: !!value, alwaysHighlight, children: /* @__PURE__ */ jsx(Input, { placeholder, ref: inputRef, value, onChange: handleChangeValue, onKeyDown, onFocus: () => setIsInputFocused(true), onBlur: () => setIsInputFocused(false), autoComplete: "off", autoFocus: true, disabled: disableInput, ...inputProps }) }) })
108
+ ] }),
109
+ /* @__PURE__ */ jsx(SearchButton, { disabled, inputOpen: isInputOpen, hidden: !!value || !!filterLabel, inputFocused: isInputFocused, clickable: !disabled && !alwaysExpanded, onClick: handleSearchButtonClick }),
110
+ !disabled && /* @__PURE__ */ jsx(ClearButton, { hidden: !value && !filterLabel, children: /* @__PURE__ */ jsx(Icon, { "data-testid": "clear", onClick: handleClearValue, component: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(Close3M, {}) }), color: theme.palette["red-600"], size: 18 }) })
111
+ ] });
112
+ };
113
+ export {
114
+ SearchInput as default
157
115
  };
158
- export default SearchInput;
@@ -1,6 +1,6 @@
1
- import type { InputProps } from 'antd/lib/input';
2
- import type { KeyboardEvent, ReactNode } from 'react';
3
- import type { TooltipProps } from '@synerise/ds-tooltip';
1
+ import { InputProps } from 'antd/lib/input';
2
+ import { KeyboardEvent, ReactNode } from 'react';
3
+ import { TooltipProps } from '@synerise/ds-tooltip';
4
4
  export type SearchInputProps = {
5
5
  alwaysExpanded?: boolean;
6
6
  alwaysHighlight?: boolean;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,5 +1,5 @@
1
- import React, { type ReactElement, type ReactNode } from 'react';
2
- import { type SearchItemListProps } from './SearchItems.types';
1
+ import { default as React, ReactElement, ReactNode } from 'react';
2
+ import { SearchItemListProps } from './SearchItems.types';
3
3
  export declare function renderSearchList<V>(props: SearchItemListProps<V>, children?: ReactNode): ReactElement<SearchItemListProps<V>>;
4
4
  declare const SearchItems: ({ data, height, highlight, itemRender, listProps, onItemClick, rowHeight, visibleRows, width, renderInMenu, }: SearchItemListProps<any>) => React.JSX.Element;
5
5
  export default SearchItems;
@@ -1,48 +1,51 @@
1
- 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); }
2
- import React, { cloneElement, useEffect, useMemo, useRef } from 'react';
3
- import { FixedSizeList as List } from 'react-window';
4
- import { ListContextProvider } from '@synerise/ds-list-item';
5
- import Menu from '@synerise/ds-menu';
6
- var listStyle = {
7
- overflowX: 'unset',
8
- overflowY: 'unset'
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useRef, useMemo, useEffect, cloneElement } from "react";
3
+ import { FixedSizeList } from "react-window";
4
+ import { ListContextProvider } from "@synerise/ds-list-item";
5
+ import Menu from "@synerise/ds-menu";
6
+ const listStyle = {
7
+ overflowX: "unset",
8
+ overflowY: "unset"
9
9
  };
10
- export function renderSearchList(props, children) {
11
- return /*#__PURE__*/React.createElement(SearchItems, props, children);
10
+ function renderSearchList(props, children) {
11
+ return /* @__PURE__ */ jsx(SearchItems, { ...props, children });
12
12
  }
13
- var rowRenderer = function rowRenderer(_ref) {
14
- var index = _ref.index,
15
- style = _ref.style,
16
- data = _ref.data;
17
- var item = data && data.items[index];
18
- var itemReturnedFromRenderer = data.itemRender(item);
19
- var rendererCustomStyles = itemReturnedFromRenderer && itemReturnedFromRenderer.props && itemReturnedFromRenderer.props.style || {};
20
- var mergedStyles = _extends({}, rendererCustomStyles, style);
21
- return /*#__PURE__*/cloneElement(itemReturnedFromRenderer, _extends({}, itemReturnedFromRenderer.props, {
13
+ const rowRenderer = ({
14
+ index,
15
+ style,
16
+ data
17
+ }) => {
18
+ const item = data && data.items[index];
19
+ const itemReturnedFromRenderer = data.itemRender(item);
20
+ const rendererCustomStyles = itemReturnedFromRenderer && itemReturnedFromRenderer.props && itemReturnedFromRenderer.props.style || {};
21
+ const mergedStyles = {
22
+ ...rendererCustomStyles,
23
+ ...style
24
+ };
25
+ return cloneElement(itemReturnedFromRenderer, {
26
+ ...itemReturnedFromRenderer.props,
22
27
  style: mergedStyles,
23
28
  highlight: data.highlight,
24
- onClick: function onClick() {
25
- return data.onItemClick && data.onItemClick(item);
26
- },
27
- className: 'ds-search-item'
28
- }));
29
+ onClick: () => data.onItemClick && data.onItemClick(item),
30
+ className: "ds-search-item"
31
+ });
29
32
  };
30
- var SearchItems = function SearchItems(_ref2) {
31
- var data = _ref2.data,
32
- height = _ref2.height,
33
- highlight = _ref2.highlight,
34
- itemRender = _ref2.itemRender,
35
- listProps = _ref2.listProps,
36
- onItemClick = _ref2.onItemClick,
37
- rowHeight = _ref2.rowHeight,
38
- visibleRows = _ref2.visibleRows,
39
- width = _ref2.width,
40
- _ref2$renderInMenu = _ref2.renderInMenu,
41
- renderInMenu = _ref2$renderInMenu === void 0 ? true : _ref2$renderInMenu;
42
- var listRef = useRef(null);
43
- var listHeight = useMemo(function () {
33
+ const SearchItems = ({
34
+ data,
35
+ height,
36
+ highlight,
37
+ itemRender,
38
+ listProps,
39
+ onItemClick,
40
+ rowHeight,
41
+ visibleRows,
42
+ width,
43
+ renderInMenu = true
44
+ }) => {
45
+ const listRef = useRef(null);
46
+ const listHeight = useMemo(() => {
44
47
  if (data) {
45
- var dataHeight = data.length * rowHeight;
48
+ const dataHeight = data.length * rowHeight;
46
49
  if (visibleRows) {
47
50
  return visibleRows < data.length ? visibleRows * rowHeight : dataHeight;
48
51
  }
@@ -53,27 +56,20 @@ var SearchItems = function SearchItems(_ref2) {
53
56
  }
54
57
  return 0;
55
58
  }, [data, height, rowHeight, visibleRows]);
56
- useEffect(function () {
59
+ useEffect(() => {
57
60
  if (listRef.current && listProps) {
58
61
  listRef.current.scrollTo(Math.max(0, listProps.scrollTop || 0));
59
62
  }
60
63
  }, [listProps]);
61
- var list = data && /*#__PURE__*/React.createElement(List, _extends({
62
- height: listHeight,
63
- itemCount: data.length,
64
- itemData: {
65
- highlight: highlight,
66
- itemRender: itemRender,
67
- items: data,
68
- onItemClick: onItemClick
69
- },
70
- itemSize: rowHeight,
71
- ref: listRef,
72
- style: listStyle,
73
- width: width
74
- }, listProps), rowRenderer);
75
- return renderInMenu ? /*#__PURE__*/React.createElement(Menu, {
76
- tabIndex: -1
77
- }, list) : /*#__PURE__*/React.createElement(ListContextProvider, null, list);
64
+ const list = data && /* @__PURE__ */ jsx(FixedSizeList, { height: listHeight, itemCount: data.length, itemData: {
65
+ highlight,
66
+ itemRender,
67
+ items: data,
68
+ onItemClick
69
+ }, itemSize: rowHeight, ref: listRef, style: listStyle, width, ...listProps, children: rowRenderer });
70
+ return renderInMenu ? /* @__PURE__ */ jsx(Menu, { tabIndex: -1, children: list }) : /* @__PURE__ */ jsx(ListContextProvider, { children: list });
71
+ };
72
+ export {
73
+ SearchItems as default,
74
+ renderSearchList
78
75
  };
79
- export default SearchItems;
@@ -1,4 +1,4 @@
1
- import { type ListProps } from 'react-window';
1
+ import { ListProps } from '../../../../../../config/vitest/__mocks__/reactWindowMock.js';
2
2
  type ListPropsEnhanced = Partial<ListProps> & {
3
3
  scrollTop?: number;
4
4
  };
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,3 +1,3 @@
1
- import { type SearchRendererProps } from './SearchRenderer.types';
1
+ import { SearchRendererProps } from './SearchRenderer.types';
2
2
  declare const SearchRenderer: ({ title, tooltip, data, width, height, rowHeight, listProps, itemRender, highlight, onItemClick, }: SearchRendererProps) => JSX.Element | null;
3
3
  export default SearchRenderer;
@@ -1,34 +1,23 @@
1
- import React from 'react';
2
- import SearchHeader from '../SearchHeader/SearchHeader';
3
- import SearchItems from '../SearchItems/SearchItems';
4
- var SearchRenderer = function SearchRenderer(_ref) {
5
- var title = _ref.title,
6
- tooltip = _ref.tooltip,
7
- data = _ref.data,
8
- width = _ref.width,
9
- height = _ref.height,
10
- _ref$rowHeight = _ref.rowHeight,
11
- rowHeight = _ref$rowHeight === void 0 ? 30 : _ref$rowHeight,
12
- listProps = _ref.listProps,
13
- _ref$itemRender = _ref.itemRender,
14
- itemRender = _ref$itemRender === void 0 ? function (item) {
15
- return /*#__PURE__*/React.createElement(React.Fragment, null, item);
16
- } : _ref$itemRender,
17
- highlight = _ref.highlight,
18
- onItemClick = _ref.onItemClick;
19
- return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
20
- headerText: title,
21
- tooltip: tooltip
22
- }), /*#__PURE__*/React.createElement(SearchItems, {
23
- data: data,
24
- height: height,
25
- highlight: highlight,
26
- width: width,
27
- rowHeight: rowHeight,
28
- itemRender: itemRender,
29
- onItemClick: onItemClick,
30
- listProps: listProps,
31
- renderInMenu: false
32
- }));
1
+ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
+ import SearchHeader from "../SearchHeader/SearchHeader.js";
3
+ import SearchItems from "../SearchItems/SearchItems.js";
4
+ const SearchRenderer = ({
5
+ title,
6
+ tooltip,
7
+ data,
8
+ width,
9
+ height,
10
+ rowHeight = 30,
11
+ listProps,
12
+ itemRender = (item) => /* @__PURE__ */ jsx(Fragment, { children: item }),
13
+ highlight,
14
+ onItemClick
15
+ }) => {
16
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
17
+ !!title && /* @__PURE__ */ jsx(SearchHeader, { headerText: title, tooltip }),
18
+ /* @__PURE__ */ jsx(SearchItems, { data, height, highlight, width, rowHeight, itemRender, onItemClick, listProps, renderInMenu: false })
19
+ ] });
20
+ };
21
+ export {
22
+ SearchRenderer as default
33
23
  };
34
- export default SearchRenderer;
@@ -1,5 +1,5 @@
1
- import { type ReactElement } from 'react';
2
- import { type AnyObject } from '../../Search.types';
1
+ import { ReactElement } from 'react';
2
+ import { AnyObject } from '../../Search.types';
3
3
  export type SearchRendererProps = {
4
4
  title?: string;
5
5
  tooltip?: string;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,4 +1,12 @@
1
- export { default as SearchInput } from './SearchInput/SearchInput';
2
- export { default as SearchHeader } from './SearchHeader/SearchHeader';
3
- export { default as SearchItemList, default as SearchItems, renderSearchList } from './SearchItems/SearchItems';
4
- export { default as SearchButton } from './SearchButton/SearchButton';
1
+ import { default as default2 } from "./SearchInput/SearchInput.js";
2
+ import { default as default3 } from "./SearchHeader/SearchHeader.js";
3
+ import { default as default4, default as default5, renderSearchList } from "./SearchItems/SearchItems.js";
4
+ import { default as default6 } from "./SearchButton/SearchButton.js";
5
+ export {
6
+ default6 as SearchButton,
7
+ default3 as SearchHeader,
8
+ default2 as SearchInput,
9
+ default4 as SearchItemList,
10
+ default5 as SearchItems,
11
+ renderSearchList
12
+ };