@commercetools-uikit/search-select-input 19.20.1 → 19.22.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.
Files changed (5) hide show
  1. package/dist/commercetools-uikit-search-select-input.cjs.dev.js +31 -20
  2. package/dist/commercetools-uikit-search-select-input.cjs.prod.js +29 -18
  3. package/dist/commercetools-uikit-search-select-input.esm.js +31 -20
  4. package/dist/declarations/src/search-select-input.d.ts +3 -4
  5. package/package.json +7 -7
package/dist/commercetools-uikit-search-select-input.cjs.dev.js CHANGED
@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
11
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
13
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
14
15
  var _pt = require('prop-types');
15
16
  var react = require('react');
16
17
  var reactIntl = require('react-intl');
@@ -78,43 +79,54 @@ const SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div",
78
79
  }
79
80
  }` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9DIiwiZmlsZSI6InNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRTZWFyY2hTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnLi9zZWFyY2gtc2VsZWN0LWlucHV0JztcblxuY29uc3QgU2VhcmNoU2VsZWN0SW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjxcbiAgUGljazxUU2VhcmNoU2VsZWN0SW5wdXRQcm9wcywgJ2lzRGlzYWJsZWQnIHwgJ2lzUmVhZE9ubHknIHwgJ2lzQ29uZGVuc2VkJz5cbj5gXG4gICR7KHByb3BzKSA9PlxuICAgICFwcm9wcy5pc0Rpc2FibGVkICYmICFwcm9wcy5pc1JlYWRPbmx5XG4gICAgICA/IGBkaXZbY2xhc3MkPSdjb250cm9sJ10ge1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBjdXJzb3I6IHRleHQ7XG4gICAgICAgIH1cbiAgICAgICAgZGl2W2NsYXNzJD0naW5kaWNhdG9yQ29udGFpbmVyJyBpXSB7XG4gICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICAgIHN2ZyAqIHtcbiAgICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDYwfTtcbiAgICAgICAgICB9XG4gICAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeX07XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9YFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB7IFNlYXJjaFNlbGVjdElucHV0V3JhcHBlciB9O1xuIl19 */"));
80
81
 
82
+ const _excluded = ["value", "menuPortalZIndex", "maxMenuHeight", "controlShouldRenderValue", "appearance", "optionStyle"];
81
83
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
82
84
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
83
- const defaultProps = {
84
- value: null,
85
- menuPortalZIndex: 1,
86
- maxMenuHeight: 220,
87
- controlShouldRenderValue: true,
88
- appearance: 'default',
89
- optionStyle: 'list'
90
- };
91
- const SearchSelectInput = props => {
85
+ const SearchSelectInput = _ref => {
86
+ let _ref$value = _ref.value,
87
+ value = _ref$value === void 0 ? null : _ref$value,
88
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
89
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
90
+ _ref$maxMenuHeight = _ref.maxMenuHeight,
91
+ maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
92
+ _ref$controlShouldRen = _ref.controlShouldRenderValue,
93
+ controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
94
+ _ref$appearance = _ref.appearance,
95
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
96
+ _ref$optionStyle = _ref.optionStyle,
97
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
98
+ props = _objectWithoutProperties(_ref, _excluded);
92
99
  const intl = reactIntl.useIntl();
93
100
  if (!props.isReadOnly) {
94
101
  process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
95
102
  }
96
103
  selectUtils.warnIfMenuPortalPropsAreMissing({
97
- menuPortalZIndex: props.menuPortalZIndex,
104
+ menuPortalZIndex: menuPortalZIndex,
98
105
  menuPortalTarget: props.menuPortalTarget,
99
106
  componentName: 'SearchSelectInput'
100
107
  });
101
108
  const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
102
109
  const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
103
- const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
110
+ const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
104
111
  const optionType = props.optionType;
105
112
  const components = react.useMemo(() => _objectSpread(_objectSpread(_objectSpread({
106
113
  Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
107
114
  optionType: optionType,
108
115
  optionInnerProps: optionInnerProps
109
116
  }))
110
- }, props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components), {}, {
117
+ }, optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components), {}, {
111
118
  DropdownIndicator: selectUtils.SearchIconDropdownIndicator
112
- }), [props.optionStyle, props.appearance, props.components, optionType]);
119
+ }), [optionStyle, appearance, props.components, optionType]);
113
120
  return jsxRuntime.jsx(SearchSelectInputWrapper, {
114
121
  isDisabled: props.isDisabled,
115
122
  isReadOnly: props.isReadOnly,
116
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
123
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
117
124
  children: jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
125
+ value: value,
126
+ menuPortalZIndex: menuPortalZIndex,
127
+ maxMenuHeight: maxMenuHeight,
128
+ appearance: appearance,
129
+ optionStyle: optionStyle,
118
130
  components: components,
119
131
  placeholder: placeholder,
120
132
  iconLeft: props.iconLeft,
@@ -124,8 +136,8 @@ const SearchSelectInput = props => {
124
136
  // @ts-expect-error
125
137
  ,
126
138
  closeMenuOnSelect: props.closeMenuOnSelect
127
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}), {}, {
128
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
139
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}), {}, {
140
+ controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
129
141
  }))
130
142
  });
131
143
  };
@@ -138,23 +150,22 @@ SearchSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
138
150
  isClearable: _pt__default["default"].bool,
139
151
  isCondensed: _pt__default["default"].bool,
140
152
  isAutofocussed: _pt__default["default"].bool,
141
- menuPortalZIndex: _pt__default["default"].number.isRequired,
153
+ menuPortalZIndex: _pt__default["default"].number,
142
154
  showOptionGroupDivider: _pt__default["default"].bool,
143
155
  onBlur: _pt__default["default"].func,
144
156
  onChange: _pt__default["default"].func,
145
157
  loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
146
158
  optionType: _pt__default["default"].oneOf(['single-property', 'double-property', 'multiple-properties']),
147
159
  iconLeft: _pt__default["default"].node,
148
- optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']).isRequired,
160
+ optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']),
149
161
  appearance: _pt__default["default"].oneOf(['default', 'filter']),
150
162
  count: _pt__default["default"].number
151
163
  } : {};
152
- SearchSelectInput.defaultProps = defaultProps;
153
164
  SearchSelectInput.displayName = 'SearchSelectInput';
154
165
  var SearchSelectInput$1 = SearchSelectInput;
155
166
 
156
167
  // NOTE: This string will be replaced on build time with the package version.
157
- var version = "19.20.1";
168
+ var version = "19.22.0";
158
169
 
159
170
  exports["default"] = SearchSelectInput$1;
160
171
  exports.version = version;
package/dist/commercetools-uikit-search-select-input.cjs.prod.js CHANGED
@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
11
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
13
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
14
15
  require('prop-types');
15
16
  var react = require('react');
16
17
  var reactIntl = require('react-intl');
@@ -74,41 +75,52 @@ const SearchSelectInputWrapper = /*#__PURE__*/_styled__default["default"]("div",
74
75
  }
75
76
  }` : '', ";" + ("" ));
