@synerise/ds-search 0.9.25 → 0.10.0

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 (9) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +2 -3
  3. package/dist/Elements/SearchInput/SearchInput.d.ts +3 -18
  4. package/dist/Elements/SearchInput/SearchInput.js +144 -183
  5. package/dist/Elements/SearchInput/SearchInput.types.d.ts +5 -11
  6. package/dist/Elements/SearchItems/SearchItems.js +6 -9
  7. package/dist/Search.js +9 -13
  8. package/dist/modules.d.js +1 -1
  9. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ # [0.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.9.25...@synerise/ds-search@0.10.0) (2025-01-29)
7
+
8
+
9
+ ### Features
10
+
11
+ * antd@4.24 react@18 ([d97a667](https://github.com/Synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.9.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.9.24...@synerise/ds-search@0.9.25) (2025-01-21)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-search
package/README.md CHANGED
@@ -55,7 +55,7 @@ return (
55
55
  title: "recentTitle",
56
56
  rowHeight: 32,
57
57
  visibleRows: 3,
58
- itemRender: (item: FilterElement) => <Menu.Item onItemHover={(): void => {}}>{item && item.text}</Menu.Item>,
58
+ itemRender: (item: FilterElement) => <Menu.Item>{item && item.text}</Menu.Item>,
59
59
  divider: (
60
60
  <div style={{ padding: '12px', paddingBottom: '0px' }}>
61
61
  <Divider dashed />{' '}
@@ -70,7 +70,6 @@ return (
70
70
  itemRender: (item: FilterElement) => (
71
71
  <Menu.Item
72
72
  highlight={value}
73
- onItemHover={(): void => {}}
74
73
  prefixel={item && <Icon component={item && item.icon} />}
75
74
  >
76
75
  {item && item.text}
@@ -82,7 +81,7 @@ return (
82
81
  title: "suggestionsTitle",
83
82
  rowHeight: 32,
84
83
  visibleRows: 6,
85
- itemRender: (item: FilterElement) => <Menu.Item onItemHover={(): void => {}}>{item && item.text}</Menu.Item>,
84
+ itemRender: (item: FilterElement) => <Menu.Item>{item && item.text}</Menu.Item>,
86
85
  }}
87
86
  />
88
87
  )
package/dist/Elements/SearchInput/SearchInput.d.ts CHANGED
@@ -1,19 +1,4 @@
1
1
  import React from 'react';
2
- import { SearchInputProps, SearchInputState } from './SearchInput.types';
3
- declare class SearchInput extends React.Component<SearchInputProps, SearchInputState> {
4
- private inputRef;
5
- constructor(props: SearchInputProps);
6
- getSnapshotBeforeUpdate(prevProps: Readonly<SearchInputProps>): null;
7
- componentDidUpdate: () => void;
8
- focusInput: () => void;
9
- toggleOpen: () => void;
10
- handleSearchButtonClick: () => void;
11
- handleClearValue: () => void;
12
- handleChangeValue: ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => void;
13
- handleSearchInputContentClick: () => void;
14
- handleOffsetWithFilter: (ref: HTMLDivElement | null) => void;
15
- handleClickOutside: () => void;
16
- render(): React.ReactElement;
17
- }
18
- declare const _default: import("react-onclickoutside").WrapperClass<SearchInputProps, typeof SearchInput>;
19
- export default _default;
2
+ import { SearchInputProps } from './SearchInput.types';
3
+ declare const SearchInput: ({ alwaysExpanded, alwaysHighlight, clearTooltip, filterLabel, filterLookupKey, onKeyDown, onClick, onChange, onClear, onToggle, onButtonClick, moveCursorToEnd, placeholder, textLookupKey, value, closeOnClickOutside, disableInput, focusTrigger, toggleTrigger, inputProps, }: SearchInputProps) => React.JSX.Element;
4
+ export default SearchInput;
package/dist/Elements/SearchInput/SearchInput.js CHANGED
@@ -1,193 +1,154 @@
1
1
  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); }
2
- function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
3
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
4
- 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; }
5
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
6
- 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); }
7
- import React from 'react';
8
- import onClickOutside from 'react-onclickoutside';
2
+ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
9
3
  import Input from 'antd/lib/input';
10
- import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
4
+ import Tooltip from '@synerise/ds-tooltip';
5
+ import { useOnClickOutside, usePrevious } from '@synerise/ds-utils';
11
6
  import { theme } from '@synerise/ds-core';
12
7
  import Icon, { Close3M } from '@synerise/ds-icon';
