@commercetools-uikit/search-select-field 0.0.0-canary-2021830134526

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 (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +153 -0
  3. package/dist/commercetools-uikit-search-select-field.cjs.dev.js +400 -0
  4. package/dist/commercetools-uikit-search-select-field.cjs.js +7 -0
  5. package/dist/commercetools-uikit-search-select-field.cjs.prod.js +127 -0
  6. package/dist/commercetools-uikit-search-select-field.esm.js +374 -0
  7. package/package.json +53 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 commercetools GmbH
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,153 @@
1
+ <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
+ <!-- This file is created by the `yarn generate-readme` script. -->
3
+
4
+ # SearchSelectField
5
+
6
+ ## Description
7
+
8
+ A search select field built on top of search select input, allowing users to asynchronously search for options
9
+
10
+ ## Installation
11
+
12
+ ```
13
+ yarn add @commercetools-uikit/search-select-field
14
+ ```
15
+
16
+ ```
17
+ npm --save install @commercetools-uikit/search-select-field
18
+ ```
19
+
20
+ Additionally install the peer dependencies (if not present)
21
+
22
+ ```
23
+ yarn add react
24
+ ```
25
+
26
+ ```
27
+ npm --save install react
28
+ ```
29
+
30
+ ## Usage
31
+
32
+ ```jsx
33
+ import SearchSelectField from '@commercetools-uikit/async-select-field';
34
+
35
+ const Example = () => (
36
+ <SearchSelectField
37
+ title="customer"
38
+ id="customer"
39
+ name="customer"
40
+ isRequired={true}
41
+ horizontalConstraint={7}
42
+ optionType="single-lined"
43
+ isAutofocussed={false}
44
+ backspaceRemovesValue={true}
45
+ isClearable={true}
46
+ isDisabled={false}
47
+ isReadOnly={false}
48
+ isMulti={false}
49
+ onChange={
50
+ (/* event */) => {
51
+ /** onChange logic */
52
+ }
53
+ }
54
+ noOptionsMessage="No exact match found"
55
+ loadingMessage="loading exact matches"
56
+ placeholder="Select customer"
57
+ loadOptions={
58
+ (/* inputValue */) => {
59
+ // async fetch logic
60
+ }
61
+ }
62
+ renderError={(key) => {
63
+ // This example shows how to handle custom errors on top of the
64
+ // predefined errors of FieldErrors which this component and other
65
+ // Field components use under the hood.
66
+ switch (key) {
67
+ case 'missing':
68
+ return 'This field is required.';
69
+ case 'duplicate':
70
+ return 'This customer is already attached to the store. Customers must be unique.';
71
+ case 'customError':
72
+ return 'A custom error.';
73
+ default:
74
+ return null;
75
+ }
76
+ }}
77
+ cacheOptions={false}
78
+ />
79
+ );
80
+
81
+ export default Example;
82
+ ```
83
+
84
+ ## Properties
85
+
86
+ | Props | Type | Required | Default | Description |
87
+ | ------------------------ | -------------------------------------------------------------------------------------------------- | :------: | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
88
+ | `horizontalConstraint` | `enum`<br/>Possible values:<br/>`3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |
89
+ | `aria-label` | `string` | | | Aria label (for assistive tech) |
90
+ | `aria-labelledby` | `string` | | | HTML ID of an element that should be used as the label (for assistive tech) |
91
+ | `id` | `string` | | | The id of the search input. This forwarded as react-select's "inputId" |
92
+ | `containerId` | `string` | | | The id to set on the SelectContainer component. This is forwarded as react-select's "id" |
93
+ | `name` | `string` | | | Name of the HTML Input (optional - without this, no input will be rendered) |
94
+ | `placeholder` | `string` | | | Placeholder text for the select value |
95
+ | `components` | `objectOf(func)` | | | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components) |
96
+ | `tabIndex` | `string` | | | Sets the tabIndex attribute on the input |
97
+ | `value` | `custom` | | | The value of the select; reflected by the selected option |
98
+ | `backspaceRemovesValue` | `bool` | | | Remove the currently focused option when the user presses backspace |
99
+ | `hasError` | `bool` | | | Indicates the input field has an error |
100
+ | `hasWarning` | `bool` | | | Indicates the input field has a warning |
101
+ | `isReadOnly` | `bool` | | | Is the select read-only |
102
+ | `isDisabled` | `bool` | | | Is the select disabled |
103
+ | `isClearable` | `bool` | | | Is the select value clearable |
104
+ | `isOptionDisabled` | `func` | | | Override the built-in logic to detect whether an option is disabled |
105
+ | `isMulti` | `bool` | | | Support multiple selected options |
106
+ | `isAutofocussed` | `bool` | | | Focus the control when it is mounted. Renamed autoFocus of react-select |
107
+ | `noOptionsMessage` | `func` | | | 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. |
108
+ | `maxMenuHeight` | `number` | | | Maximum height of the menu before scrolling |
109
+ | `menuPortalTarget` | `SafeHTMLElement` | | | Dom element to portal the select menu to |
110
+ | `menuPortalZIndex` | `number` | | | z-index value for the menu portal |
111
+ | `menuShouldBlockScroll` | `bool` | | | whether the menu should block scroll while open |
112
+ | `showOptionGroupDivider` | `bool` | | | Determines if option groups will be separated by a divider |
113
+ | `onBlur` | `func` | | | Handle blur events on the control |
114
+ | `onChange` | `func` | ✅ | | Called with a fake event when value changes.&#xA;<br />&#xA;The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.&#xA;<br />&#xA;Signature: `(event, action) => void` |
115
+ | `onFocus` | `func` | | | Handle focus events on the control |
116
+ | `onInputChange` | `func` | | | Handle change events on the input&#xA;<br />&#xA;Signature: `(inputValue, action) => void` |
117
+ | `tabSelectsValue` | `bool` | | | Select the currently focused option when the user presses tab |
118
+ | `loadOptions` | `func` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves. |
119
+ | `loadingMessage` | `<string, func>` | | | The text shown while the options are being loaded |
120
+ | `cacheOptions` | `any` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value. |
121
+ | `filterOption` | `func` | | | Custom method to filter whether an option should be displayed in the menu |
122
+ | `optionType` | `enum`<br/>Possible values:<br/>`'single-property', 'double-property', 'multiple-properties'` | | | The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info |
123
+ | `errors` | `object` | | | A map of errors. Error messages for known errors are rendered automatically.&#xA;<br />&#xA;Unknown errors will be forwarded to `renderError` |
124
+ | `errors.missing` | `bool` | | | |
125
+ | `renderError` | `func` | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.&#xA;<br />&#xA;Signature: `(key, error) => React.node` |
126
+ | `isRequired` | `bool` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
127
+ | `touched` | `custom` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
128
+ | `title` | `<string, node>` | ✅ | | Title of the label |
129
+ | `hint` | `custom` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
130
+ | `description` | `<string, node>` | | | Provides a description for the title. |
131
+ | `onInfoButtonClick` | `func` | | | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed.&#xA;<br />&#xA;Signature: `(event) => void` |
132
+ | `hintIcon` | `node` | | | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well. |
133
+ | `badge` | `node` | | | Badge to be displayed beside the label.&#xA;<br />&#xA;Might be used to display additional information about the content of the field (E.g verified email) |
134
+
135
+ ## `data-*` props
136
+
137
+ The component further forwards all `data-` attributes to the underlying `SearchSelectInput` component.
138
+
139
+ The underlying `@commercetools-uikit/search-select-input` is built on top of `@commercetools-uikit/async-select-input` which on its own turn is built on top of [`react-select`](https://github.com/JedWatson/react-select) v3. `@commercetools-uikit/async-select-input` supports mostly the same properties as `react-select` with some minor changes in the behaviour of some of the props. The `@commercetools-uikit/search-select-input` which is built on top `@commercetools-uikit/async-select-input` has predefined values for some the props. The props that have predefined values in `@commercetools-uikit/search-select-input` are as follows:
140
+
141
+ In case you need one of the currently excluded props, feel free to open a PR adding them to either `@commercetools-uikit/search-select-input` or `@commercetools-uikit/async-select-input`.
142
+
143
+ ## `errors`
144
+
145
+ This object is a key-value map. The `renderError` prop will be called for each entry with the key and the value. The return value will be rendered inside an `ErrorMessage` component underneath the input.
146
+
147
+ The `SearchSelectField` supports some errors out of the box. Return `undefined` from `renderError` for these and the default errors will be shown instead. This prevents consumers from having to reimplement the same error messages for known errors while still keeping the flexibility of showing custom error messages for them.
148
+
149
+ When the `key` is known, and when the value is truthy, and when `renderError` returned `undefined` for that error entry, then the `SearchSelectField` will render an appropriate error automatically.
150
+
151
+ Known error keys are:
152
+
153
+ - `missing`: tells the user that this field is required
package/dist/commercetools-uikit-search-select-field.cjs.dev.js ADDED
@@ -0,0 +1,400 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
6
+ var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
7
+ var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
8
+ var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
9
+ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
10
+ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
11
+ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
+ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
15
+ var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
16
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
17
+ var PropTypes = require('prop-types');
18
+ var requiredIf = require('react-required-if');
19
+ var utils = require('@commercetools-uikit/utils');
20
+ var Constraints = require('@commercetools-uikit/constraints');
21
+ var Spacings = require('@commercetools-uikit/spacings');
22
+ var FieldLabel = require('@commercetools-uikit/field-label');
23
+ var SearchSelectInput = require('@commercetools-uikit/search-select-input');
24
+ var FieldErrors = require('@commercetools-uikit/field-errors');
25
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
26
+
27
+ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
28
+
29
+ var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
30
+ var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
31
+ var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
32
+ var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
33
+ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
34
+ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
35
+ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
36
+ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
37
+ var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
38
+ var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
39
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
40
+ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
41
+ var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
42
+ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
43
+ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
44
+ var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
45
+ var SearchSelectInput__default = /*#__PURE__*/_interopDefault(SearchSelectInput);
46
+ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
47
+
48
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
49
+
50
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context7; _forEachInstanceProperty__default['default'](_context7 = ownKeys(Object(source), true)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context8; _forEachInstanceProperty__default['default'](_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
51
+
52
+ var hasErrors = function hasErrors(errors) {
53
+ var _context;
54
+
55
+ return errors && _someInstanceProperty__default['default'](_context = _Object$values__default['default'](errors)).call(_context, Boolean);
56
+ };
57
+
58
+ var sequentialId = utils.createSequentialId('async-select-field-');
59
+
60
+ var SearchSelectField = function SearchSelectField(props) {
61
+ var hasError = Boolean(props.touched) && hasErrors(props.errors);
62
+ var id = props.id || sequentialId();
63
+ return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
64
+ max: props.horizontalConstraint,
65
+ children: jsxRuntime.jsxs(Spacings__default['default'].Stack, {
66
+ scale: "xs",
67
+ children: [jsxRuntime.jsx(FieldLabel__default['default'], {
68
+ title: props.title,
69
+ hint: props.hint,
70
+ description: props.description,
71
+ onInfoButtonClick: props.onInfoButtonClick,
72
+ hintIcon: props.hintIcon,
73
+ badge: props.badge,
74
+ hasRequiredIndicator: props.isRequired,
75
+ htmlFor: id
76
+ }), jsxRuntime.jsx(SearchSelectInput__default['default'], _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
77
+ horizontalConstraint: "scale",
78
+ hasError: hasError,
79
+ "aria-label": props['aria-label'],
80
+ "aria-labelledby": props['aria-labelledby'],
81
+ isAutofocussed: props.isAutofocussed,
82
+ backspaceRemovesValue: props.backspaceRemovesValue,
83
+ components: props.components,
84
+ filterOption: props.filterOption,
85
+ id: id,
86
+ containerId: props.containerId,
87
+ isClearable: props.isClearable,
88
+ isDisabled: props.isDisabled,
89
+ isReadOnly: props.isReadOnly,
90
+ isOptionDisabled: props.isOptionDisabled,
91
+ isMulti: props.isMulti,
92
+ hasWarning: props.hasWarning,
93
+ maxMenuHeight: props.maxMenuHeight,
94
+ menuPortalTarget: props.menuPortalTarget,
95
+ menuPortalZIndex: props.menuPortalZIndex,
96
+ menuShouldBlockScroll: props.menuShouldBlockScroll,
97
+ name: props.name,
98
+ noOptionsMessage: props.noOptionsMessage,
99
+ loadingMessage: props.loadingMessage,
100
+ onBlur: props.onBlur,
101
+ onChange: props.onChange,
102
+ onFocus: props.onFocus,
103
+ onInputChange: props.onInputChange,
104
+ placeholder: props.placeholder,
105
+ tabIndex: props.tabIndex,
106
+ tabSelectsValue: props.tabSelectsValue,
107
+ value: props.value // Async react-select props
108
+ ,
109
+ loadOptions: props.loadOptions,
110
+ cacheOptions: props.cacheOptions,
111
+ showOptionGroupDivider: props.showOptionGroupDivider,
112
+ optionType: props.optionType
113
+ })), jsxRuntime.jsx(FieldErrors__default['default'], {
114
+ errors: props.errors,
115
+ isVisible: hasError,
116
+ renderError: props.renderError
117
+ })]
118
+ })
119
+ });
120
+ };
121
+
122
+ SearchSelectField.displayName = 'SearchSelectField';
123
+ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
124
+ // SearchSelectField
125
+
126
+ /**
127
+ *Horizontal size limit of the input fields.
128
+ */
129
+ horizontalConstraint: PropTypes__default['default'].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
130
+
131
+ /**
132
+ * Aria label (for assistive tech)
133
+ */
134
+ 'aria-label': PropTypes__default['default'].string,
135
+
136
+ /**
137
+ * HTML ID of an element that should be used as the label (for assistive tech)
138
+ */
139
+ 'aria-labelledby': PropTypes__default['default'].string,
140
+
141
+ /**
142
+ * The id of the search input. This forwarded as react-select's "inputId"
143
+ */
144
+ id: PropTypes__default['default'].string,
145
+
146
+ /**
147
+ * The id to set on the SelectContainer component. This is forwarded as react-select's "id"
148
+ */
149
+ containerId: PropTypes__default['default'].string,
150
+
151
+ /**
152
+ * Name of the HTML Input (optional - without this, no input will be rendered)
153
+ */
154
+ name: PropTypes__default['default'].string,
155
+
156
+ /**
157
+ * Placeholder text for the select value
158
+ */
159
+ placeholder: PropTypes__default['default'].string,
160
+
161
+ /**
162
+ * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
163
+ */
164
+ components: PropTypes__default['default'].objectOf(PropTypes__default['default'].func),
165
+
166
+ /**
167
+ * Sets the tabIndex attribute on the input
168
+ */
169
+ tabIndex: PropTypes__default['default'].string,
170
+
171
+ /**
172
+ * The value of the select; reflected by the selected option
173
+ */
174
+ value: function value(props) {
175
+ var _context2, _context3;
176
+
177
+ for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
178
+ rest[_key - 1] = arguments[_key];
179
+ }
180
+
181
+ return props.isMulti ? PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
182
+ value: PropTypes__default['default'].string.isRequired
183
+ })).apply(void 0, _concatInstanceProperty__default['default'](_context2 = [props]).call(_context2, rest)) : PropTypes__default['default'].shape({
184
+ value: PropTypes__default['default'].string.isRequired
185
+ }).apply(void 0, _concatInstanceProperty__default['default'](_context3 = [props]).call(_context3, rest));
186
+ },
187
+
188
+ /**
189
+ * Remove the currently focused option when the user presses backspace
190
+ */
191
+ backspaceRemovesValue: PropTypes__default['default'].bool,
192
+
193
+ /**
194
+ * Indicates the input field has an error
195
+ */
196
+ hasError: PropTypes__default['default'].bool,
197
+
198
+ /**
199
+ * Indicates the input field has a warning
200
+ */
201
+ hasWarning: PropTypes__default['default'].bool,
202
+
203
+ /**
204
+ * Is the select read-only
205
+ */
206
+ isReadOnly: PropTypes__default['default'].bool,
207
+
208
+ /**
209
+ * Is the select disabled
210
+ */
211
+ isDisabled: PropTypes__default['default'].bool,
212
+
213
+ /**
214
+ * Is the select value clearable
215
+ */
216
+ isClearable: PropTypes__default['default'].bool,
217
+
218
+ /**
219
+ * Override the built-in logic to detect whether an option is disabled
220
+ */
221
+ isOptionDisabled: PropTypes__default['default'].func,
222
+
223
+ /**
224
+ * Support multiple selected options
225
+ */
226
+ isMulti: PropTypes__default['default'].bool,
227
+
228
+ /**
229
+ * Focus the control when it is mounted. Renamed autoFocus of react-select
230
+ */
231
+ isAutofocussed: PropTypes__default['default'].bool,
232
+
233
+ /**
234
+ * 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.
235
+ */
236
+ noOptionsMessage: PropTypes__default['default'].func,
237
+
238
+ /**
239
+ * Maximum height of the menu before scrolling
240
+ */
241
+ maxMenuHeight: PropTypes__default['default'].number,
242
+
243
+ /**
244
+ * Dom element to portal the select menu to
245
+ */
246
+ menuPortalTarget: PropTypes__default['default'].instanceOf(utils.SafeHTMLElement),
247
+
248
+ /**
249
+ * z-index value for the menu portal
250
+ */
251
+ menuPortalZIndex: PropTypes__default['default'].number,
252
+
253
+ /**
254
+ * whether the menu should block scroll while open
255
+ */
256
+ menuShouldBlockScroll: PropTypes__default['default'].bool,
257
+
258
+ /**
259
+ * Determines if option groups will be separated by a divider
260
+ */
261
+ showOptionGroupDivider: PropTypes__default['default'].bool,
262
+
263
+ /**
264
+ * Handle blur events on the control
265
+ */
266
+ onBlur: PropTypes__default['default'].func,
267
+
268
+ /**
269
+ * Called with a fake event when value changes.
270
+ * <br />
271
+ * The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
272
+ * <br />
273
+ * Signature: `(event, action) => void`
274
+ */
275
+ onChange: PropTypes__default['default'].func.isRequired,
276
+
277
+ /**
278
+ * Handle focus events on the control
279
+ */
280
+ onFocus: PropTypes__default['default'].func,
281
+
282
+ /**
283
+ * Handle change events on the input
284
+ * <br />
285
+ * Signature: `(inputValue, action) => void`
286
+ */
287
+ onInputChange: PropTypes__default['default'].func,
288
+
289
+ /**
290
+ * Select the currently focused option when the user presses tab
291
+ */
292
+ tabSelectsValue: PropTypes__default['default'].bool,
293
+
294
+ /**
295
+ * Function that returns a promise, which is the set of options to be used once the promise resolves.
296
+ */
297
+ loadOptions: PropTypes__default['default'].func.isRequired,
298
+
299
+ /**
300
+ * The text shown while the options are being loaded
301
+ */
302
+ loadingMessage: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
303
+
304
+ /**
305
+ * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
306
+ */
307
+ cacheOptions: PropTypes__default['default'].any,
308
+
309
+ /**
310
+ * Custom method to filter whether an option should be displayed in the menu
311
+ */
312
+ filterOption: PropTypes__default['default'].func,
313
+
314
+ /**
315
+ * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
316
+ */
317
+ optionType: PropTypes__default['default'].oneOf(['single-property', 'double-property', 'multiple-properties']),
318
+
319
+ /**
320
+ * A map of errors. Error messages for known errors are rendered automatically.
321
+ * <br />
322
+ * Unknown errors will be forwarded to `renderError`
323
+ */
324
+ errors: PropTypes__default['default'].shape({
325
+ missing: PropTypes__default['default'].bool
326
+ }),
327
+
328
+ /**
329
+ * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
330
+ * <br />
331
+ * Signature: `(key, error) => React.node`
332
+ */
333
+ renderError: PropTypes__default['default'].func,
334
+
335
+ /**
336
+ * Indicates if the value is required. Shows an the "required asterisk" if so.
337
+ */
338
+ isRequired: PropTypes__default['default'].bool,
339
+
340
+ /**
341
+ * Indicates whether the field was touched. Errors will only be shown when the field was touched.
342
+ */
343
+ touched: function touched(props) {
344
+ var _context4, _context5, _context6;
345
+
346
+ for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
347
+ rest[_key2 - 1] = arguments[_key2];
348
+ }
349
+
350
+ return props.isMulti ? PropTypes__default['default'].arrayOf.apply(PropTypes__default['default'], _concatInstanceProperty__default['default'](_context4 = [PropTypes__default['default'].bool]).call(_context4, rest)).apply(void 0, _concatInstanceProperty__default['default'](_context5 = [props]).call(_context5, rest)) : PropTypes__default['default'].bool.apply(PropTypes__default['default'], _concatInstanceProperty__default['default'](_context6 = [props]).call(_context6, rest));
351
+ },
352
+ // LabelField
353
+
354
+ /**
355
+ * Title of the label
356
+ */
357
+ title: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]).isRequired,
358
+
359
+ /**
360
+ * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
361
+ */
362
+ hint: requiredIf__default['default'](PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]), function (props) {
363
+ return props.hintIcon;
364
+ }),
365
+
366
+ /**
367
+ * Provides a description for the title.
368
+ */
369
+ description: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]),
370
+
371
+ /**
372
+ * Function called when info button is pressed.
373
+ * <br />
374
+ * Info button will only be visible when this prop is passed.
375
+ * <br />
376
+ * Signature: `(event) => void`
377
+ */
378
+ onInfoButtonClick: PropTypes__default['default'].func,
379
+
380
+ /**
381
+ * Icon to be displayed beside the hint text.
382
+ * <br />
383
+ * Will only get rendered when `hint` is passed as well.
384
+ */
385
+ hintIcon: PropTypes__default['default'].node,
386
+
387
+ /**
388
+ * Badge to be displayed beside the label.
389
+ * <br />
390
+ * Might be used to display additional information about the content of the field (E.g verified email)
391
+ */
392
+ badge: PropTypes__default['default'].node
393
+ } : {};
394
+ var SearchSelectField$1 = SearchSelectField;
395
+
396
+ // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
397
+ var version = '0.0.0-canary-2021830134526';
398
+
399
+ exports['default'] = SearchSelectField$1;
400
+ exports.version = version;
package/dist/commercetools-uikit-search-select-field.cjs.js ADDED
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ if (process.env.NODE_ENV === "production") {
4
+ module.exports = require("./commercetools-uikit-search-select-field.cjs.prod.js");
5
+ } else {
6
+ module.exports = require("./commercetools-uikit-search-select-field.cjs.dev.js");
7
+ }
package/dist/commercetools-uikit-search-select-field.cjs.prod.js ADDED
@@ -0,0 +1,127 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
6
+ var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
7
+ var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
8
+ var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
9
+ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
10
+ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
11
+ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
+ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
15
+ var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
16
+ require('@babel/runtime-corejs3/core-js-stable/instance/concat');
17
+ require('prop-types');
18
+ require('react-required-if');
19
+ var utils = require('@commercetools-uikit/utils');
20
+ var Constraints = require('@commercetools-uikit/constraints');
21
+ var Spacings = require('@commercetools-uikit/spacings');
22
+ var FieldLabel = require('@commercetools-uikit/field-label');
23
+ var SearchSelectInput = require('@commercetools-uikit/search-select-input');
24
+ var FieldErrors = require('@commercetools-uikit/field-errors');
25
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
26
+
27
+ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
28
+
29
+ var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
30
+ var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
31
+ var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
32
+ var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
33
+ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
34
+ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
35
+ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
36
+ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
37
+ var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
38
+ var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
39
+ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
40
+ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
41
+ var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
42
+ var SearchSelectInput__default = /*#__PURE__*/_interopDefault(SearchSelectInput);
43
+ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
44
+
45
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
46
+
47
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context7; _forEachInstanceProperty__default['default'](_context7 = ownKeys(Object(source), true)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context8; _forEachInstanceProperty__default['default'](_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
48
+
49
+ var hasErrors = function hasErrors(errors) {
50
+ var _context;
51
+
52
+ return errors && _someInstanceProperty__default['default'](_context = _Object$values__default['default'](errors)).call(_context, Boolean);
53
+ };
54
+
55
+ var sequentialId = utils.createSequentialId('async-select-field-');
56
+
57
+ var SearchSelectField = function SearchSelectField(props) {
58
+ var hasError = Boolean(props.touched) && hasErrors(props.errors);
59
+ var id = props.id || sequentialId();
60
+ return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
61
+ max: props.horizontalConstraint,
62
+ children: jsxRuntime.jsxs(Spacings__default['default'].Stack, {
63
+ scale: "xs",
64
+ children: [jsxRuntime.jsx(FieldLabel__default['default'], {
65
+ title: props.title,
66
+ hint: props.hint,
67
+ description: props.description,
68
+ onInfoButtonClick: props.onInfoButtonClick,
69
+ hintIcon: props.hintIcon,
70
+ badge: props.badge,
71
+ hasRequiredIndicator: props.isRequired,
72
+ htmlFor: id
73
+ }), jsxRuntime.jsx(SearchSelectInput__default['default'], _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
74
+ horizontalConstraint: "scale",
75
+ hasError: hasError,
76
+ "aria-label": props['aria-label'],
77
+ "aria-labelledby": props['aria-labelledby'],
78
+ isAutofocussed: props.isAutofocussed,
79
+ backspaceRemovesValue: props.backspaceRemovesValue,
80
+ components: props.components,
81
+ filterOption: props.filterOption,
82
+ id: id,
83
+ containerId: props.containerId,
84
+ isClearable: props.isClearable,
85
+ isDisabled: props.isDisabled,
86
+ isReadOnly: props.isReadOnly,
87
+ isOptionDisabled: props.isOptionDisabled,
88
+ isMulti: props.isMulti,
89
+ hasWarning: props.hasWarning,
90
+ maxMenuHeight: props.maxMenuHeight,
91
+ menuPortalTarget: props.menuPortalTarget,
92
+ menuPortalZIndex: props.menuPortalZIndex,
93
+ menuShouldBlockScroll: props.menuShouldBlockScroll,
94
+ name: props.name,
95
+ noOptionsMessage: props.noOptionsMessage,
96
+ loadingMessage: props.loadingMessage,
97
+ onBlur: props.onBlur,
98
+ onChange: props.onChange,
99
+ onFocus: props.onFocus,
100
+ onInputChange: props.onInputChange,
101
+ placeholder: props.placeholder,
102
+ tabIndex: props.tabIndex,
103
+ tabSelectsValue: props.tabSelectsValue,
104
+ value: props.value // Async react-select props
105
+ ,
106
+ loadOptions: props.loadOptions,
107
+ cacheOptions: props.cacheOptions,
108
+ showOptionGroupDivider: props.showOptionGroupDivider,
109
+ optionType: props.optionType
110
+ })), jsxRuntime.jsx(FieldErrors__default['default'], {
111
+ errors: props.errors,
112
+ isVisible: hasError,
113
+ renderError: props.renderError
114
+ })]
115
+ })
116
+ });
117
+ };
118
+
119
+ SearchSelectField.displayName = 'SearchSelectField';
120
+ SearchSelectField.propTypes = {};
121
+ var SearchSelectField$1 = SearchSelectField;
122
+
123
+ // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
124
+ var version = '0.0.0-canary-2021830134526';
125
+
126
+ exports['default'] = SearchSelectField$1;
127
+ exports.version = version;
package/dist/commercetools-uikit-search-select-field.esm.js ADDED
@@ -0,0 +1,374 @@
1
+ import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
2
+ import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
3
+ import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
4
+ import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
5
+ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
6
+ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
7
+ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
8
+ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
9
+ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
+ import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
11
+ import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
12
+ import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
13
+ import PropTypes from 'prop-types';
14
+ import requiredIf from 'react-required-if';
15
+ import { createSequentialId, filterDataAttributes, SafeHTMLElement } from '@commercetools-uikit/utils';
16
+ import Constraints from '@commercetools-uikit/constraints';
17
+ import Spacings from '@commercetools-uikit/spacings';
18
+ import FieldLabel from '@commercetools-uikit/field-label';
19
+ import SearchSelectInput from '@commercetools-uikit/search-select-input';
20
+ import FieldErrors from '@commercetools-uikit/field-errors';
21
+ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
22
+
23
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
24
+
25
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context7; _forEachInstanceProperty(_context7 = ownKeys(Object(source), true)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context8; _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
26
+
27
+ var hasErrors = function hasErrors(errors) {
28
+ var _context;
29
+
30
+ return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
31
+ };
32
+
33
+ var sequentialId = createSequentialId('async-select-field-');
34
+
35
+ var SearchSelectField = function SearchSelectField(props) {
36
+ var hasError = Boolean(props.touched) && hasErrors(props.errors);
37
+ var id = props.id || sequentialId();
38
+ return jsx(Constraints.Horizontal, {
39
+ max: props.horizontalConstraint,
40
+ children: jsxs(Spacings.Stack, {
41
+ scale: "xs",
42
+ children: [jsx(FieldLabel, {
43
+ title: props.title,
44
+ hint: props.hint,
45
+ description: props.description,
46
+ onInfoButtonClick: props.onInfoButtonClick,
47
+ hintIcon: props.hintIcon,
48
+ badge: props.badge,
49
+ hasRequiredIndicator: props.isRequired,
50
+ htmlFor: id
51
+ }), jsx(SearchSelectInput, _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
52
+ horizontalConstraint: "scale",
53
+ hasError: hasError,
54
+ "aria-label": props['aria-label'],
55
+ "aria-labelledby": props['aria-labelledby'],
56
+ isAutofocussed: props.isAutofocussed,
57
+ backspaceRemovesValue: props.backspaceRemovesValue,
58
+ components: props.components,
59
+ filterOption: props.filterOption,
60
+ id: id,
61
+ containerId: props.containerId,
62
+ isClearable: props.isClearable,
63
+ isDisabled: props.isDisabled,
64
+ isReadOnly: props.isReadOnly,
65
+ isOptionDisabled: props.isOptionDisabled,
66
+ isMulti: props.isMulti,
67
+ hasWarning: props.hasWarning,
68
+ maxMenuHeight: props.maxMenuHeight,
69
+ menuPortalTarget: props.menuPortalTarget,
70
+ menuPortalZIndex: props.menuPortalZIndex,
71
+ menuShouldBlockScroll: props.menuShouldBlockScroll,
72
+ name: props.name,
73
+ noOptionsMessage: props.noOptionsMessage,
74
+ loadingMessage: props.loadingMessage,
75
+ onBlur: props.onBlur,
76
+ onChange: props.onChange,
77
+ onFocus: props.onFocus,
78
+ onInputChange: props.onInputChange,
79
+ placeholder: props.placeholder,
80
+ tabIndex: props.tabIndex,
81
+ tabSelectsValue: props.tabSelectsValue,
82
+ value: props.value // Async react-select props
83
+ ,
84
+ loadOptions: props.loadOptions,
85
+ cacheOptions: props.cacheOptions,
86
+ showOptionGroupDivider: props.showOptionGroupDivider,
87
+ optionType: props.optionType
88
+ })), jsx(FieldErrors, {
89
+ errors: props.errors,
90
+ isVisible: hasError,
91
+ renderError: props.renderError
92
+ })]
93
+ })
94
+ });
95
+ };
96
+
97
+ SearchSelectField.displayName = 'SearchSelectField';
98
+ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
99
+ // SearchSelectField
100
+
101
+ /**
102
+ *Horizontal size limit of the input fields.
103
+ */
104
+ horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
105
+
106
+ /**
107
+ * Aria label (for assistive tech)
108
+ */
109
+ 'aria-label': PropTypes.string,
110
+
111
+ /**
112
+ * HTML ID of an element that should be used as the label (for assistive tech)
113
+ */
114
+ 'aria-labelledby': PropTypes.string,
115
+
116
+ /**
117
+ * The id of the search input. This forwarded as react-select's "inputId"
118
+ */
119
+ id: PropTypes.string,
120
+
121
+ /**
122
+ * The id to set on the SelectContainer component. This is forwarded as react-select's "id"
123
+ */
124
+ containerId: PropTypes.string,
125
+
126
+ /**
127
+ * Name of the HTML Input (optional - without this, no input will be rendered)
128
+ */
129
+ name: PropTypes.string,
130
+
131
+ /**
132
+ * Placeholder text for the select value
133
+ */
134
+ placeholder: PropTypes.string,
135
+
136
+ /**
137
+ * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
138
+ */
139
+ components: PropTypes.objectOf(PropTypes.func),
140
+
141
+ /**
142
+ * Sets the tabIndex attribute on the input
143
+ */
144
+ tabIndex: PropTypes.string,
145
+
146
+ /**
147
+ * The value of the select; reflected by the selected option
148
+ */
149
+ value: function value(props) {
150
+ var _context2, _context3;
151
+
152
+ for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
153
+ rest[_key - 1] = arguments[_key];
154
+ }
155
+
156
+ return props.isMulti ? PropTypes.arrayOf(PropTypes.shape({
157
+ value: PropTypes.string.isRequired
158
+ })).apply(void 0, _concatInstanceProperty(_context2 = [props]).call(_context2, rest)) : PropTypes.shape({
159
+ value: PropTypes.string.isRequired
160
+ }).apply(void 0, _concatInstanceProperty(_context3 = [props]).call(_context3, rest));
161
+ },
162
+
163
+ /**
164
+ * Remove the currently focused option when the user presses backspace
165
+ */
166
+ backspaceRemovesValue: PropTypes.bool,
167
+
168
+ /**
169
+ * Indicates the input field has an error
170
+ */
171
+ hasError: PropTypes.bool,
172
+
173
+ /**
174
+ * Indicates the input field has a warning
175
+ */
176
+ hasWarning: PropTypes.bool,
177
+
178
+ /**
179
+ * Is the select read-only
180
+ */
181
+ isReadOnly: PropTypes.bool,
182
+
183
+ /**
184
+ * Is the select disabled
185
+ */
186
+ isDisabled: PropTypes.bool,
187
+
188
+ /**
189
+ * Is the select value clearable
190
+ */
191
+ isClearable: PropTypes.bool,
192
+
193
+ /**
194
+ * Override the built-in logic to detect whether an option is disabled
195
+ */
196
+ isOptionDisabled: PropTypes.func,
197
+
198
+ /**
199
+ * Support multiple selected options
200
+ */
201
+ isMulti: PropTypes.bool,
202
+
203
+ /**
204
+ * Focus the control when it is mounted. Renamed autoFocus of react-select
205
+ */
206
+ isAutofocussed: PropTypes.bool,
207
+
208
+ /**
209
+ * 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.
210
+ */
211
+ noOptionsMessage: PropTypes.func,
212
+
213
+ /**
214
+ * Maximum height of the menu before scrolling
215
+ */
216
+ maxMenuHeight: PropTypes.number,
217
+
218
+ /**
219
+ * Dom element to portal the select menu to
220
+ */
221
+ menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
222
+
223
+ /**
224
+ * z-index value for the menu portal
225
+ */
226
+ menuPortalZIndex: PropTypes.number,
227
+
228
+ /**
229
+ * whether the menu should block scroll while open
230
+ */
231
+ menuShouldBlockScroll: PropTypes.bool,
232
+
233
+ /**
234
+ * Determines if option groups will be separated by a divider
235
+ */
236
+ showOptionGroupDivider: PropTypes.bool,
237
+
238
+ /**
239
+ * Handle blur events on the control
240
+ */
241
+ onBlur: PropTypes.func,
242
+
243
+ /**
244
+ * Called with a fake event when value changes.
245
+ * <br />
246
+ * The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
247
+ * <br />
248
+ * Signature: `(event, action) => void`
249
+ */
250
+ onChange: PropTypes.func.isRequired,
251
+
252
+ /**
253
+ * Handle focus events on the control
254
+ */
255
+ onFocus: PropTypes.func,
256
+
257
+ /**
258
+ * Handle change events on the input
259
+ * <br />
260
+ * Signature: `(inputValue, action) => void`
261
+ */
262
+ onInputChange: PropTypes.func,
263
+
264
+ /**
265
+ * Select the currently focused option when the user presses tab
266
+ */
267
+ tabSelectsValue: PropTypes.bool,
268
+
269
+ /**
270
+ * Function that returns a promise, which is the set of options to be used once the promise resolves.
271
+ */
272
+ loadOptions: PropTypes.func.isRequired,
273
+
274
+ /**
275
+ * The text shown while the options are being loaded
276
+ */
277
+ loadingMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
278
+
279
+ /**
280
+ * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
281
+ */
282
+ cacheOptions: PropTypes.any,
283
+
284
+ /**
285
+ * Custom method to filter whether an option should be displayed in the menu
286
+ */
287
+ filterOption: PropTypes.func,
288
+
289
+ /**
290
+ * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
291
+ */
292
+ optionType: PropTypes.oneOf(['single-property', 'double-property', 'multiple-properties']),
293
+
294
+ /**
295
+ * A map of errors. Error messages for known errors are rendered automatically.
296
+ * <br />
297
+ * Unknown errors will be forwarded to `renderError`
298
+ */
299
+ errors: PropTypes.shape({
300
+ missing: PropTypes.bool
301
+ }),
302
+
303
+ /**
304
+ * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
305
+ * <br />
306
+ * Signature: `(key, error) => React.node`
307
+ */
308
+ renderError: PropTypes.func,
309
+
310
+ /**
311
+ * Indicates if the value is required. Shows an the "required asterisk" if so.
312
+ */
313
+ isRequired: PropTypes.bool,
314
+
315
+ /**
316
+ * Indicates whether the field was touched. Errors will only be shown when the field was touched.
317
+ */
318
+ touched: function touched(props) {
319
+ var _context4, _context5, _context6;
320
+
321
+ for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
322
+ rest[_key2 - 1] = arguments[_key2];
323
+ }
324
+
325
+ return props.isMulti ? PropTypes.arrayOf.apply(PropTypes, _concatInstanceProperty(_context4 = [PropTypes.bool]).call(_context4, rest)).apply(void 0, _concatInstanceProperty(_context5 = [props]).call(_context5, rest)) : PropTypes.bool.apply(PropTypes, _concatInstanceProperty(_context6 = [props]).call(_context6, rest));
326
+ },
327
+ // LabelField
328
+
329
+ /**
330
+ * Title of the label
331
+ */
332
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
333
+
334
+ /**
335
+ * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
336
+ */
337
+ hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
338
+ return props.hintIcon;
339
+ }),
340
+
341
+ /**
342
+ * Provides a description for the title.
343
+ */
344
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
345
+
346
+ /**
347
+ * Function called when info button is pressed.
348
+ * <br />
349
+ * Info button will only be visible when this prop is passed.
350
+ * <br />
351
+ * Signature: `(event) => void`
352
+ */
353
+ onInfoButtonClick: PropTypes.func,
354
+
355
+ /**
356
+ * Icon to be displayed beside the hint text.
357
+ * <br />
358
+ * Will only get rendered when `hint` is passed as well.
359
+ */
360
+ hintIcon: PropTypes.node,
361
+
362
+ /**
363
+ * Badge to be displayed beside the label.
364
+ * <br />
365
+ * Might be used to display additional information about the content of the field (E.g verified email)
366
+ */
367
+ badge: PropTypes.node
368
+ } : {};
369
+ var SearchSelectField$1 = SearchSelectField;
370
+
371
+ // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
372
+ var version = '0.0.0-canary-2021830134526';
373
+
374
+ export { SearchSelectField$1 as default, version };
package/package.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "name": "@commercetools-uikit/search-select-field",
3
+ "description": "A search select field built on top of search select input, allowing users to asynchronously search for options",
4
+ "version": "0.0.0-canary-2021830134526",
5
+ "bugs": "https://github.com/commercetools/ui-kit/issues",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/commercetools/ui-kit.git",
9
+ "directory": "packages/components/fields/search-select-field"
10
+ },
11
+ "homepage": "https://uikit.commercetools.com",
12
+ "keywords": [
13
+ "javascript",
14
+ "design system",
15
+ "react",
16
+ "uikit"
17
+ ],
18
+ "license": "MIT",
19
+ "private": false,
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "sideEffects": false,
24
+ "main": "dist/commercetools-uikit-search-select-field.cjs.js",
25
+ "module": "dist/commercetools-uikit-search-select-field.esm.js",
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "scripts": {
30
+ "prepare": "../../../../scripts/version.js replace"
31
+ },
32
+ "dependencies": {
33
+ "@babel/runtime": "7.14.8",
34
+ "@babel/runtime-corejs3": "7.14.9",
35
+ "@commercetools-uikit/constraints": "0.0.0-canary-2021830134526",
36
+ "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
37
+ "@commercetools-uikit/field-errors": "0.0.0-canary-2021830134526",
38
+ "@commercetools-uikit/field-label": "0.0.0-canary-2021830134526",
39
+ "@commercetools-uikit/search-select-input": "0.0.0-canary-2021830134526",
40
+ "@commercetools-uikit/spacings": "0.0.0-canary-2021830134526",
41
+ "@commercetools-uikit/utils": "12.2.0",
42
+ "@emotion/react": "^11.4.0",
43
+ "@emotion/styled": "^11.3.0",
44
+ "prop-types": "15.7.2",
45
+ "react-required-if": "1.0.3"
46
+ },
47
+ "devDependencies": {
48
+ "react": "17.0.2"
49
+ },
50
+ "peerDependencies": {
51
+ "react": "17.x"
52
+ }
53
+ }