@commercetools-uikit/search-select-input 15.14.3 → 15.15.1
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/README.md +1 -1
- package/dist/commercetools-uikit-search-select-input.cjs.d.ts +1 -0
- package/dist/commercetools-uikit-search-select-input.cjs.d.ts.map +1 -0
- package/dist/commercetools-uikit-search-select-input.cjs.dev.js +25 -25
- package/dist/commercetools-uikit-search-select-input.cjs.prod.js +25 -25
- package/dist/commercetools-uikit-search-select-input.esm.js +25 -25
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ export default Example;
|
|
|
86
86
|
| `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
87
87
|
| `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | `220` | Maximum height of the menu before scrolling
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
88
88
|
| `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
89
|
-
| `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
|
|
89
|
+
| `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
90
90
|
| `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
91
91
|
| `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
92
92
|
| `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"commercetools-uikit-search-select-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -55,12 +55,12 @@ var messages = reactIntl.defineMessages({
|
|
|
55
55
|
}
|
|
56
56
|
});
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
const SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
|
|
59
59
|
target: "e6cl9390"
|
|
60
60
|
} : {
|
|
61
61
|
target: "e6cl9390",
|
|
62
62
|
label: "SearchSelectInputWrapper"
|
|
63
|
-
})(
|
|
63
|
+
})(props => {
|
|
64
64
|
var _context;
|
|
65
65
|
|
|
66
66
|
return !props.isDisabled && !props.isReadOnly ? _concatInstanceProperty__default["default"](_context = "div[class$='control'] {\n &:hover {\n cursor: text;\n }\n div[class$='indicatorContainer' i] {\n cursor: pointer;\n svg * {\n fill: ".concat(designSystem.designTokens.fontColorForSearchInputIcon, ";\n }\n :hover svg * {\n fill: ")).call(_context, designSystem.designTokens.fontColorForSearchInputIconWhenHovered, ";\n }\n }\n }") : '';
|
|
@@ -69,38 +69,38 @@ var SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div", p
|
|
|
69
69
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
70
70
|
|
|
71
71
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
72
|
-
|
|
72
|
+
const defaultProps = {
|
|
73
73
|
value: null,
|
|
74
74
|
menuPortalZIndex: 1,
|
|
75
75
|
maxMenuHeight: 220
|
|
76
76
|
};
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
const SearchSelectInput = props => {
|
|
79
|
+
const intl = reactIntl.useIntl();
|
|
80
80
|
|
|
81
81
|
if (!props.isReadOnly) {
|
|
82
82
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}, [props.components, optionType]);
|
|
85
|
+
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
86
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
87
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
88
|
+
componentName: 'SearchSelectInput'
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
|
|
92
|
+
|
|
93
|
+
const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
|
|
94
|
+
const placeholder = props.placeholder || intl.formatMessage(messages.placeholderMessage);
|
|
95
|
+
const optionType = props.optionType;
|
|
96
|
+
const components = react.useMemo(() => _objectSpread(_objectSpread({
|
|
97
|
+
Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
|
|
98
|
+
optionType: optionType,
|
|
99
|
+
optionInnerProps: optionInnerProps
|
|
100
|
+
}))
|
|
101
|
+
}, props.components), {}, {
|
|
102
|
+
DropdownIndicator: selectUtils.SearchIconDropdownIndicator
|
|
103
|
+
}), [props.components, optionType]);
|
|
104
104
|
return jsxRuntime.jsx(SearchSelectInputWrapper, {
|
|
105
105
|
isDisabled: props.isDisabled,
|
|
106
106
|
isReadOnly: props.isReadOnly,
|
|
@@ -136,7 +136,7 @@ SearchSelectInput.displayName = 'SearchSelectInput';
|
|
|
136
136
|
var SearchSelectInput$1 = SearchSelectInput;
|
|
137
137
|
|
|
138
138
|
// NOTE: This string will be replaced on build time with the package version.
|
|
139
|
-
var version = "15.
|
|
139
|
+
var version = "15.15.1";
|
|
140
140
|
|
|
141
141
|
exports["default"] = SearchSelectInput$1;
|
|
142
142
|
exports.version = version;
|
|
@@ -54,9 +54,9 @@ var messages = reactIntl.defineMessages({
|
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
const SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div", {
|
|
58
58
|
target: "e6cl9390"
|
|
59
|
-
} )(
|
|
59
|
+
} )(props => {
|
|
60
60
|
var _context;
|
|
61
61
|
|
|
62
62
|
return !props.isDisabled && !props.isReadOnly ? _concatInstanceProperty__default["default"](_context = "div[class$='control'] {\n &:hover {\n cursor: text;\n }\n div[class$='indicatorContainer' i] {\n cursor: pointer;\n svg * {\n fill: ".concat(designSystem.designTokens.fontColorForSearchInputIcon, ";\n }\n :hover svg * {\n fill: ")).call(_context, designSystem.designTokens.fontColorForSearchInputIconWhenHovered, ";\n }\n }\n }") : '';
|
|
@@ -65,36 +65,36 @@ var SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div", {
|
|
|
65
65
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
66
66
|
|
|
67
67
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
68
|
-
|
|
68
|
+
const defaultProps = {
|
|
69
69
|
value: null,
|
|
70
70
|
menuPortalZIndex: 1,
|
|
71
71
|
maxMenuHeight: 220
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
const SearchSelectInput = props => {
|
|
75
|
+
const intl = reactIntl.useIntl();
|
|
76
76
|
|
|
77
77
|
if (!props.isReadOnly) ;
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}, [props.components, optionType]);
|
|
79
|
+
selectUtils.warnIfMenuPortalPropsAreMissing({
|
|
80
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
81
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
82
|
+
componentName: 'SearchSelectInput'
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
|
|
86
|
+
|
|
87
|
+
const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
|
|
88
|
+
const placeholder = props.placeholder || intl.formatMessage(messages.placeholderMessage);
|
|
89
|
+
const optionType = props.optionType;
|
|
90
|
+
const components = react.useMemo(() => _objectSpread(_objectSpread({
|
|
91
|
+
Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
|
|
92
|
+
optionType: optionType,
|
|
93
|
+
optionInnerProps: optionInnerProps
|
|
94
|
+
}))
|
|
95
|
+
}, props.components), {}, {
|
|
96
|
+
DropdownIndicator: selectUtils.SearchIconDropdownIndicator
|
|
97
|
+
}), [props.components, optionType]);
|
|
98
98
|
return jsxRuntime.jsx(SearchSelectInputWrapper, {
|
|
99
99
|
isDisabled: props.isDisabled,
|
|
100
100
|
isReadOnly: props.isReadOnly,
|
|
@@ -116,7 +116,7 @@ SearchSelectInput.displayName = 'SearchSelectInput';
|
|
|
116
116
|
var SearchSelectInput$1 = SearchSelectInput;
|
|
117
117
|
|
|
118
118
|
// NOTE: This string will be replaced on build time with the package version.
|
|
119
|
-
var version = "15.
|
|
119
|
+
var version = "15.15.1";
|
|
120
120
|
|
|
121
121
|
exports["default"] = SearchSelectInput$1;
|
|
122
122
|
exports.version = version;
|
|
@@ -12,7 +12,7 @@ import { useMemo } from 'react';
|
|
|
12
12
|
import { defineMessages, useIntl } from 'react-intl';
|
|
13
13
|
import AsyncSelectInput from '@commercetools-uikit/async-select-input';
|
|
14
14
|
import { warning } from '@commercetools-uikit/utils';
|
|
15
|
-
import { CustomSelectInputOption, SearchIconDropdownIndicator } from '@commercetools-uikit/select-utils';
|
|
15
|
+
import { warnIfMenuPortalPropsAreMissing, CustomSelectInputOption, SearchIconDropdownIndicator } from '@commercetools-uikit/select-utils';
|
|
16
16
|
import _styled from '@emotion/styled/base';
|
|
17
17
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
18
18
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
@@ -36,12 +36,12 @@ var messages = defineMessages({
|
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
const SearchSelectInputWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
40
40
|
target: "e6cl9390"
|
|
41
41
|
} : {
|
|
42
42
|
target: "e6cl9390",
|
|
43
43
|
label: "SearchSelectInputWrapper"
|
|
44
|
-
})(
|
|
44
|
+
})(props => {
|
|
45
45
|
var _context;
|
|
46
46
|
|
|
47
47
|
return !props.isDisabled && !props.isReadOnly ? _concatInstanceProperty(_context = "div[class$='control'] {\n &:hover {\n cursor: text;\n }\n div[class$='indicatorContainer' i] {\n cursor: pointer;\n svg * {\n fill: ".concat(designTokens.fontColorForSearchInputIcon, ";\n }\n :hover svg * {\n fill: ")).call(_context, designTokens.fontColorForSearchInputIconWhenHovered, ";\n }\n }\n }") : '';
|
|
@@ -50,38 +50,38 @@ var SearchSelectInputWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV
|
|
|
50
50
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
51
51
|
|
|
52
52
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
53
|
-
|
|
53
|
+
const defaultProps = {
|
|
54
54
|
value: null,
|
|
55
55
|
menuPortalZIndex: 1,
|
|
56
56
|
maxMenuHeight: 220
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
const SearchSelectInput = props => {
|
|
60
|
+
const intl = useIntl();
|
|
61
61
|
|
|
62
62
|
if (!props.isReadOnly) {
|
|
63
63
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
warnIfMenuPortalPropsAreMissing({
|
|
67
|
+
menuPortalZIndex: props.menuPortalZIndex,
|
|
68
|
+
menuPortalTarget: props.menuPortalTarget,
|
|
69
|
+
componentName: 'SearchSelectInput'
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
|
|
69
73
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}, props.components), {}, {
|
|
82
|
-
DropdownIndicator: SearchIconDropdownIndicator
|
|
83
|
-
});
|
|
84
|
-
}, [props.components, optionType]);
|
|
74
|
+
const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
|
|
75
|
+
const placeholder = props.placeholder || intl.formatMessage(messages.placeholderMessage);
|
|
76
|
+
const optionType = props.optionType;
|
|
77
|
+
const components = useMemo(() => _objectSpread(_objectSpread({
|
|
78
|
+
Option: optionInnerProps => jsx(CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
|
|
79
|
+
optionType: optionType,
|
|
80
|
+
optionInnerProps: optionInnerProps
|
|
81
|
+
}))
|
|
82
|
+
}, props.components), {}, {
|
|
83
|
+
DropdownIndicator: SearchIconDropdownIndicator
|
|
84
|
+
}), [props.components, optionType]);
|
|
85
85
|
return jsx(SearchSelectInputWrapper, {
|
|
86
86
|
isDisabled: props.isDisabled,
|
|
87
87
|
isReadOnly: props.isReadOnly,
|
|
@@ -117,6 +117,6 @@ SearchSelectInput.displayName = 'SearchSelectInput';
|
|
|
117
117
|
var SearchSelectInput$1 = SearchSelectInput;
|
|
118
118
|
|
|
119
119
|
// NOTE: This string will be replaced on build time with the package version.
|
|
120
|
-
var version = "15.
|
|
120
|
+
var version = "15.15.1";
|
|
121
121
|
|
|
122
122
|
export { SearchSelectInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/search-select-input",
|
|
3
3
|
"description": "A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.15.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/async-select-input": "15.
|
|
25
|
-
"@commercetools-uikit/design-system": "15.
|
|
26
|
-
"@commercetools-uikit/select-utils": "15.
|
|
27
|
-
"@commercetools-uikit/spacings": "15.
|
|
28
|
-
"@commercetools-uikit/text": "15.
|
|
29
|
-
"@commercetools-uikit/utils": "15.
|
|
24
|
+
"@commercetools-uikit/async-select-input": "15.15.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "15.15.1",
|
|
26
|
+
"@commercetools-uikit/select-utils": "15.15.1",
|
|
27
|
+
"@commercetools-uikit/spacings": "15.15.1",
|
|
28
|
+
"@commercetools-uikit/text": "15.15.1",
|
|
29
|
+
"@commercetools-uikit/utils": "15.15.1",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"@emotion/styled": "^11.10.5",
|
|
32
32
|
"prop-types": "15.8.1"
|