13
8
  import * as S from '../../Search.styles';
14
9
  import SearchButton from '../SearchButton/SearchButton';
15
- var SearchInput = /*#__PURE__*/function (_React$Component) {
16
- function SearchInput(props) {
17
- var _this;
18
- _this = _React$Component.call(this, props) || this;
19
- // eslint-disable-next-line react/state-in-constructor
20
- _defineProperty(_this, "inputRef", React.createRef());
21
- _defineProperty(_this, "componentDidUpdate", function () {
22
- var _this$props = _this.props,
23
- moveCursorToEnd = _this$props.moveCursorToEnd,
24
- value = _this$props.value;
25
- var input = _this.inputRef;
26
- if (moveCursorToEnd && input && input.current) {
27
- input.current.input.selectionStart = value.length || 0;
28
- input.current.input.selectionEnd = value.length || 0;
29
- }
30
- });
31
- _defineProperty(_this, "focusInput", function () {
32
- _this.inputRef.current && _this.inputRef.current.focus();
33
- });
34
- _defineProperty(_this, "toggleOpen", function () {
35
- var onToggle = _this.props.onToggle;
36
- var isInputOpen = _this.state.isInputOpen;
37
- onToggle && onToggle(!isInputOpen);
38
- _this.setState(function (prevState) {
39
- return {
40
- isInputOpen: !prevState.isInputOpen
41
- };
42
- });
43
- });
44
- _defineProperty(_this, "handleSearchButtonClick", function () {
45
- var _this$props2 = _this.props,
46
- alwaysExpanded = _this$props2.alwaysExpanded,
47
- onButtonClick = _this$props2.onButtonClick;
48
- if (!alwaysExpanded) {
49
- _this.toggleOpen();
50
- _this.focusInput();
51
- onButtonClick && onButtonClick();
52
- }
53
- });
54
- _defineProperty(_this, "handleClearValue", function () {
55
- var onClear = _this.props.onClear;
56
- _this.setState({
57
- inputOffset: 0,
58
- isResultChosen: false
59
- });
60
- _this.focusInput();
61
- onClear();
62
- });
63
- _defineProperty(_this, "handleChangeValue", function (_ref) {
64
- var value = _ref.target.value;
65
- var onChange = _this.props.onChange;
66
- onChange(value);
67
- _this.setState({
68
- isResultChosen: false
69
- });
70
- });
71
- _defineProperty(_this, "handleSearchInputContentClick", function () {
72
- var onClick = _this.props.onClick;
73
- onClick && onClick();
74
- _this.focusInput();
75
- });
76
- _defineProperty(_this, "handleOffsetWithFilter", function (ref) {
77
- ref && _this.setState({
78
- inputOffset: ref.getBoundingClientRect().width
79
- });
80
- });
81
- // This handler is used for onClickOutside HOC
82
- _defineProperty(_this, "handleClickOutside", function () {
83
- var _this$props3 = _this.props,
84
- closeOnClickOutside = _this$props3.closeOnClickOutside,
85
- onToggle = _this$props3.onToggle,
86
- value = _this$props3.value,
87
- filterLabel = _this$props3.filterLabel;
88
- if (closeOnClickOutside && !value && !filterLabel) {
89
- _this.setState({
90
- isInputOpen: false
91
- });
92
- onToggle && onToggle(false);
93
- }
94
- });
95
- _this.state = {
96
- inputOffset: 0,
97
- isInputOpen: props.alwaysExpanded || !!props.value || !!props.filterLabel,
98
- isInputFocused: true,
99
- isResultChosen: false
100
- };
101
- return _this;
102
- }
103
- _inheritsLoose(SearchInput, _React$Component);
104
- var _proto = SearchInput.prototype;
105
- _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
106
- var _this2 = this;
107
- var _this$props4 = this.props,
108
- focusTrigger = _this$props4.focusTrigger,
109
- toggleTrigger = _this$props4.toggleTrigger;
110
- if (prevProps.focusTrigger !== focusTrigger) {
111
- setTimeout(function () {
112
- _this2.focusInput();
113
- }, 0);
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
+ focusTrigger = _ref.focusTrigger,
29
+ toggleTrigger = _ref.toggleTrigger,
30
+ _ref$inputProps = _ref.inputProps,
31
+ inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps;
32
+ var inputRef = useRef(null);
33
+ var wrapperRef = useRef(null);
34
+ var _useState = useState(alwaysExpanded || !!value || !!filterLabel),
35
+ isInputOpen = _useState[0],
36
+ setIsInputOpen = _useState[1];
37
+ var _useState2 = useState(0),
38
+ inputOffset = _useState2[0],
39
+ setInputOffset = _useState2[1];
40
+ var _useState3 = useState(false),
41
+ isResultChosen = _useState3[0],
42
+ setIsResultChosen = _useState3[1];
43
+ var _useState4 = useState(true),
44
+ isInputFocused = _useState4[0],
45
+ setIsInputFocused = _useState4[1];
46
+ var renderInputOpened = isInputOpen || !!value || !!filterLabel;
47
+ var prevFocusTrigger = usePrevious(focusTrigger);
48
+ var prevToggleTrigger = usePrevious(toggleTrigger);
49
+ useLayoutEffect(function () {
50
+ if (prevFocusTrigger !== undefined && prevFocusTrigger !== focusTrigger) {
51
+ focusInput();
114
52
  }
115
- if (prevProps.toggleTrigger !== toggleTrigger) {
116
- this.toggleOpen();
53
+ if (prevToggleTrigger !== undefined && prevToggleTrigger !== toggleTrigger) {
54
+ toggleOpen();
117
55
  }
118
- return null;
56
+ });
57
+ useOnClickOutside(wrapperRef, function () {
58
+ if (closeOnClickOutside && !alwaysExpanded) {
59
+ setIsInputOpen(false);
60
+ onToggle && onToggle(false);
61
+ }
62
+ });
63
+ var focusInput = function focusInput() {
64
+ inputRef.current && inputRef.current.focus();
65
+ };
66
+ var handleSearchInputContentClick = function handleSearchInputContentClick() {
67
+ onClick && onClick();
68
+ focusInput();
69
+ };
70
+ var handleOffsetWithFilter = function handleOffsetWithFilter(ref) {
71
+ ref && setInputOffset(ref.getBoundingClientRect().width);
119
72
  };
120
- _proto.render = function render() {
121
- var _this3 = this;
122
- var _this$props5 = this.props,
123
- alwaysExpanded = _this$props5.alwaysExpanded,
124
- alwaysHighlight = _this$props5.alwaysHighlight,
125
- clearTooltip = _this$props5.clearTooltip,
126
- filterLabel = _this$props5.filterLabel,
127
- filterLookupKey = _this$props5.filterLookupKey,
128
- onKeyDown = _this$props5.onKeyDown,
129
- placeholder = _this$props5.placeholder,
130
- textLookupKey = _this$props5.textLookupKey,
131
- value = _this$props5.value,
132
- disableInput = _this$props5.disableInput,
133
- _this$props5$inputPro = _this$props5.inputProps,
134
- inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro;
135
- var _this$state = this.state,
136
- isInputOpen = _this$state.isInputOpen,
137
- inputOffset = _this$state.inputOffset,
138
- isResultChosen = _this$state.isResultChosen,
139
- isInputFocused = _this$state.isInputFocused;
140
- return /*#__PURE__*/React.createElement(S.SearchInputWrapper, null, /*#__PURE__*/React.createElement(S.SearchInputContent, {
141
- className: isInputOpen || !!value || !!filterLabel ? 'is-open search-input-wrapper' : 'search-input-wrapper',
142
- offset: inputOffset,
143
- filterLabel: filterLabel,
144
- onClick: this.handleSearchInputContentClick
145
- }, /*#__PURE__*/React.createElement(S.LeftSide, {
146
- isOpen: isInputOpen
147
- }, filterLabel && /*#__PURE__*/React.createElement(S.Filter, {
148
- ref: this.handleOffsetWithFilter
149
- }, filterLabel.icon && !isResultChosen && /*#__PURE__*/React.createElement(Icon, {
150
- component: filterLabel.icon
151
- }), /*#__PURE__*/React.createElement("span", null, filterLabel[filterLookupKey || ''] || filterLabel[textLookupKey || '']))), /*#__PURE__*/React.createElement(S.SearchInner, {
152
- hasValue: !!value,
153
- alwaysHighlight: alwaysHighlight
154
- }, /*#__PURE__*/React.createElement(Input, _extends({
155
- placeholder: placeholder,
156
- ref: this.inputRef,
157
- value: value,
158
- onChange: this.handleChangeValue,
159
- onKeyDown: onKeyDown,
160
- onFocus: function onFocus() {
161
- _this3.setState({
162
- isInputFocused: true
163
- });
164
- },
165
- onBlur: function onBlur() {
166
- _this3.setState({
167
- isInputFocused: false
168
- });
169
- },
170
- autoComplete: "off",
171
- autoFocus: true,
172
- disabled: disableInput
173
- }, inputProps)))), /*#__PURE__*/React.createElement(SearchButton, {
174
- inputOpen: isInputOpen,
175
- hidden: !!value || !!filterLabel,
176
- inputFocused: isInputFocused,
177
- clickable: !alwaysExpanded,
178
- onClick: this.handleSearchButtonClick
179
- }), /*#__PURE__*/React.createElement(S.ClearButton, {
180
- hidden: !value && !filterLabel
181
- }, /*#__PURE__*/React.createElement(Icon, {
182
- "data-testid": "clear",
183
- onClick: this.handleClearValue,
184
- component: /*#__PURE__*/React.createElement(Tooltip, {
185
- title: clearTooltip
186
- }, /*#__PURE__*/React.createElement(Close3M, null)),
187
- color: theme.palette['red-600'],
188
- size: 18
189
- })));
73
+ var handleChangeValue = function handleChangeValue(_ref2) {
74
+ var changedValue = _ref2.target.value;
75
+ onChange(changedValue);
76
+ setIsResultChosen(false);
77
+ };
78
+ var toggleOpen = function toggleOpen() {
79
+ setIsInputOpen(function (open) {
80
+ onToggle && onToggle(!open);
81
+ return !open;
82
+ });
190
83
  };
191
- return SearchInput;
192
- }(React.Component);
193
- export default onClickOutside(SearchInput);
84
+ var handleSearchButtonClick = function handleSearchButtonClick() {
85
+ if (!alwaysExpanded) {
86
+ toggleOpen();
87
+ focusInput();
88
+ onButtonClick && onButtonClick();
89
+ }
90
+ };
91
+ var handleClearValue = function handleClearValue() {
92
+ setInputOffset(0);
93
+ setIsResultChosen(false);
94
+ onClear();
95
+ setIsInputOpen(true);
96
+ focusInput();
97
+ };
98
+ useEffect(function () {
99
+ var _inputRef$current;
100
+ if (moveCursorToEnd && (_inputRef$current = inputRef.current) != null && _inputRef$current.input) {
101
+ inputRef.current.input.selectionStart = value.length || 0;
102
+ inputRef.current.input.selectionEnd = value.length || 0;
103
+ }
104
+ }, [moveCursorToEnd, value.length]);
105
+ return /*#__PURE__*/React.createElement(S.SearchInputWrapper, {
106
+ ref: wrapperRef
107
+ }, /*#__PURE__*/React.createElement(S.SearchInputContent, {
108
+ className: renderInputOpened ? 'is-open search-input-wrapper' : 'search-input-wrapper',
109
+ offset: inputOffset,
110
+ filterLabel: filterLabel,
111
+ onClick: handleSearchInputContentClick
112
+ }, /*#__PURE__*/React.createElement(S.LeftSide, {
113
+ isOpen: isInputOpen
114
+ }, filterLabel && /*#__PURE__*/React.createElement(S.Filter, {
115
+ ref: handleOffsetWithFilter
116
+ }, filterLabel.icon && !isResultChosen && /*#__PURE__*/React.createElement(Icon, {
117
+ component: filterLabel.icon
118
+ }), /*#__PURE__*/React.createElement("span", null, filterLabel[filterLookupKey || ''] || filterLabel[textLookupKey || '']))), /*#__PURE__*/React.createElement(S.SearchInner, {
119
+ hasValue: !!value,
120
+ alwaysHighlight: alwaysHighlight
121
+ }, /*#__PURE__*/React.createElement(Input, _extends({
122
+ placeholder: placeholder,
123
+ ref: inputRef,
124
+ value: value,
125
+ onChange: handleChangeValue,
126
+ onKeyDown: onKeyDown,
127
+ onFocus: function onFocus() {
128
+ return setIsInputFocused(true);
129
+ },
130
+ onBlur: function onBlur() {
131
+ return setIsInputFocused(false);
132
+ },
133
+ autoComplete: "off",
134
+ autoFocus: true,
135
+ disabled: disableInput
136
+ }, inputProps)))), /*#__PURE__*/React.createElement(SearchButton, {
137
+ inputOpen: isInputOpen,
138
+ hidden: !!value || !!filterLabel,
139
+ inputFocused: isInputFocused,
140
+ clickable: !alwaysExpanded,
141
+ onClick: handleSearchButtonClick
142
+ }), /*#__PURE__*/React.createElement(S.ClearButton, {
143
+ hidden: !value && !filterLabel
144
+ }, /*#__PURE__*/React.createElement(Icon, {
145
+ "data-testid": "clear",
146
+ onClick: handleClearValue,
147
+ component: /*#__PURE__*/React.createElement(Tooltip, {
148
+ title: clearTooltip
149
+ }, /*#__PURE__*/React.createElement(Close3M, null)),
150
+ color: theme.palette['red-600'],
151
+ size: 18
152
+ })));
153
+ };
154
+ export default SearchInput;
package/dist/Elements/SearchInput/SearchInput.types.d.ts CHANGED
@@ -1,14 +1,14 @@
1
- import React from 'react';
2
- import { InputProps } from 'antd/lib/input';
1
+ import type { ReactNode, KeyboardEvent } from 'react';
2
+ import type { InputProps } from 'antd/lib/input';
3
3
  export type SearchInputProps = {
4
4
  alwaysExpanded?: boolean;
5
5
  alwaysHighlight?: boolean;
6
- clearTooltip?: string | React.ReactNode;
6
+ clearTooltip?: ReactNode;
7
7
  closeOnClickOutside?: boolean;
8
8
  textLookupKey?: string;
9
9
  filterLookupKey?: string;
10
10
  filterLabel?: {
11
- icon?: React.ReactNode;
11
+ icon?: ReactNode;
12
12
  [key: string]: any;
13
13
  } | null;
14
14
  focusTrigger?: boolean;
@@ -16,7 +16,7 @@ export type SearchInputProps = {
16
16
  onChange: (value: string) => void;
17
17
  onClear: () => void;
18
18
  onClick?: () => void;
19
- onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
19
+ onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
20
20
  onToggle?: (isOpen: boolean) => void;
21
21
  placeholder?: string;
22
22
  toggleTrigger?: boolean;
@@ -25,9 +25,3 @@ export type SearchInputProps = {
25
25
  disableInput?: boolean;
26
26
  inputProps?: Partial<InputProps>;
27
27
  };
28
- export type SearchInputState = {
29
- inputOffset: number;
30
- isInputOpen: boolean;
31
- isResultChosen: boolean;
32
- isInputFocused: boolean;
33
- };
package/dist/Elements/SearchItems/SearchItems.js CHANGED
@@ -1,12 +1,7 @@
1
1
  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); }
2
- 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; }
3
- 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; }
4
- 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; }
5
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
6
- 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); }
7
2
  import React, { useMemo, useRef, useEffect, cloneElement } from 'react';
