@snack-uikit/search 0.8.27 → 0.8.28-preview-71543426.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.
- package/dist/cjs/components/Search/Search.js +68 -0
- package/dist/cjs/components/Search/index.js +25 -0
- package/dist/cjs/components/SearchAutocomplete/SearchAutocomplete.js +139 -0
- package/dist/cjs/components/SearchAutocomplete/index.js +25 -0
- package/dist/cjs/components/SearchDecorator/SearchDecorator.js +42 -0
- package/dist/cjs/components/SearchDecorator/index.js +25 -0
- package/dist/cjs/components/SearchFieldText/SearchFieldText.js +52 -0
- package/dist/cjs/components/SearchFieldText/index.js +25 -0
- package/dist/cjs/components/index.js +25 -0
- package/dist/cjs/constants.js +24 -0
- package/dist/cjs/index.js +25 -0
- package/dist/cjs/types.js +5 -0
- package/dist/esm/components/Search/Search.d.ts +18 -0
- package/dist/esm/components/SearchAutocomplete/SearchAutocomplete.d.ts +22 -0
- package/dist/esm/components/SearchAutocomplete/index.js +1 -0
- package/dist/esm/components/SearchAutocomplete/styles.module.css +12 -0
- package/dist/esm/components/SearchDecorator/SearchDecorator.d.ts +9 -0
- package/dist/esm/components/SearchDecorator/index.js +1 -0
- package/dist/esm/components/SearchDecorator/styles.module.css +47 -0
- package/dist/esm/components/SearchFieldText/SearchFieldText.d.ts +9 -0
- package/dist/esm/components/SearchFieldText/index.js +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/constants.d.ts +18 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/types.d.ts +3 -0
- package/package.json +10 -8
- /package/dist/{components → cjs/components}/Search/Search.d.ts +0 -0
- /package/dist/{components → cjs/components}/Search/index.d.ts +0 -0
- /package/dist/{components → cjs/components}/SearchAutocomplete/SearchAutocomplete.d.ts +0 -0
- /package/dist/{components → cjs/components}/SearchAutocomplete/index.d.ts +0 -0
- /package/dist/{components → cjs/components}/SearchAutocomplete/styles.module.css +0 -0
- /package/dist/{components → cjs/components}/SearchDecorator/SearchDecorator.d.ts +0 -0
- /package/dist/{components → cjs/components}/SearchDecorator/index.d.ts +0 -0
- /package/dist/{components → cjs/components}/SearchDecorator/styles.module.css +0 -0
- /package/dist/{components → cjs/components}/SearchFieldText/SearchFieldText.d.ts +0 -0
- /package/dist/{components → cjs/components}/SearchFieldText/index.d.ts +0 -0
- /package/dist/{components → cjs/components}/index.d.ts +0 -0
- /package/dist/{constants.d.ts → cjs/constants.d.ts} +0 -0
- /package/dist/{index.d.ts → cjs/index.d.ts} +0 -0
- /package/dist/{types.d.ts → cjs/types.d.ts} +0 -0
- /package/dist/{components → esm/components}/Search/Search.js +0 -0
- /package/dist/{components/Search/index.js → esm/components/Search/index.d.ts} +0 -0
- /package/dist/{components → esm/components/Search}/index.js +0 -0
- /package/dist/{components → esm/components}/SearchAutocomplete/SearchAutocomplete.js +0 -0
- /package/dist/{components/SearchAutocomplete/index.js → esm/components/SearchAutocomplete/index.d.ts} +0 -0
- /package/dist/{components → esm/components}/SearchDecorator/SearchDecorator.js +0 -0
- /package/dist/{components/SearchDecorator/index.js → esm/components/SearchDecorator/index.d.ts} +0 -0
- /package/dist/{components → esm/components}/SearchFieldText/SearchFieldText.js +0 -0
- /package/dist/{components/SearchFieldText/index.js → esm/components/SearchFieldText/index.d.ts} +0 -0
- /package/dist/{constants.js → esm/constants.js} +0 -0
- /package/dist/{index.js → esm/index.d.ts} +0 -0
- /package/dist/{types.js → esm/types.js} +0 -0
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.Search = void 0;
|
|
15
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
+
const react_1 = require("react");
|
|
17
|
+
const utils_1 = require("@snack-uikit/utils");
|
|
18
|
+
const constants_1 = require("../../constants");
|
|
19
|
+
const SearchAutocomplete_1 = require("../SearchAutocomplete");
|
|
20
|
+
const SearchFieldText_1 = require("../SearchFieldText");
|
|
21
|
+
exports.Search = (0, react_1.forwardRef)(function Search(_a, ref) {
|
|
22
|
+
var {
|
|
23
|
+
size = constants_1.SIZE.S
|
|
24
|
+
} = _a,
|
|
25
|
+
props = __rest(_a, ["size"]);
|
|
26
|
+
const {
|
|
27
|
+
value,
|
|
28
|
+
onChange,
|
|
29
|
+
onBlur,
|
|
30
|
+
onFocus,
|
|
31
|
+
outline,
|
|
32
|
+
loading,
|
|
33
|
+
placeholder,
|
|
34
|
+
onSubmit,
|
|
35
|
+
className
|
|
36
|
+
} = props,
|
|
37
|
+
rest = __rest(props, ["value", "onChange", "onBlur", "onFocus", "outline", "loading", "placeholder", "onSubmit", "className"]);
|
|
38
|
+
const supportProps = (0, utils_1.extractSupportProps)(rest);
|
|
39
|
+
if (props.autocomplete) {
|
|
40
|
+
return (0, jsx_runtime_1.jsx)(SearchAutocomplete_1.SearchAutocomplete, Object.assign({
|
|
41
|
+
value: value,
|
|
42
|
+
onChange: onChange,
|
|
43
|
+
options: props.options,
|
|
44
|
+
onBlur: onBlur,
|
|
45
|
+
onFocus: onFocus,
|
|
46
|
+
onSubmit: onSubmit,
|
|
47
|
+
size: size,
|
|
48
|
+
outline: outline,
|
|
49
|
+
loading: loading,
|
|
50
|
+
placeholder: placeholder,
|
|
51
|
+
className: className,
|
|
52
|
+
ref: ref
|
|
53
|
+
}, supportProps));
|
|
54
|
+
}
|
|
55
|
+
return (0, jsx_runtime_1.jsx)(SearchFieldText_1.SearchFieldText, Object.assign({
|
|
56
|
+
value: value,
|
|
57
|
+
onChange: onChange,
|
|
58
|
+
onBlur: onBlur,
|
|
59
|
+
onFocus: onFocus,
|
|
60
|
+
onSubmit: onSubmit,
|
|
61
|
+
size: size,
|
|
62
|
+
outline: outline,
|
|
63
|
+
loading: loading,
|
|
64
|
+
placeholder: placeholder,
|
|
65
|
+
className: className,
|
|
66
|
+
ref: ref
|
|
67
|
+
}, supportProps));
|
|
68
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./Search"), exports);
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
|
|
12
|
+
return mod && mod.__esModule ? mod : {
|
|
13
|
+
"default": mod
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
exports.SearchAutocomplete = void 0;
|
|
20
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
21
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
22
|
+
const merge_refs_1 = __importDefault(require("merge-refs"));
|
|
23
|
+
const react_1 = require("react");
|
|
24
|
+
const list_1 = require("@snack-uikit/list");
|
|
25
|
+
const search_private_1 = require("@snack-uikit/search-private");
|
|
26
|
+
const constants_1 = require("../../constants");
|
|
27
|
+
const SearchDecorator_1 = require("../SearchDecorator");
|
|
28
|
+
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
29
|
+
exports.SearchAutocomplete = (0, react_1.forwardRef)(function SearchAutocomplete(_a, ref) {
|
|
30
|
+
var {
|
|
31
|
+
size = constants_1.SIZE.S,
|
|
32
|
+
value,
|
|
33
|
+
onChange,
|
|
34
|
+
placeholder,
|
|
35
|
+
options = [],
|
|
36
|
+
loading,
|
|
37
|
+
outline,
|
|
38
|
+
onSubmit,
|
|
39
|
+
onFocus,
|
|
40
|
+
className
|
|
41
|
+
} = _a,
|
|
42
|
+
rest = __rest(_a, ["size", "value", "onChange", "placeholder", "options", "loading", "outline", "onSubmit", "onFocus", "className"]);
|
|
43
|
+
const scrollRef = (0, react_1.useRef)(null);
|
|
44
|
+
const localRef = (0, react_1.useRef)(null);
|
|
45
|
+
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
46
|
+
const handleOptionKeyDown = (0, react_1.useCallback)(e => {
|
|
47
|
+
var _a, _b;
|
|
48
|
+
if (e.key.length === 1) {
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
(_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
51
|
+
(_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scroll(0, 0);
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
// ignoring special keys (tab, arrows, backspace, etc.)
|
|
55
|
+
if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {
|
|
56
|
+
e.stopPropagation();
|
|
57
|
+
} else {
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
}
|
|
60
|
+
}, [scrollRef]);
|
|
61
|
+
const handleKeyDown = cb => e => {
|
|
62
|
+
if (e.key === ' ') {
|
|
63
|
+
e.stopPropagation();
|
|
64
|
+
}
|
|
65
|
+
if (e.key.length === 1) {
|
|
66
|
+
setIsOpen(true);
|
|
67
|
+
}
|
|
68
|
+
cb === null || cb === void 0 ? void 0 : cb(e);
|
|
69
|
+
};
|
|
70
|
+
const items = (0, react_1.useMemo)(() => options.map((_a, idx) => {
|
|
71
|
+
var _b;
|
|
72
|
+
var {
|
|
73
|
+
onClick
|
|
74
|
+
} = _a,
|
|
75
|
+
item = __rest(_a, ["onClick"]);
|
|
76
|
+
return Object.assign(Object.assign({}, item), {
|
|
77
|
+
onClick: e => {
|
|
78
|
+
var _a;
|
|
79
|
+
// Dirty hack: by default list items call onClick by 'Space' || 'Enter'
|
|
80
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
81
|
+
// @ts-expect-error
|
|
82
|
+
if (!(e.type === 'keydown' && (e === null || e === void 0 ? void 0 : e.key) === ' ')) {
|
|
83
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
84
|
+
if (item.id) {
|
|
85
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(String(item.id));
|
|
86
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(String(item.id));
|
|
87
|
+
} else if (typeof item.content === 'string') {
|
|
88
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(item.content);
|
|
89
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(item.content);
|
|
90
|
+
}
|
|
91
|
+
setIsOpen(false);
|
|
92
|
+
(_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
onKeyDown: handleOptionKeyDown,
|
|
96
|
+
'data-test-id': `${constants_1.TEST_IDS.option}__${(_b = item.id) !== null && _b !== void 0 ? _b : idx}`
|
|
97
|
+
});
|
|
98
|
+
}), [handleOptionKeyDown, onChange, onSubmit, options]);
|
|
99
|
+
return (0, jsx_runtime_1.jsx)("div", Object.assign({
|
|
100
|
+
className: (0, classnames_1.default)(styles_module_scss_1.default.wrap, className)
|
|
101
|
+
}, rest, {
|
|
102
|
+
children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
|
|
103
|
+
open: isOpen && options.length > 0,
|
|
104
|
+
scroll: true,
|
|
105
|
+
size: size,
|
|
106
|
+
onOpenChange: setIsOpen,
|
|
107
|
+
"data-test-id": constants_1.TEST_IDS.droplist,
|
|
108
|
+
triggerClassName: styles_module_scss_1.default.triggerClassName,
|
|
109
|
+
scrollRef: scrollRef,
|
|
110
|
+
triggerElemRef: localRef,
|
|
111
|
+
items: items,
|
|
112
|
+
loading: loading,
|
|
113
|
+
children: _ref => {
|
|
114
|
+
let {
|
|
115
|
+
onKeyDown
|
|
116
|
+
} = _ref;
|
|
117
|
+
var _a;
|
|
118
|
+
return (0, jsx_runtime_1.jsx)(SearchDecorator_1.SearchDecorator, {
|
|
119
|
+
size: size,
|
|
120
|
+
outline: outline || undefined,
|
|
121
|
+
focused: isOpen && Boolean((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) || undefined,
|
|
122
|
+
"data-test-id": constants_1.TEST_IDS.decorator,
|
|
123
|
+
children: (0, jsx_runtime_1.jsx)(search_private_1.SearchPrivate, {
|
|
124
|
+
loading: loading,
|
|
125
|
+
value: value,
|
|
126
|
+
onChange: onChange,
|
|
127
|
+
onSubmit: onSubmit,
|
|
128
|
+
placeholder: placeholder,
|
|
129
|
+
ref: (0, merge_refs_1.default)(ref, localRef),
|
|
130
|
+
onKeyDown: handleKeyDown(onKeyDown),
|
|
131
|
+
onFocus: onFocus,
|
|
132
|
+
size: size,
|
|
133
|
+
"data-test-id": constants_1.PRIVATE_SEARCH_TEST_IDS.field
|
|
134
|
+
})
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
})
|
|
138
|
+
}));
|
|
139
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./SearchAutocomplete"), exports);
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
|
|
12
|
+
return mod && mod.__esModule ? mod : {
|
|
13
|
+
"default": mod
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
exports.SearchDecorator = SearchDecorator;
|
|
20
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
21
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
22
|
+
const utils_1 = require("@snack-uikit/utils");
|
|
23
|
+
const constants_1 = require("../../constants");
|
|
24
|
+
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
25
|
+
function SearchDecorator(_a) {
|
|
26
|
+
var {
|
|
27
|
+
children,
|
|
28
|
+
outline,
|
|
29
|
+
size = constants_1.SIZE.S,
|
|
30
|
+
focused,
|
|
31
|
+
className
|
|
32
|
+
} = _a,
|
|
33
|
+
rest = __rest(_a, ["children", "outline", "size", "focused", "className"]);
|
|
34
|
+
return (0, jsx_runtime_1.jsx)("div", Object.assign({
|
|
35
|
+
className: (0, classnames_1.default)(styles_module_scss_1.default.decorator, className),
|
|
36
|
+
"data-outline": outline || undefined,
|
|
37
|
+
"data-size": size,
|
|
38
|
+
"data-focused": focused || undefined
|
|
39
|
+
}, (0, utils_1.extractSupportProps)(rest), {
|
|
40
|
+
children: children
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./SearchDecorator"), exports);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.SearchFieldText = void 0;
|
|
15
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
+
const react_1 = require("react");
|
|
17
|
+
const search_private_1 = require("@snack-uikit/search-private");
|
|
18
|
+
const constants_1 = require("../../constants");
|
|
19
|
+
const SearchDecorator_1 = require("../SearchDecorator");
|
|
20
|
+
exports.SearchFieldText = (0, react_1.forwardRef)(function SearchFieldText(_a, ref) {
|
|
21
|
+
var {
|
|
22
|
+
value,
|
|
23
|
+
onChange,
|
|
24
|
+
onBlur,
|
|
25
|
+
onFocus,
|
|
26
|
+
size = constants_1.SIZE.S,
|
|
27
|
+
outline,
|
|
28
|
+
loading,
|
|
29
|
+
placeholder,
|
|
30
|
+
onSubmit,
|
|
31
|
+
className
|
|
32
|
+
} = _a,
|
|
33
|
+
rest = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "size", "outline", "loading", "placeholder", "onSubmit", "className"]);
|
|
34
|
+
return (0, jsx_runtime_1.jsx)(SearchDecorator_1.SearchDecorator, Object.assign({
|
|
35
|
+
outline: outline,
|
|
36
|
+
size: size,
|
|
37
|
+
className: className
|
|
38
|
+
}, rest, {
|
|
39
|
+
children: (0, jsx_runtime_1.jsx)(search_private_1.SearchPrivate, {
|
|
40
|
+
ref: ref,
|
|
41
|
+
size: size,
|
|
42
|
+
value: value,
|
|
43
|
+
onChange: onChange,
|
|
44
|
+
onBlur: onBlur,
|
|
45
|
+
onFocus: onFocus,
|
|
46
|
+
onSubmit: onSubmit,
|
|
47
|
+
placeholder: placeholder,
|
|
48
|
+
loading: loading,
|
|
49
|
+
"data-test-id": constants_1.PRIVATE_SEARCH_TEST_IDS.field
|
|
50
|
+
})
|
|
51
|
+
}));
|
|
52
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./SearchFieldText"), exports);
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./Search"), exports);
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.PRIVATE_SEARCH_TEST_IDS = exports.TEST_IDS = exports.SIZE = void 0;
|
|
7
|
+
exports.SIZE = {
|
|
8
|
+
S: 's',
|
|
9
|
+
M: 'm',
|
|
10
|
+
L: 'l'
|
|
11
|
+
};
|
|
12
|
+
exports.TEST_IDS = {
|
|
13
|
+
main: 'search',
|
|
14
|
+
decorator: 'search__decorator',
|
|
15
|
+
droplist: 'search__droplist',
|
|
16
|
+
option: 'search__option'
|
|
17
|
+
};
|
|
18
|
+
exports.PRIVATE_SEARCH_TEST_IDS = {
|
|
19
|
+
field: 'search__field',
|
|
20
|
+
input: 'search__field-input',
|
|
21
|
+
iconSun: 'search__icon-sun',
|
|
22
|
+
iconSearch: 'search__icon-search',
|
|
23
|
+
buttonClearValue: 'button-clear-value'
|
|
24
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./components"), exports);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { SearchPrivateProps } from '@snack-uikit/search-private';
|
|
2
|
+
import { SearchAutocompleteProps } from '../SearchAutocomplete';
|
|
3
|
+
export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown' | 'tabIndex'> & {
|
|
4
|
+
/** Внешний бордер */
|
|
5
|
+
outline?: boolean;
|
|
6
|
+
} & ((Pick<SearchAutocompleteProps, 'options'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Работа в режиме Autocomplete в значении true
|
|
9
|
+
*
|
|
10
|
+
* Работа в режиме FieldText в значении false | undefined
|
|
11
|
+
*/
|
|
12
|
+
autocomplete: true;
|
|
13
|
+
}) | {
|
|
14
|
+
autocomplete?: false;
|
|
15
|
+
/** В режиме FieldText options отсутсвуют */
|
|
16
|
+
options?: never;
|
|
17
|
+
});
|
|
18
|
+
export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { BaseItemProps } from '@snack-uikit/list';
|
|
2
|
+
import { SearchPrivateProps } from '@snack-uikit/search-private';
|
|
3
|
+
export type SearchAutocompleteProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
|
|
4
|
+
/**
|
|
5
|
+
* Элементы выпадающие в Droplist в режиме Autocomplete.
|
|
6
|
+
*
|
|
7
|
+
* На нажатие 'Space', 'Enter' или клике по элементу будет вызываться onSubmit.
|
|
8
|
+
*/
|
|
9
|
+
options: BaseItemProps[];
|
|
10
|
+
/** Внешний бордер */
|
|
11
|
+
outline?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const SearchAutocomplete: import("react").ForwardRefExoticComponent<Omit<SearchPrivateProps, "onKeyDown"> & {
|
|
14
|
+
/**
|
|
15
|
+
* Элементы выпадающие в Droplist в режиме Autocomplete.
|
|
16
|
+
*
|
|
17
|
+
* На нажатие 'Space', 'Enter' или клике по элементу будет вызываться onSubmit.
|
|
18
|
+
*/
|
|
19
|
+
options: BaseItemProps[];
|
|
20
|
+
/** Внешний бордер */
|
|
21
|
+
outline?: boolean;
|
|
22
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SearchAutocomplete';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
|
+
import { SearchProps } from '../Search';
|
|
4
|
+
export type SearchDecoratorProps = WithSupportProps<{
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
focused?: boolean;
|
|
7
|
+
className?: string;
|
|
8
|
+
} & Pick<SearchProps, 'outline' | 'size'>>;
|
|
9
|
+
export declare function SearchDecorator({ children, outline, size, focused, className, ...rest }: SearchDecoratorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SearchDecorator';
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.decorator{
|
|
2
|
+
display:flex;
|
|
3
|
+
flex-grow:1;
|
|
4
|
+
align-items:center;
|
|
5
|
+
box-sizing:border-box;
|
|
6
|
+
width:100%;
|
|
7
|
+
min-width:0;
|
|
8
|
+
background-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
9
|
+
border-color:transparent;
|
|
10
|
+
border-style:solid;
|
|
11
|
+
}
|
|
12
|
+
.decorator[data-size=s]{
|
|
13
|
+
height:var(--size-search-s, 32px);
|
|
14
|
+
border-radius:var(--radius-search-s, 12px);
|
|
15
|
+
border-width:var(--border-width-search-single, 2px);
|
|
16
|
+
padding-left:var(--space-search-container-s, 6px);
|
|
17
|
+
padding-right:var(--space-search-container-s, 6px);
|
|
18
|
+
}
|
|
19
|
+
.decorator[data-size=m]{
|
|
20
|
+
height:var(--size-search-m, 40px);
|
|
21
|
+
border-radius:var(--radius-search-m, 14px);
|
|
22
|
+
border-width:var(--border-width-search-single, 2px);
|
|
23
|
+
padding-left:var(--space-search-container-m, 8px);
|
|
24
|
+
padding-right:var(--space-search-container-m, 8px);
|
|
25
|
+
}
|
|
26
|
+
.decorator[data-size=l]{
|
|
27
|
+
height:var(--size-search-l, 48px);
|
|
28
|
+
border-radius:var(--radius-search-l, 16px);
|
|
29
|
+
border-width:var(--border-width-search-single, 2px);
|
|
30
|
+
padding-left:var(--space-search-container-l, 10px);
|
|
31
|
+
padding-right:var(--space-search-container-l, 10px);
|
|
32
|
+
}
|
|
33
|
+
.decorator[data-outline]{
|
|
34
|
+
border-color:var(--sys-neutral-decor-default, #dde0ea);
|
|
35
|
+
}
|
|
36
|
+
.decorator:hover{
|
|
37
|
+
background-color:var(--sys-neutral-background2-level, #ffffff);
|
|
38
|
+
border-color:var(--sys-primary-decor-hovered, #decdfb);
|
|
39
|
+
}
|
|
40
|
+
.decorator:focus-within, .decorator[data-focused]{
|
|
41
|
+
outline-width:var(--border-state-focus-m-border-width, 3px);
|
|
42
|
+
outline-style:var(--border-state-focus-m-border-style, solid);
|
|
43
|
+
outline-color:var(--border-state-focus-m-border-color, );
|
|
44
|
+
background-color:var(--sys-neutral-background2-level, #ffffff);
|
|
45
|
+
border-color:var(--sys-primary-accent-default, #794ed3);
|
|
46
|
+
outline-color:var(--sys-primary-decor-activated, #c5b2f1);
|
|
47
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { SearchPrivateProps } from '@snack-uikit/search-private';
|
|
2
|
+
export type SearchTextFieldProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
|
|
3
|
+
/** Внешний бордер */
|
|
4
|
+
outline?: boolean;
|
|
5
|
+
};
|
|
6
|
+
export declare const SearchFieldText: import("react").ForwardRefExoticComponent<Omit<SearchPrivateProps, "onKeyDown"> & {
|
|
7
|
+
/** Внешний бордер */
|
|
8
|
+
outline?: boolean;
|
|
9
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SearchFieldText';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Search';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Search';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const SIZE: {
|
|
2
|
+
readonly S: "s";
|
|
3
|
+
readonly M: "m";
|
|
4
|
+
readonly L: "l";
|
|
5
|
+
};
|
|
6
|
+
export declare const TEST_IDS: {
|
|
7
|
+
main: string;
|
|
8
|
+
decorator: string;
|
|
9
|
+
droplist: string;
|
|
10
|
+
option: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const PRIVATE_SEARCH_TEST_IDS: {
|
|
13
|
+
field: string;
|
|
14
|
+
input: string;
|
|
15
|
+
iconSun: string;
|
|
16
|
+
iconSearch: string;
|
|
17
|
+
buttonClearValue: string;
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
package/package.json
CHANGED
|
@@ -4,15 +4,16 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Search",
|
|
7
|
-
"version": "0.8.
|
|
7
|
+
"version": "0.8.28-preview-71543426.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
11
11
|
"*.woff2"
|
|
12
12
|
],
|
|
13
13
|
"description": "Search",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
14
|
+
"types": "./dist/esm/index.d.ts",
|
|
15
|
+
"main": "./dist/cjs/index.js",
|
|
16
|
+
"module": "./dist/esm/index.js",
|
|
16
17
|
"homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/search",
|
|
17
18
|
"repository": {
|
|
18
19
|
"type": "git",
|
|
@@ -24,7 +25,8 @@
|
|
|
24
25
|
"Nikita Ershov <niershov@cloud.ru>"
|
|
25
26
|
],
|
|
26
27
|
"files": [
|
|
27
|
-
"dist",
|
|
28
|
+
"dist/cjs",
|
|
29
|
+
"dist/esm",
|
|
28
30
|
"src",
|
|
29
31
|
"./CHANGELOG.md",
|
|
30
32
|
"./LICENSE"
|
|
@@ -32,14 +34,14 @@
|
|
|
32
34
|
"license": "Apache-2.0",
|
|
33
35
|
"scripts": {},
|
|
34
36
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/list": "0.18.0",
|
|
36
|
-
"@snack-uikit/search-private": "0.2.
|
|
37
|
-
"@snack-uikit/utils": "3.4.0",
|
|
37
|
+
"@snack-uikit/list": "0.18.1-preview-71543426.0",
|
|
38
|
+
"@snack-uikit/search-private": "0.2.6-preview-71543426.0",
|
|
39
|
+
"@snack-uikit/utils": "3.4.1-preview-71543426.0",
|
|
38
40
|
"classnames": "2.3.2",
|
|
39
41
|
"merge-refs": "1.0.0"
|
|
40
42
|
},
|
|
41
43
|
"devDependencies": {
|
|
42
44
|
"@types/merge-refs": "1.0.0"
|
|
43
45
|
},
|
|
44
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "3102614275e261c8f41db0f6c00a1f6b6276b2a9"
|
|
45
47
|
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/dist/{components/SearchDecorator/index.js → esm/components/SearchDecorator/index.d.ts}
RENAMED
|
File without changes
|
|
File without changes
|
/package/dist/{components/SearchFieldText/index.js → esm/components/SearchFieldText/index.d.ts}
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|