@commercetools-uikit/search-select-input 13.0.4 → 14.0.2

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 (6) hide show
  1. package/README.md +3 -3
  2. package/dist/commercetools-uikit-search-select-input.cjs.dev.js +7 -2
  3. package/dist/commercetools-uikit-search-select-input.cjs.prod.js +4 -1
  4. package/dist/commercetools-uikit-search-select-input.esm.js +7 -2
  5. package/dist/declarations/src/search-select-input.d.ts +5 -4
  6. package/package.json +10 -10
package/README.md CHANGED
@@ -92,7 +92,7 @@ export default Example;
92
92
  | `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider |
93
93
  | `defaultOptions` | `AsyncProps['defaultOptions']` | | | The default set of options to show before the user starts searching. When set to `true`, the results for `loadOptions('')` will be autoloaded.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
94
94
  | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Handle blur events on the control |
95
- | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | 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` |
95
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | 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`. |
96
96
  | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
97
97
  | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
98
98
  | `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
@@ -107,13 +107,13 @@ export default Example;
107
107
  ### Signature `onBlur`
108
108
 
109
109
  ```ts
110
- (event: TEvent) => void
110
+ (event: TCustomEvent) => void
111
111
  ```
112
112
 
113
113
  ### Signature `onChange`
114
114
 
115
115
  ```ts
116
- (event: TEvent, info: ActionMeta<unknown>) => void
116
+ (event: TCustomEvent, info: ActionMeta<unknown>) => void
117
117
  ```
118
118
 
119
119
  The underlying `@commercetools-uikit/async-select-input` 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:
package/dist/commercetools-uikit-search-select-input.cjs.dev.js CHANGED
@@ -15,6 +15,7 @@ var _pt = require('prop-types');
15
15
  var react = require('react');
16
16
  var reactIntl = require('react-intl');
17
17
  var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
18
+ var utils = require('@commercetools-uikit/utils');
18
19
  var selectUtils = require('@commercetools-uikit/select-utils');
19
20
  var _styled = require('@emotion/styled/base');
20
21
  var designSystem = require('@commercetools-uikit/design-system');
