@synerise/ds-search 1.2.1 → 1.2.3
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.
- package/CHANGELOG.md +667 -2152
- package/dist/Elements/SearchButton/SearchButton.d.ts +1 -1
- package/dist/Elements/SearchButton/SearchButton.js +1 -1
- package/dist/Elements/SearchHeader/SearchHeader.d.ts +1 -1
- package/dist/Elements/SearchHeader/SearchHeader.js +1 -1
- package/dist/Elements/SearchInput/SearchInput.d.ts +1 -1
- package/dist/Elements/SearchInput/SearchInput.js +3 -3
- package/dist/Elements/SearchInput/SearchInput.types.d.ts +1 -1
- package/dist/Elements/SearchItems/SearchItems.d.ts +3 -3
- package/dist/Elements/SearchItems/SearchItems.js +1 -3
- package/dist/Elements/SearchItems/SearchItems.types.d.ts +8 -1
- package/dist/Elements/index.d.ts +1 -2
- package/dist/Elements/index.js +1 -3
- package/dist/Search.d.ts +1 -1
- package/dist/Search.js +10 -15
- package/dist/Search.types.d.ts +4 -4
- package/package.json +8 -8
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Icon, { SearchM } from '@synerise/ds-icon';
|
|
3
2
|
import Button from '@synerise/ds-button';
|
|
3
|
+
import Icon, { SearchM } from '@synerise/ds-icon';
|
|
4
4
|
import * as S from '../../Search.styles';
|
|
5
5
|
var SearchButton = function SearchButton(_ref) {
|
|
6
6
|
var inputOpen = _ref.inputOpen,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
|
|
3
2
|
import Icon, { InfoFillS } from '@synerise/ds-icon';
|
|
3
|
+
import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
|
|
4
4
|
import * as S from '../../Search.styles';
|
|
5
5
|
var SearchHeader = function SearchHeader(_ref) {
|
|
6
6
|
var headerText = _ref.headerText,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SearchInputProps } from './SearchInput.types';
|
|
2
|
+
import { type 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,10 +1,10 @@
|
|
|
1
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, { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
3
2
|
import Input from 'antd/lib/input';
|
|
4
|
-
import
|
|
5
|
-
import { useOnClickOutside, usePrevious } from '@synerise/ds-utils';
|
|
3
|
+
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
6
4
|
import { theme } from '@synerise/ds-core';
|
|
7
5
|
import Icon, { Close3M } from '@synerise/ds-icon';
|
|
6
|
+
import Tooltip from '@synerise/ds-tooltip';
|
|
7
|
+
import { useOnClickOutside, usePrevious } from '@synerise/ds-utils';
|
|
8
8
|
import * as S from '../../Search.styles';
|
|
9
9
|
import SearchButton from '../SearchButton/SearchButton';
|
|
10
10
|
var SearchInput = function SearchInput(_ref) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ReactNode, KeyboardEvent } from 'react';
|
|
2
1
|
import type { InputProps } from 'antd/lib/input';
|
|
2
|
+
import type { KeyboardEvent, ReactNode } from 'react';
|
|
3
3
|
import type { TooltipProps } from '@synerise/ds-tooltip';
|
|
4
4
|
export type SearchInputProps = {
|
|
5
5
|
alwaysExpanded?: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { SearchItemListProps } from './SearchItems.types';
|
|
3
|
-
export declare function renderSearchList<V
|
|
1
|
+
import React, { type ReactElement, type ReactNode } from 'react';
|
|
2
|
+
import { type SearchItemListProps } from './SearchItems.types';
|
|
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,13 +1,11 @@
|
|
|
1
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, {
|
|
2
|
+
import React, { cloneElement, useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import { FixedSizeList as List } from 'react-window';
|
|
4
4
|
import Menu from '@synerise/ds-menu';
|
|
5
5
|
var listStyle = {
|
|
6
6
|
overflowX: 'unset',
|
|
7
7
|
overflowY: 'unset'
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
9
|
export function renderSearchList(props, children) {
|
|
12
10
|
return /*#__PURE__*/React.createElement(SearchItems, props, children);
|
|
13
11
|
}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { ListProps } from 'react-window';
|
|
2
|
+
import { type ListProps } from 'react-window';
|
|
3
3
|
type ListPropsEnhanced = Partial<ListProps> & {
|
|
4
4
|
scrollTop?: number;
|
|
5
5
|
};
|
|
6
6
|
export type SearchItemListProps<T> = {
|
|
7
7
|
data: T[] | undefined;
|
|
8
8
|
highlight?: string;
|
|
9
|
+
/**
|
|
10
|
+
* @description it is STRONGLY discouraged to use <Menu.Item> in itemRender, especially when the results are wrapped in a virtualised list
|
|
11
|
+
*/
|
|
9
12
|
itemRender: (item: T) => JSX.Element;
|
|
10
13
|
listProps?: ListPropsEnhanced;
|
|
11
14
|
onItemClick?: (e: T) => void;
|
|
@@ -13,6 +16,10 @@ export type SearchItemListProps<T> = {
|
|
|
13
16
|
width: number | string;
|
|
14
17
|
visibleRows?: number;
|
|
15
18
|
height?: number;
|
|
19
|
+
/**
|
|
20
|
+
* @description - set to false if items returned itemRender do NOT require being wraped in an antd <Menu> wrapper component.
|
|
21
|
+
* @deprecated - this prop will be removed once all implementations stop using <Menu.Item> in itemRender
|
|
22
|
+
*/
|
|
16
23
|
renderInMenu?: boolean;
|
|
17
24
|
};
|
|
18
25
|
export {};
|
package/dist/Elements/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { default as SearchInput } from './SearchInput/SearchInput';
|
|
2
2
|
export { default as SearchHeader } from './SearchHeader/SearchHeader';
|
|
3
|
-
export { default as SearchItemList } from './SearchItems/SearchItems';
|
|
4
|
-
export { default as SearchItems, renderSearchList } from './SearchItems/SearchItems';
|
|
3
|
+
export { default as SearchItemList, default as SearchItems, renderSearchList, } from './SearchItems/SearchItems';
|
|
5
4
|
export { default as SearchButton } from './SearchButton/SearchButton';
|
package/dist/Elements/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
/* eslint-disable import/prefer-default-export */
|
|
2
1
|
export { default as SearchInput } from './SearchInput/SearchInput';
|
|
3
2
|
export { default as SearchHeader } from './SearchHeader/SearchHeader';
|
|
4
|
-
export { default as SearchItemList } from './SearchItems/SearchItems';
|
|
5
|
-
export { default as SearchItems, renderSearchList } from './SearchItems/SearchItems';
|
|
3
|
+
export { default as SearchItemList, default as SearchItems, renderSearchList } from './SearchItems/SearchItems';
|
|
6
4
|
export { default as SearchButton } from './SearchButton/SearchButton';
|
package/dist/Search.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type AnyObject, type SearchProps, type SearchState, SelectResultDataKeys } from './Search.types';
|
|
2
3
|
import './style/index.less';
|
|
3
|
-
import { SearchProps, SearchState, SelectResultDataKeys, AnyObject } from './Search.types';
|
|
4
4
|
declare class Search extends React.PureComponent<SearchProps<AnyObject, AnyObject>, SearchState<AnyObject>> {
|
|
5
5
|
private wrapperRef;
|
|
6
6
|
constructor(props: SearchProps<AnyObject, AnyObject>);
|
package/dist/Search.js
CHANGED
|
@@ -5,12 +5,12 @@ import React from 'react';
|
|
|
5
5
|
import onClickOutside from 'react-onclickoutside';
|
|
6
6
|
import Scrollbar from '@synerise/ds-scrollbar';
|
|
7
7
|
import { focusWithArrowKeys } from '@synerise/ds-utils';
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
8
|
+
import { SearchHeader, SearchInput, SearchItems } from './Elements';
|
|
9
|
+
import { getAllElementsFiltered, hasSomeElement, hasSomeElementFiltered } from './Elements/utils/searchUtils';
|
|
10
10
|
import * as S from './Search.styles';
|
|
11
11
|
import { SelectResultDataKeys } from './Search.types';
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
12
|
+
import { INPUT_EXPAND_ANIMATION_DURATION, LIST_HEADER_HEIGHT, MENU_WIDTH_OFFSET, SCROLLBAR_HEIGHT_OFFSET } from './const';
|
|
13
|
+
import "./style/index.css";
|
|
14
14
|
var getParametersScrollTop = function getParametersScrollTop(_ref) {
|
|
15
15
|
var scrollTop = _ref.scrollTop,
|
|
16
16
|
rowHeight = _ref.rowHeight,
|
|
@@ -89,31 +89,26 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
89
89
|
parameterValue = _this$props3.parameterValue;
|
|
90
90
|
if (prevProps.value !== value && !value || prevProps.parameterValue && !parameterValue) {
|
|
91
91
|
this.handleChange(value);
|
|
92
|
-
// eslint-disable-next-line react/no-did-update-set-state
|
|
93
92
|
this.setState({
|
|
94
93
|
isResultChosen: false
|
|
95
94
|
});
|
|
96
95
|
}
|
|
97
96
|
if (prevProps.recent.length !== recent.length) {
|
|
98
|
-
// eslint-disable-next-line react/no-did-update-set-state
|
|
99
97
|
this.setState({
|
|
100
98
|
filteredRecent: getAllElementsFiltered(recent, value, textLookupConfig.recent)
|
|
101
99
|
});
|
|
102
100
|
}
|
|
103
101
|
if (prevProps.parameters.length !== parameters.length) {
|
|
104
|
-
// eslint-disable-next-line react/no-did-update-set-state
|
|
105
102
|
this.setState({
|
|
106
103
|
filteredParameters: parameterValue ? parameters : getAllElementsFiltered(parameters, value, textLookupConfig.parameters)
|
|
107
104
|
});
|
|
108
105
|
}
|
|
109
106
|
if (suggestions && ((_prevProps$suggestion = prevProps.suggestions) == null ? void 0 : _prevProps$suggestion.length) !== suggestions.length) {
|
|
110
|
-
// eslint-disable-next-line react/no-did-update-set-state
|
|
111
107
|
this.setState({
|
|
112
108
|
filteredSuggestions: getAllElementsFiltered(suggestions, value, textLookupConfig.suggestions)
|
|
113
109
|
});
|
|
114
110
|
}
|
|
115
111
|
if (hideLabel && prevProps.hideLabel !== hideLabel) {
|
|
116
|
-
// eslint-disable-next-line react/no-did-update-set-state
|
|
117
112
|
this.setState({
|
|
118
113
|
label: null,
|
|
119
114
|
isResultChosen: false
|
|
@@ -226,14 +221,11 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
226
221
|
});
|
|
227
222
|
if (filterLookupKey && item[filterLookupKey]) {
|
|
228
223
|
onValueChange(item[textLookupConfig.parameters]);
|
|
229
|
-
|
|
230
|
-
// @ts-ignore
|
|
231
224
|
onParameterValueChange(item[filterLookupKey], item);
|
|
232
225
|
this.setState({
|
|
233
226
|
isResultChosen: true
|
|
234
227
|
});
|
|
235
228
|
} else {
|
|
236
|
-
// @ts-ignore
|
|
237
229
|
onParameterValueChange(item[textLookupConfig.parameters], item);
|
|
238
230
|
}
|
|
239
231
|
};
|
|
@@ -262,7 +254,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
262
254
|
return _this2.selectResult(item, SelectResultDataKeys.RECENT);
|
|
263
255
|
},
|
|
264
256
|
rowHeight: rowHeight,
|
|
265
|
-
width: itemsListWidth
|
|
257
|
+
width: itemsListWidth,
|
|
258
|
+
renderInMenu: false
|
|
266
259
|
}));
|
|
267
260
|
};
|
|
268
261
|
_proto.renderParameters = function renderParameters() {
|
|
@@ -303,7 +296,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
303
296
|
recent: filteredRecent,
|
|
304
297
|
rowHeight: recentDisplayProps.rowHeight
|
|
305
298
|
})
|
|
306
|
-
}, listProps || {})
|
|
299
|
+
}, listProps || {}),
|
|
300
|
+
renderInMenu: false
|
|
307
301
|
}));
|
|
308
302
|
};
|
|
309
303
|
_proto.renderSuggestions = function renderSuggestions() {
|
|
@@ -334,7 +328,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
334
328
|
width: itemsListWidth,
|
|
335
329
|
listProps: _extends({
|
|
336
330
|
scrollTop: scrollbarScrollTop
|
|
337
|
-
}, suggestionsDisplayProps.listProps || {})
|
|
331
|
+
}, suggestionsDisplayProps.listProps || {}),
|
|
332
|
+
renderInMenu: false
|
|
338
333
|
}));
|
|
339
334
|
};
|
|
340
335
|
_proto.renderInputWrapper = function renderInputWrapper() {
|
package/dist/Search.types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { TooltipProps } from '@synerise/ds-tooltip';
|
|
1
|
+
import { type InputProps } from 'antd/lib/input';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import { type ListProps } from 'react-window';
|
|
4
|
+
import { type TooltipProps } from '@synerise/ds-tooltip';
|
|
5
5
|
export type AnyObject = Record<string, any>;
|
|
6
6
|
export type DataSetProps = {
|
|
7
7
|
itemRender: (item: any) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-search",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "Search UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-button": "^1.4.
|
|
38
|
-
"@synerise/ds-icon": "^1.5.
|
|
39
|
-
"@synerise/ds-menu": "^1.0.
|
|
40
|
-
"@synerise/ds-scrollbar": "^1.1.
|
|
41
|
-
"@synerise/ds-tooltip": "^1.1.
|
|
42
|
-
"@synerise/ds-utils": "^1.3.
|
|
37
|
+
"@synerise/ds-button": "^1.4.3",
|
|
38
|
+
"@synerise/ds-icon": "^1.5.4",
|
|
39
|
+
"@synerise/ds-menu": "^1.0.15",
|
|
40
|
+
"@synerise/ds-scrollbar": "^1.1.2",
|
|
41
|
+
"@synerise/ds-tooltip": "^1.1.12",
|
|
42
|
+
"@synerise/ds-utils": "^1.3.1",
|
|
43
43
|
"react-onclickoutside": "^6.9.0",
|
|
44
44
|
"react-window": "^1.8.5"
|
|
45
45
|
},
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"react": ">=16.9.0 <= 18.3.1",
|
|
50
50
|
"styled-components": "^5.3.3"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "8db1900bf3f7b0782c834ff82f628199530cd934"
|
|
53
53
|
}
|