@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.
- package/CHANGELOG.md +8 -0
- package/dist/Elements/SearchButton/SearchButton.d.ts +2 -2
- package/dist/Elements/SearchButton/SearchButton.js +16 -28
- package/dist/Elements/SearchButton/SearchButton.types.js +1 -1
- package/dist/Elements/SearchHeader/SearchHeader.d.ts +2 -2
- package/dist/Elements/SearchHeader/SearchHeader.js +15 -15
- package/dist/Elements/SearchHeader/SearchHeader.types.js +1 -1
- package/dist/Elements/SearchInput/SearchInput.d.ts +2 -2
- package/dist/Elements/SearchInput/SearchInput.js +74 -117
- package/dist/Elements/SearchInput/SearchInput.types.d.ts +3 -3
- package/dist/Elements/SearchInput/SearchInput.types.js +1 -1
- package/dist/Elements/SearchItems/SearchItems.d.ts +2 -2
- package/dist/Elements/SearchItems/SearchItems.js +54 -58
- package/dist/Elements/SearchItems/SearchItems.types.d.ts +1 -1
- package/dist/Elements/SearchItems/SearchItems.types.js +1 -1
- package/dist/Elements/SearchRenderer/SearchRenderer.d.ts +1 -1
- package/dist/Elements/SearchRenderer/SearchRenderer.js +22 -33
- package/dist/Elements/SearchRenderer/SearchRenderer.types.d.ts +2 -2
- package/dist/Elements/SearchRenderer/SearchRenderer.types.js +1 -1
- package/dist/Elements/index.js +12 -4
- package/dist/Elements/utils/searchUtils.d.ts +1 -1
- package/dist/Elements/utils/searchUtils.js +16 -17
- package/dist/Search.d.ts +2 -3
- package/dist/Search.js +145 -230
- package/dist/Search.styles.d.ts +15 -15
- package/dist/Search.styles.js +59 -62
- package/dist/Search.types.d.ts +4 -4
- package/dist/Search.types.js +8 -7
- package/dist/assets/style/index-tn0RQdqM.css +0 -0
- package/dist/const.js +16 -7
- package/dist/index.js +14 -2
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +11 -11
package/dist/Search.styles.js
CHANGED
|
@@ -1,93 +1,90 @@
|
|
|
1
|
-
import styled, { keyframes } from
|
|
2
|
-
import { ANIMATION_DURATION, LABEL_LEFT_OFFSET
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import styled, { keyframes } from "styled-components";
|
|
2
|
+
import { MAX_FILTER_WIDTH, ANIMATION_DURATION, LABEL_LEFT_OFFSET } from "./const.js";
|
|
3
|
+
const openDropdownAnimation = /* @__PURE__ */ keyframes(["0%{opacity:0;overflow:hidden;}50%{opacity:0;overflow:hidden;}100%{opacity:1;}"]);
|
|
4
|
+
const SearchInputWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
5
5
|
displayName: "Searchstyles__SearchInputWrapper",
|
|
6
6
|
componentId: "sc-1w8jj1b-0"
|
|
7
7
|
})(["position:relative;direction:rtl;overflow-x:hidden;overflow-y:hidden;height:32px;"]);
|
|
8
|
-
|
|
8
|
+
const SearchWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
9
9
|
displayName: "Searchstyles__SearchWrapper",
|
|
10
10
|
componentId: "sc-1w8jj1b-1"
|
|
11
|
-
})(["", ";position:relative;direction:rtl;"],
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
})(["", ";position:relative;direction:rtl;"], (props) => !!props.$width && `
|
|
12
|
+
${props.inputOpen ? `width:${props.$width}px;` : `width:32px`};
|
|
13
|
+
`);
|
|
14
|
+
const LeftSide = /* @__PURE__ */ styled.span.withConfig({
|
|
15
15
|
displayName: "Searchstyles__LeftSide",
|
|
16
16
|
componentId: "sc-1w8jj1b-2"
|
|
17
|
-
})(["position:absolute;z-index:1;height:100%;align-items:center;display:", ";left:4px;"],
|
|
18
|
-
|
|
19
|
-
});
|
|
20
|
-
export var Filter = styled.div.withConfig({
|
|
17
|
+
})(["position:absolute;z-index:1;height:100%;align-items:center;display:", ";left:4px;"], (props) => props.isOpen ? "flex" : "none");
|
|
18
|
+
const Filter = /* @__PURE__ */ styled.div.withConfig({
|
|
21
19
|
displayName: "Searchstyles__Filter",
|
|
22
20
|
componentId: "sc-1w8jj1b-3"
|
|
23
|
-
})(["display:flex;align-items:center;color:", ";font-weight:500;max-width:", "px;direction:ltr;position:relative;padding-right:2px;span{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;}&::after{content:':';}.ds-icon{margin-left:4px;}svg{fill:", ";}"],
|
|
24
|
-
|
|
25
|
-
}, MAX_FILTER_WIDTH, function (props) {
|
|
26
|
-
return props.theme.palette['blue-600'];
|
|
27
|
-
});
|
|
28
|
-
export var Icon = styled.div.withConfig({
|
|
21
|
+
})(["display:flex;align-items:center;color:", ";font-weight:500;max-width:", "px;direction:ltr;position:relative;padding-right:2px;span{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;}&::after{content:':';}.ds-icon{margin-left:4px;}svg{fill:", ";}"], (props) => props.theme.palette["blue-600"], MAX_FILTER_WIDTH, (props) => props.theme.palette["blue-600"]);
|
|
22
|
+
const Icon = /* @__PURE__ */ styled.div.withConfig({
|
|
29
23
|
displayName: "Searchstyles__Icon",
|
|
30
24
|
componentId: "sc-1w8jj1b-4"
|
|
31
25
|
})(["padding:0 4px 0 8px;"]);
|
|
32
|
-
|
|
26
|
+
const Label = /* @__PURE__ */ styled.div.withConfig({
|
|
33
27
|
displayName: "Searchstyles__Label",
|
|
34
28
|
componentId: "sc-1w8jj1b-5"
|
|
35
|
-
})(["font-size:13px;font-weight:500;color:", ";"],
|
|
36
|
-
|
|
37
|
-
});
|
|
38
|
-
export var SearchButton = styled.div.withConfig({
|
|
29
|
+
})(["font-size:13px;font-weight:500;color:", ";"], (props) => props.theme.palette["blue-600"]);
|
|
30
|
+
const SearchButton = /* @__PURE__ */ styled.div.withConfig({
|
|
39
31
|
displayName: "Searchstyles__SearchButton",
|
|
40
32
|
componentId: "sc-1w8jj1b-6"
|
|
41
|
-
})(["position:absolute;", ";z-index:1;top:0;right:0;transition:width 0.5s ease-in-out;svg{fill:", " !important;}.btn-search-open:hover{background:transparent !important;}&&{", " button{padding:4px;transition:padding-right 0.15s ease-in-out,background 0.2s ease-in-out;", "}}"],
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return !props.clickable && "pointer-events:none !important;";
|
|
49
|
-
});
|
|
50
|
-
export var SearchInner = styled.div.withConfig({
|
|
33
|
+
})(["position:absolute;", ";z-index:1;top:0;right:0;transition:width 0.5s ease-in-out;svg{fill:", " !important;}.btn-search-open:hover{background:transparent !important;}&&{", " button{padding:4px;transition:padding-right 0.15s ease-in-out,background 0.2s ease-in-out;", "}}"], (props) => !props.clickable && `pointer-events:none !important;`, (props) => props.inputFocused && props.isOpen ? props.theme.palette["blue-600"] : props.theme.palette["grey-600"], (props) => !!props.isOpen && `
|
|
34
|
+
.btn-focus{
|
|
35
|
+
border-color: transparent;
|
|
36
|
+
box-shadow: none;
|
|
37
|
+
}
|
|
38
|
+
`, (props) => !props.clickable && `pointer-events:none !important;`);
|
|
39
|
+
const SearchInner = /* @__PURE__ */ styled.div.withConfig({
|
|
51
40
|
displayName: "Searchstyles__SearchInner",
|
|
52
41
|
componentId: "sc-1w8jj1b-7"
|
|
53
|
-
})(["direction:ltr;margin-bottom:0;", " input::placeholder{line-height:1.29;}"],
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
42
|
+
})(["direction:ltr;margin-bottom:0;", " input::placeholder{line-height:1.29;}"], (props) => (props.hasValue || props.alwaysHighlight) && `
|
|
43
|
+
input, input:hover{
|
|
44
|
+
box-shadow: inset 0 0 0 1px ${props.theme.palette["blue-600"]};
|
|
45
|
+
border-color: ${props.theme.palette["blue-600"]};
|
|
46
|
+
background-color: ${props.theme.palette["blue-050"]};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
`);
|
|
50
|
+
const SearchInputContent = /* @__PURE__ */ styled.div.withConfig({
|
|
57
51
|
displayName: "Searchstyles__SearchInputContent",
|
|
58
52
|
componentId: "sc-1w8jj1b-8"
|
|
59
|
-
})(["overflow:hidden;direction:rtl;transition:width ", "s ease-in-out;width:0;input{opacity:0;height:32px;}input.ant-input{transition:padding-left 0s ease-in-out !important;}&.is-open{width:100%;overflow:visible;input{color:", ";padding-left:", ";padding-right:30px;opacity:1;}}"], ANIMATION_DURATION,
|
|
60
|
-
|
|
61
|
-
}, function (props) {
|
|
62
|
-
return props.filterLabel && props.offset ? Math.round(props.offset + LABEL_LEFT_OFFSET) + "px" : '12px';
|
|
63
|
-
});
|
|
64
|
-
export var ClearButton = styled.div.withConfig({
|
|
53
|
+
})(["overflow:hidden;direction:rtl;transition:width ", "s ease-in-out;width:0;input{opacity:0;height:32px;}input.ant-input{transition:padding-left 0s ease-in-out !important;}&.is-open{width:100%;overflow:visible;input{color:", ";padding-left:", ";padding-right:30px;opacity:1;}}"], ANIMATION_DURATION, (props) => props.theme.palette["grey-700"], (props) => props.filterLabel && props.offset ? `${Math.round(props.offset + LABEL_LEFT_OFFSET)}px` : "12px");
|
|
54
|
+
const ClearButton = /* @__PURE__ */ styled.div.withConfig({
|
|
65
55
|
displayName: "Searchstyles__ClearButton",
|
|
66
56
|
componentId: "sc-1w8jj1b-9"
|
|
67
57
|
})(["position:absolute;z-index:1;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px 0 10px;"]);
|
|
68
|
-
|
|
58
|
+
const SearchDropdownContent = /* @__PURE__ */ styled.div.withConfig({
|
|
69
59
|
displayName: "Searchstyles__SearchDropdownContent",
|
|
70
60
|
componentId: "sc-1w8jj1b-10"
|
|
71
|
-
})(["position:absolute;top:40px;background:", ";max-height:", ";direction:ltr;opacity:0;display:none;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);box-sizing:border-box;transition:opacity 0.5s ease-in-out,width 0.5s ease-in-out;.ps__rail-y{.ps__thumb-y{transform:translateX(1px) !important;}}"],
|
|
72
|
-
|
|
73
|
-
}, function (props) {
|
|
74
|
-
return props.maxHeight + "px";
|
|
75
|
-
});
|
|
76
|
-
export var MenuHeader = styled.div.withConfig({
|
|
61
|
+
})(["position:absolute;top:40px;background:", ";max-height:", ";direction:ltr;opacity:0;display:none;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);box-sizing:border-box;transition:opacity 0.5s ease-in-out,width 0.5s ease-in-out;.ps__rail-y{.ps__thumb-y{transform:translateX(1px) !important;}}"], (props) => props.theme.palette.white, (props) => `${props.maxHeight}px`);
|
|
62
|
+
const MenuHeader = /* @__PURE__ */ styled.div.withConfig({
|
|
77
63
|
displayName: "Searchstyles__MenuHeader",
|
|
78
64
|
componentId: "sc-1w8jj1b-11"
|
|
79
|
-
})(["display:flex;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"],
|
|
80
|
-
|
|
81
|
-
});
|
|
82
|
-
export var HeaderIconWrapper = styled.div.withConfig({
|
|
65
|
+
})(["display:flex;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"], (props) => props.theme.palette["grey-500"]);
|
|
66
|
+
const HeaderIconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
83
67
|
displayName: "Searchstyles__HeaderIconWrapper",
|
|
84
68
|
componentId: "sc-1w8jj1b-12"
|
|
85
|
-
})(["& > .ds-icon > svg{fill:", ";}"],
|
|
86
|
-
|
|
87
|
-
});
|
|
88
|
-
export var SearchDropdownWrapper = styled.div.withConfig({
|
|
69
|
+
})(["& > .ds-icon > svg{fill:", ";}"], (props) => props.theme.palette["grey-400"]);
|
|
70
|
+
const SearchDropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
89
71
|
displayName: "Searchstyles__SearchDropdownWrapper",
|
|
90
72
|
componentId: "sc-1w8jj1b-13"
|
|
91
|
-
})(["width:0;& > .search-list-open{width:", ";animation:", " 0.3s ease-in-out 0s 1;opacity:1;display:initial;padding:8px 0 8px 8px;z-index:10;}"],
|
|
92
|
-
|
|
93
|
-
|
|
73
|
+
})(["width:0;& > .search-list-open{width:", ";animation:", " 0.3s ease-in-out 0s 1;opacity:1;display:initial;padding:8px 0 8px 8px;z-index:10;}"], (props) => props.dropdownWidth ? `${props.dropdownWidth}px` : "100%", openDropdownAnimation);
|
|
74
|
+
export {
|
|
75
|
+
ClearButton,
|
|
76
|
+
Filter,
|
|
77
|
+
HeaderIconWrapper,
|
|
78
|
+
Icon,
|
|
79
|
+
Label,
|
|
80
|
+
LeftSide,
|
|
81
|
+
MenuHeader,
|
|
82
|
+
SearchButton,
|
|
83
|
+
SearchDropdownContent,
|
|
84
|
+
SearchDropdownWrapper,
|
|
85
|
+
SearchInner,
|
|
86
|
+
SearchInputContent,
|
|
87
|
+
SearchInputWrapper,
|
|
88
|
+
SearchWrapper,
|
|
89
|
+
openDropdownAnimation
|
|
90
|
+
};
|
package/dist/Search.types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { InputProps } from 'antd/lib/input';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
import { ListProps } from '../../../../config/vitest/__mocks__/reactWindowMock.js';
|
|
4
|
+
import { 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/dist/Search.types.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
var SelectResultDataKeys = /* @__PURE__ */ ((SelectResultDataKeys2) => {
|
|
2
|
+
SelectResultDataKeys2["RECENT"] = "recent";
|
|
3
|
+
SelectResultDataKeys2["SUGGESTIONS"] = "suggestions";
|
|
4
|
+
return SelectResultDataKeys2;
|
|
5
|
+
})(SelectResultDataKeys || {});
|
|
6
|
+
export {
|
|
7
|
+
SelectResultDataKeys
|
|
8
|
+
};
|
|
File without changes
|
package/dist/const.js
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
const MENU_WIDTH_OFFSET = 17;
|
|
2
|
+
const INPUT_EXPAND_ANIMATION_DURATION = 100;
|
|
3
|
+
const SCROLLBAR_HEIGHT_OFFSET = 28;
|
|
4
|
+
const LIST_HEADER_HEIGHT = 42;
|
|
5
|
+
const LABEL_LEFT_OFFSET = 7;
|
|
6
|
+
const ANIMATION_DURATION = INPUT_EXPAND_ANIMATION_DURATION / 1e3;
|
|
7
|
+
const MAX_FILTER_WIDTH = 120;
|
|
8
|
+
export {
|
|
9
|
+
ANIMATION_DURATION,
|
|
10
|
+
INPUT_EXPAND_ANIMATION_DURATION,
|
|
11
|
+
LABEL_LEFT_OFFSET,
|
|
12
|
+
LIST_HEADER_HEIGHT,
|
|
13
|
+
MAX_FILTER_WIDTH,
|
|
14
|
+
MENU_WIDTH_OFFSET,
|
|
15
|
+
SCROLLBAR_HEIGHT_OFFSET
|
|
16
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { Search } from "./Search.js";
|
|
2
|
+
import { default as default2 } from "./Elements/SearchInput/SearchInput.js";
|
|
3
|
+
import { default as default3 } from "./Elements/SearchHeader/SearchHeader.js";
|
|
4
|
+
import { default as default4, default as default5, renderSearchList } from "./Elements/SearchItems/SearchItems.js";
|
|
5
|
+
import { default as default6 } from "./Elements/SearchButton/SearchButton.js";
|
|
6
|
+
export {
|
|
7
|
+
default6 as SearchButton,
|
|
8
|
+
default3 as SearchHeader,
|
|
9
|
+
default2 as SearchInput,
|
|
10
|
+
default4 as SearchItemList,
|
|
11
|
+
default5 as SearchItems,
|
|
12
|
+
Search as default,
|
|
13
|
+
renderSearchList
|
|
14
|
+
};
|
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-search",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.11",
|
|
4
4
|
"description": "Search UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-icon": "^1.15.
|
|
40
|
-
"@synerise/ds-list-item": "^1.4.
|
|
41
|
-
"@synerise/ds-menu": "^1.4.
|
|
42
|
-
"@synerise/ds-scrollbar": "^1.2.
|
|
43
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
44
|
-
"@synerise/ds-utils": "^1.7.
|
|
38
|
+
"@synerise/ds-button": "^1.5.19",
|
|
39
|
+
"@synerise/ds-icon": "^1.15.2",
|
|
40
|
+
"@synerise/ds-list-item": "^1.4.11",
|
|
41
|
+
"@synerise/ds-menu": "^1.4.14",
|
|
42
|
+
"@synerise/ds-scrollbar": "^1.2.18",
|
|
43
|
+
"@synerise/ds-tooltip": "^1.4.11",
|
|
44
|
+
"@synerise/ds-utils": "^1.7.1",
|
|
45
45
|
"react-onclickoutside": "^6.9.0",
|
|
46
46
|
"react-window": "^1.8.11"
|
|
47
47
|
},
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"react": ">=16.9.0 <= 18.3.1",
|
|
52
52
|
"styled-components": "^5.3.3"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
|
|
55
55
|
}
|