76
77
 
78
+ const _excluded = ["value", "menuPortalZIndex", "maxMenuHeight", "controlShouldRenderValue", "appearance", "optionStyle"];
77
79
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
78
80
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
79
- const defaultProps = {
80
- value: null,
81
- menuPortalZIndex: 1,
82
- maxMenuHeight: 220,
83
- controlShouldRenderValue: true,
84
- appearance: 'default',
85
- optionStyle: 'list'
86
- };
87
- const SearchSelectInput = props => {
81
+ const SearchSelectInput = _ref => {
82
+ let _ref$value = _ref.value,
83
+ value = _ref$value === void 0 ? null : _ref$value,
84
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
85
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
86
+ _ref$maxMenuHeight = _ref.maxMenuHeight,
87
+ maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
88
+ _ref$controlShouldRen = _ref.controlShouldRenderValue,
89
+ controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
90
+ _ref$appearance = _ref.appearance,
91
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
92
+ _ref$optionStyle = _ref.optionStyle,
93
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
94
+ props = _objectWithoutProperties(_ref, _excluded);
88
95
  const intl = reactIntl.useIntl();
89
96
  if (!props.isReadOnly) ;
90
97
  selectUtils.warnIfMenuPortalPropsAreMissing({
91
- menuPortalZIndex: props.menuPortalZIndex,
98
+ menuPortalZIndex: menuPortalZIndex,
92
99
  menuPortalTarget: props.menuPortalTarget,
93
100
  componentName: 'SearchSelectInput'
94
101
  });
95
102
  const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
96
103
  const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
97
- const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
104
+ const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
98
105
  const optionType = props.optionType;
99
106
  const components = react.useMemo(() => _objectSpread(_objectSpread(_objectSpread({
100
107
  Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
101
108
  optionType: optionType,
102
109
  optionInnerProps: optionInnerProps
103
110
  }))
104
- }, props.optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(props.appearance) : {}), props.components), {}, {
111
+ }, optionStyle === 'checkbox' ? selectUtils.optionStyleCheckboxComponents(appearance) : {}), props.components), {}, {
105
112
  DropdownIndicator: selectUtils.SearchIconDropdownIndicator
106
- }), [props.optionStyle, props.appearance, props.components, optionType]);
113
+ }), [optionStyle, appearance, props.components, optionType]);
107
114
  return jsxRuntime.jsx(SearchSelectInputWrapper, {
108
115
  isDisabled: props.isDisabled,
109
116
  isReadOnly: props.isReadOnly,
110
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
117
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
111
118
  children: jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
119
+ value: value,
120
+ menuPortalZIndex: menuPortalZIndex,
121
+ maxMenuHeight: maxMenuHeight,
122
+ appearance: appearance,
123
+ optionStyle: optionStyle,
112
124
  components: components,
113
125
  placeholder: placeholder,
114
126
  iconLeft: props.iconLeft,
@@ -118,18 +130,17 @@ const SearchSelectInput = props => {
118
130
  // @ts-expect-error
119
131
  ,
120
132
  closeMenuOnSelect: props.closeMenuOnSelect
121
- }, props.optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}), {}, {
122
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
133
+ }, optionStyle === 'checkbox' ? selectUtils.optionsStyleCheckboxSelectProps() : {}), {}, {
134
+ controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
123
135
  }))