8
- import Menu from '@synerise/ds-menu';
9
3
  import { FixedSizeList as List } from 'react-window';
4
+ import Menu from '@synerise/ds-menu';
10
5
  var listStyle = {
11
6
  overflowX: 'unset',
12
7
  overflowY: 'unset'
@@ -23,8 +18,8 @@ var rowRenderer = function rowRenderer(_ref) {
23
18
  var item = data && data.items[index];
24
19
  var itemReturnedFromRenderer = data.itemRender(item);
25
20
  var rendererCustomStyles = itemReturnedFromRenderer && itemReturnedFromRenderer.props && itemReturnedFromRenderer.props.style || {};
26
- var mergedStyles = _objectSpread({}, rendererCustomStyles, {}, style);
27
- return cloneElement(itemReturnedFromRenderer, _objectSpread({}, itemReturnedFromRenderer.props, {
21
+ var mergedStyles = _extends({}, rendererCustomStyles, style);
22
+ return cloneElement(itemReturnedFromRenderer, _extends({}, itemReturnedFromRenderer.props, {
28
23
  style: mergedStyles,
29
24
  highlight: data.highlight,
30
25
  onClick: function onClick() {
@@ -78,6 +73,8 @@ var SearchItems = function SearchItems(_ref2) {
78
73
  style: listStyle,
79
74
  width: width
80
75
  }, listProps), rowRenderer);
81
- return renderInMenu ? /*#__PURE__*/React.createElement(Menu, null, list) : /*#__PURE__*/React.createElement(React.Fragment, null, list);
76
+ return renderInMenu ? /*#__PURE__*/React.createElement(Menu, {
77
+ tabIndex: -1
78
+ }, list) : /*#__PURE__*/React.createElement(React.Fragment, null, list);
82
79
  };
83
80
  export default SearchItems;
package/dist/Search.js CHANGED
@@ -1,10 +1,6 @@
1
- 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; }
2
- 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; }
1
+ 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); }
3
2
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
4
3
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
5
- 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; }
6
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
7
- 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); }
8
4
  import React from 'react';