@@ -73,6 +74,10 @@ var defaultProps = {
73
74
  var SearchSelectInput = function SearchSelectInput(props) {
74
75
  var intl = reactIntl.useIntl();
75
76
 
77
+ if (!props.isReadOnly) {
78
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
79
+ }
80
+
76
81
  var noOptionsMessage = props.noOptionsMessage || function () {
77
82
  return intl.formatMessage(messages.noOptionsMessage);
78
83
  };
@@ -118,7 +123,7 @@ SearchSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
118
123
  menuPortalZIndex: _pt__default["default"].number.isRequired,
119
124
  showOptionGroupDivider: _pt__default["default"].bool,
120
125
  onBlur: _pt__default["default"].func,
121
- onChange: _pt__default["default"].func.isRequired,
126
+ onChange: _pt__default["default"].func,
122
127
  loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
123
128
  optionType: _pt__default["default"].oneOf(['single-property', 'double-property', 'multiple-properties'])
124
129
  } : {};
@@ -127,7 +132,7 @@ SearchSelectInput.displayName = 'SearchSelectInput';
127
132
  var SearchSelectInput$1 = SearchSelectInput;
128
133
 
129
134
  // NOTE: This string will be replaced on build time with the package version.
130
- var version = "13.0.4";
135
+ var version = "14.0.2";
131
136
 
132
137
  exports["default"] = SearchSelectInput$1;
133
138
  exports.version = version;
package/dist/commercetools-uikit-search-select-input.cjs.prod.js CHANGED
@@ -15,6 +15,7 @@ require('prop-types');
15
15
  var react = require('react');
16
16
  var reactIntl = require('react-intl');
17
17
  var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
18
+ require('@commercetools-uikit/utils');
18
19
  var selectUtils = require('@commercetools-uikit/select-utils');
19
20
  var _styled = require('@emotion/styled/base');
20
21
  var designSystem = require('@commercetools-uikit/design-system');
@@ -69,6 +70,8 @@ var defaultProps = {
69
70
  var SearchSelectInput = function SearchSelectInput(props) {
70
71
  var intl = reactIntl.useIntl();
71
72
 
73
+ if (!props.isReadOnly) ;
74
+
72
75
  var noOptionsMessage = props.noOptionsMessage || function () {
73
76
  return intl.formatMessage(messages.noOptionsMessage);
74
77
  };
@@ -109,7 +112,7 @@ SearchSelectInput.displayName = 'SearchSelectInput';
109
112
  var SearchSelectInput$1 = SearchSelectInput;
110
113
 
111
114
  // NOTE: This string will be replaced on build time with the package version.
112
- var version = "13.0.4";
115
+ var version = "14.0.2";
113
116
 
114
117
  exports["default"] = SearchSelectInput$1;
115
118
  exports.version = version;
package/dist/commercetools-uikit-search-select-input.esm.js CHANGED
@@ -11,6 +11,7 @@ import _pt from 'prop-types';
11
11
  import { useMemo } from 'react';
12
12
  import { defineMessages, useIntl } from 'react-intl';
13
13
  import AsyncSelectInput from '@commercetools-uikit/async-select-input';
14
+ import { warning } from '@commercetools-uikit/utils';
14
15
  import { CustomSelectInputOption, SearchIconDropdownIndicator } from '@commercetools-uikit/select-utils';
15
16
  import _styled from '@emotion/styled/base';
16
17
  import { customProperties } from '@commercetools-uikit/design-system';
@@ -55,6 +56,10 @@ var defaultProps = {
55
56
  var SearchSelectInput = function SearchSelectInput(props) {
56
57
  var intl = useIntl();
57
58
 
59
+ if (!props.isReadOnly) {
60
+ process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
61
+ }
62
+
58
63
  var noOptionsMessage = props.noOptionsMessage || function () {
59
64
  return intl.formatMessage(messages.noOptionsMessage);
60
65
  };
@@ -100,7 +105,7 @@ SearchSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
100
105
  menuPortalZIndex: _pt.number.isRequired,
101
106
  showOptionGroupDivider: _pt.bool,
102
107
  onBlur: _pt.func,
103
- onChange: _pt.func.isRequired,
108
+ onChange: _pt.func,
104
109
  loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
105
110
  optionType: _pt.oneOf(['single-property', 'double-property', 'multiple-properties'])
106
111
  } : {};
@@ -109,6 +114,6 @@ SearchSelectInput.displayName = 'SearchSelectInput';
109
114
  var SearchSelectInput$1 = SearchSelectInput;
110
115
 
111
116
  // NOTE: This string will be replaced on build time with the package version.
112
- var version = "13.0.4";
117
+ var version = "14.0.2";
113
118
 
114
119
  export { SearchSelectInput$1 as default, version };
package/dist/declarations/src/search-select-input.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import type { ActionMeta, GroupBase } from 'react-select';
2
2
  import type { AsyncProps } from 'react-select/async';
3
3
  declare type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
4
- declare type TEvent = {
4
+ declare type TCustomEvent = {
5
5
  target: {
6
- name?: string;
6
+ id?: ReactSelectAsyncProps['inputId'];
7
+ name?: ReactSelectAsyncProps['name'];
7
8
  value?: unknown;
8
9
  };
9
10
  persist: () => void;
@@ -38,8 +39,8 @@ export declare type TSearchSelectInputProps = {
38
39
  closeMenuOnSelect?: ReactSelectAsyncProps['closeMenuOnSelect'];
39
40
  showOptionGroupDivider?: boolean;
40
41
  defaultOptions?: ReactSelectAsyncProps['defaultOptions'];
41
- onBlur?: (event: TEvent) => void;
42
- onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
42
+ onBlur?: (event: TCustomEvent) => void;
43
+ onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
43
44
  onFocus?: ReactSelectAsyncProps['onFocus'];
44
45
  onInputChange?: ReactSelectAsyncProps['onInputChange'];
45
46
  tabSelectsValue?: ReactSelectAsyncProps['tabSelectsValue'];
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": "13.0.4",
4
+ "version": "14.0.2",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -9,7 +9,7 @@
9
9
  "directory": "packages/components/inputs/search-select-input"
10
10
  },
11
11
  "homepage": "https://uikit.commercetools.com",
12
- "keywords": ["javascript", "design system", "react", "uikit"],
12
+ "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
13
13
  "license": "MIT",
14
14
  "publishConfig": {
15
15
  "access": "public"
@@ -19,14 +19,14 @@
19
19
  "module": "dist/commercetools-uikit-search-select-input.esm.js",
20
20
  "files": ["dist"],
21
21
  "dependencies": {
22
- "@babel/runtime": "7.17.2",
23
- "@babel/runtime-corejs3": "7.17.2",
24
- "@commercetools-uikit/async-select-input": "13.0.4",
25
- "@commercetools-uikit/design-system": "13.0.0",
26
- "@commercetools-uikit/select-utils": "13.0.4",
27
- "@commercetools-uikit/spacings": "13.0.2",
28
- "@commercetools-uikit/text": "13.0.4",
29
- "@commercetools-uikit/utils": "13.0.2",
22
+ "@babel/runtime": "^7.17.2",
23
+ "@babel/runtime-corejs3": "^7.17.2",
24
+ "@commercetools-uikit/async-select-input": "14.0.2",
25
+ "@commercetools-uikit/design-system": "14.0.0",
26
+ "@commercetools-uikit/select-utils": "14.0.1",
27
+ "@commercetools-uikit/spacings": "14.0.1",
28
+ "@commercetools-uikit/text": "14.0.1",
29
+ "@commercetools-uikit/utils": "14.0.1",
30
30
  "@emotion/react": "^11.4.0",
31
31
  "@emotion/styled": "^11.3.0",
32
32
  "prop-types": "15.8.1"