124
136
  });
125
137
  };
126
138
  SearchSelectInput.propTypes = {};
127
- SearchSelectInput.defaultProps = defaultProps;
128
139
  SearchSelectInput.displayName = 'SearchSelectInput';
129
140
  var SearchSelectInput$1 = SearchSelectInput;
130
141
 
131
142
  // NOTE: This string will be replaced on build time with the package version.
132
- var version = "19.20.1";
143
+ var version = "19.22.0";
133
144
 
134
145
  exports["default"] = SearchSelectInput$1;
135
146
  exports.version = version;
package/dist/commercetools-uikit-search-select-input.esm.js CHANGED
@@ -7,6 +7,7 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
7
7
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
8
8
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
9
9
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
+ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
10
11
  import _pt from 'prop-types';
11
12
  import { useMemo } from 'react';
12
13
  import { defineMessages, useIntl } from 'react-intl';
@@ -60,43 +61,54 @@ const SearchSelectInputWrapper = /*#__PURE__*/_styled("div", process.env.NODE_EN
60
61
  }
61
62
  }` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9DIiwiZmlsZSI6InNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRTZWFyY2hTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnLi9zZWFyY2gtc2VsZWN0LWlucHV0JztcblxuY29uc3QgU2VhcmNoU2VsZWN0SW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjxcbiAgUGljazxUU2VhcmNoU2VsZWN0SW5wdXRQcm9wcywgJ2lzRGlzYWJsZWQnIHwgJ2lzUmVhZE9ubHknIHwgJ2lzQ29uZGVuc2VkJz5cbj5gXG4gICR7KHByb3BzKSA9PlxuICAgICFwcm9wcy5pc0Rpc2FibGVkICYmICFwcm9wcy5pc1JlYWRPbmx5XG4gICAgICA/IGBkaXZbY2xhc3MkPSdjb250cm9sJ10ge1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBjdXJzb3I6IHRleHQ7XG4gICAgICAgIH1cbiAgICAgICAgZGl2W2NsYXNzJD0naW5kaWNhdG9yQ29udGFpbmVyJyBpXSB7XG4gICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICAgIHN2ZyAqIHtcbiAgICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDYwfTtcbiAgICAgICAgICB9XG4gICAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeX07XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9YFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB7IFNlYXJjaFNlbGVjdElucHV0V3JhcHBlciB9O1xuIl19 */"));
62
63
 
64
+ const _excluded = ["value", "menuPortalZIndex", "maxMenuHeight", "controlShouldRenderValue", "appearance", "optionStyle"];
63
65
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
64
66
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
65
- const defaultProps = {
66
- value: null,
67
- menuPortalZIndex: 1,
68
- maxMenuHeight: 220,
69
- controlShouldRenderValue: true,
70
- appearance: 'default',
71
- optionStyle: 'list'
72
- };
73
- const SearchSelectInput = props => {
67
+ const SearchSelectInput = _ref => {
68
+ let _ref$value = _ref.value,
69
+ value = _ref$value === void 0 ? null : _ref$value,
70
+ _ref$menuPortalZIndex = _ref.menuPortalZIndex,
71
+ menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
72
+ _ref$maxMenuHeight = _ref.maxMenuHeight,
73
+ maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
74
+ _ref$controlShouldRen = _ref.controlShouldRenderValue,
75
+ controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
76
+ _ref$appearance = _ref.appearance,
77
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
78
+ _ref$optionStyle = _ref.optionStyle,
79
+ optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
80
+ props = _objectWithoutProperties(_ref, _excluded);
74
81
  const intl = useIntl();
75
82
  if (!props.isReadOnly) {
76
83
  process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
77
84
  }
78
85
  warnIfMenuPortalPropsAreMissing({
79
- menuPortalZIndex: props.menuPortalZIndex,
86
+ menuPortalZIndex: menuPortalZIndex,
80
87
  menuPortalTarget: props.menuPortalTarget,
81
88
  componentName: 'SearchSelectInput'
82
89
  });
83
90
  const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
84
91
  const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
85
- const placeholder = props.appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
92
+ const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
86
93
  const optionType = props.optionType;
87
94
  const components = useMemo(() => _objectSpread(_objectSpread(_objectSpread({
88
95
  Option: optionInnerProps => jsx(CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
89
96
  optionType: optionType,
90
97
  optionInnerProps: optionInnerProps
91
98
  }))
92
- }, props.optionStyle === 'checkbox' ? optionStyleCheckboxComponents(props.appearance) : {}), props.components), {}, {
99
+ }, optionStyle === 'checkbox' ? optionStyleCheckboxComponents(appearance) : {}), props.components), {}, {
93
100
  DropdownIndicator: SearchIconDropdownIndicator
94
- }), [props.optionStyle, props.appearance, props.components, optionType]);
101
+ }), [optionStyle, appearance, props.components, optionType]);
95
102
  return jsx(SearchSelectInputWrapper, {
96
103
  isDisabled: props.isDisabled,
97
104
  isReadOnly: props.isReadOnly,
98
- isCondensed: props.appearance === 'filter' ? true : props.isCondensed,
105
+ isCondensed: appearance === 'filter' ? true : props.isCondensed,
99
106
  children: jsx(AsyncSelectInput, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
107
+ value: value,
108
+ menuPortalZIndex: menuPortalZIndex,
109
+ maxMenuHeight: maxMenuHeight,
110
+ appearance: appearance,
111
+ optionStyle: optionStyle,
100
112
  components: components,
101
113
  placeholder: placeholder,
102
114
  iconLeft: props.iconLeft,
@@ -106,8 +118,8 @@ const SearchSelectInput = props => {
106
118
  // @ts-expect-error
107
119
  ,
108
120
  closeMenuOnSelect: props.closeMenuOnSelect
109
- }, props.optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {}), {}, {
110
- controlShouldRenderValue: props.appearance === 'filter' ? false : props.controlShouldRenderValue
121
+ }, optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {}), {}, {
122
+ controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
111
123
  }))
112
124
  });
113
125
  };
@@ -120,22 +132,21 @@ SearchSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
120
132
  isClearable: _pt.bool,
121
133
  isCondensed: _pt.bool,
122
134
  isAutofocussed: _pt.bool,
123
- menuPortalZIndex: _pt.number.isRequired,
135
+ menuPortalZIndex: _pt.number,
124
136
  showOptionGroupDivider: _pt.bool,
125
137
  onBlur: _pt.func,
126
138
  onChange: _pt.func,
127
139
  loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
128
140
  optionType: _pt.oneOf(['single-property', 'double-property', 'multiple-properties']),
129
141
  iconLeft: _pt.node,
130
- optionStyle: _pt.oneOf(['list', 'checkbox']).isRequired,
142
+ optionStyle: _pt.oneOf(['list', 'checkbox']),
131
143
  appearance: _pt.oneOf(['default', 'filter']),
132
144
  count: _pt.number
133
145
  } : {};
134
- SearchSelectInput.defaultProps = defaultProps;
135
146
  SearchSelectInput.displayName = 'SearchSelectInput';
136
147
  var SearchSelectInput$1 = SearchSelectInput;
137
148
 
138
149
  // NOTE: This string will be replaced on build time with the package version.
139
- var version = "19.20.1";
150
+ var version = "19.22.0";
140
151
 
141
152
  export { SearchSelectInput$1 as default, version };
package/dist/declarations/src/search-select-input.d.ts CHANGED
@@ -162,7 +162,7 @@ export type TSearchSelectInputProps = {
162
162
  * <br>
163
163
  * Use in conjunction with `menuPortalTarget`
164
164
  */
165
- menuPortalZIndex: number;
165
+ menuPortalZIndex?: number;
166
166
  /**
167
167
  * whether the menu should block scroll while open
168
168
  * <br>
@@ -244,7 +244,7 @@ export type TSearchSelectInputProps = {
244
244
  */
245
245
  iconLeft?: ReactNode;
246
246
  /** defines how options are rendered */
247
- optionStyle: 'list' | 'checkbox';
247
+ optionStyle?: 'list' | 'checkbox';
248
248
  /**
249
249
  * Indicates the appearance of the input.
250
250
  * Filter appearance is meant to be used when the async-select is used as a filter.
@@ -256,8 +256,7 @@ export type TSearchSelectInputProps = {
256
256
  count?: number;
257
257
  };
258
258
  declare const SearchSelectInput: {
259
- (props: TSearchSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
260
- defaultProps: Pick<TSearchSelectInputProps, "value" | "appearance" | "controlShouldRenderValue" | "maxMenuHeight" | "menuPortalZIndex" | "optionStyle">;
259
+ ({ value, menuPortalZIndex, maxMenuHeight, controlShouldRenderValue, appearance, optionStyle, ...props }: TSearchSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
261
260
  displayName: string;
262
261
  };
263
262
  export default SearchSelectInput;
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": "19.20.1",
4
+ "version": "19.22.0",
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": "19.20.1",
25
- "@commercetools-uikit/design-system": "19.20.1",
26
- "@commercetools-uikit/select-utils": "19.20.1",
27
- "@commercetools-uikit/spacings": "19.20.1",
28
- "@commercetools-uikit/text": "19.20.1",
29
- "@commercetools-uikit/utils": "19.20.1",
24
+ "@commercetools-uikit/async-select-input": "19.22.0",
25
+ "@commercetools-uikit/design-system": "19.22.0",
26
+ "@commercetools-uikit/select-utils": "19.22.0",
27
+ "@commercetools-uikit/spacings": "19.22.0",
28
+ "@commercetools-uikit/text": "19.22.0",
29
+ "@commercetools-uikit/utils": "19.22.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "prop-types": "15.8.1"