9
5
  import onClickOutside from 'react-onclickoutside';
10
6
  import Scrollbar from '@synerise/ds-scrollbar';
@@ -28,9 +24,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
28
24
  var _this;
29
25
  _this = _React$PureComponent.call(this, props) || this;
30
26
  // eslint-disable-next-line react/state-in-constructor
31
- _defineProperty(_this, "wrapperRef", React.createRef());
27
+ _this.wrapperRef = React.createRef();
32
28
  // This handler is used for onClickOutside HOC
33
- _defineProperty(_this, "handleClickOutside", function () {
29
+ _this.handleClickOutside = function () {
34
30
  var _this$state = _this.state,
35
31
  isInputOpen = _this$state.isInputOpen,
36
32
  label = _this$state.label,
@@ -47,8 +43,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
47
43
  isListVisible: false,
48
44
  scrollbarScrollTop: 0
49
45
  });
50
- });
51
- _defineProperty(_this, "handleClearValue", function () {
46
+ };
47
+ _this.handleClearValue = function () {
52
48
  var _this$props2 = _this.props,
53
49
  parameters = _this$props2.parameters,
54
50
  recent = _this$props2.recent,
@@ -62,7 +58,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
62
58
  filteredSuggestions: suggestions,
63
59
  isResultChosen: false
64
60
  });
65
- });
61
+ };
66
62
  _this.state = {
67
63
  isInputOpen: !!props.value || !!props.parameterValue || !!props.alwaysExpanded,
68
64
  label: props.parameterValue ? props.parameters.find(function (param) {
@@ -303,7 +299,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
303
299
  },
304
300
  rowHeight: rowHeight,
305
301
  width: itemsListWidth,
306
- listProps: _objectSpread({
302
+ listProps: _extends({
307
303
  scrollTop: getParametersScrollTop({
308
304
  scrollTop: scrollbarScrollTop,
309
305
  recent: filteredRecent,
@@ -338,7 +334,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
338
334
  },
339
335
  rowHeight: suggestionsDisplayProps.rowHeight,
340
336
  width: itemsListWidth,
341
- listProps: _objectSpread({
337
+ listProps: _extends({
342
338
  scrollTop: scrollbarScrollTop
343
339
  }, suggestionsDisplayProps.listProps || {})
344
340
  }));
@@ -403,7 +399,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
403
399
  disableInput: disableInput,
404
400
  inputProps: inputProps,
405
401
  alwaysExpanded: alwaysExpanded,
406
- closeOnClickOutside: !alwaysExpanded && !isListVisible
402
+ closeOnClickOutside: !alwaysExpanded && !isListVisible && !value && !label
407
403
  });
408
404
  };
409
405
  _proto.render = function render() {
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom/extend-expect';
1
+ import '@testing-library/jest-dom';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-search",
3
- "version": "0.9.25",
3
+ "version": "0.10.0",
4
4
  "description": "Search UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,20 +34,20 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-button": "^0.22.3",
38
- "@synerise/ds-icon": "^0.70.0",
39
- "@synerise/ds-menu": "^0.20.12",
40
- "@synerise/ds-scrollbar": "^0.11.24",
41
- "@synerise/ds-tooltip": "^0.14.55",
42
- "@synerise/ds-utils": "^0.31.2",
37
+ "@synerise/ds-button": "^0.23.0",
38
+ "@synerise/ds-icon": "^0.71.0",
39
+ "@synerise/ds-menu": "^0.21.0",
40
+ "@synerise/ds-scrollbar": "^0.12.0",
41
+ "@synerise/ds-tooltip": "^0.15.0",
42
+ "@synerise/ds-utils": "^0.32.0",
43
43
  "react-onclickoutside": "^6.9.0",
44
44
  "react-window": "^1.8.5"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "@synerise/ds-core": "*",
48
- "antd": "4.7.0",
49
- "react": ">=16.9.0 <= 17.0.2",
50
- "styled-components": "5.0.1"
48
+ "antd": "4.24.16",
49
+ "react": ">=16.9.0 <= 18.3.1",
50
+ "styled-components": "^5.3.3"
51
51
  },
52
- "gitHead": "56e23cda61b7ddfe7da4669307183b105a500e1a"
52
+ "gitHead": "fbde34e126b492edaf148e469ab96247a891d6df"
53
53
  }