@commercetools-uikit/selectable-search-input 19.20.1 → 19.22.0

package/dist/commercetools-uikit-selectable-search-input.cjs.prod.js

@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
 require('prop-types');
@@ -30,7 +31,6 @@ var selectUtils = require('@commercetools-uikit/select-utils');
 var react = require('@emotion/react');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var designSystem = require('@commercetools-uikit/design-system');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var reactIntl = require('react-intl');
 var Select = require('react-select');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
@@ -192,13 +192,13 @@ const createSelectableSelectStyles = _ref => {
   });
 };
 
-const _excluded = ["id", "dataProps"];
+const _excluded$1 = ["id", "dataProps"];
 function ownKeys$1(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; }
 function _objectSpread$1(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$1(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$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const SingleValue = _ref => {
   let id = _ref.id,
     dataProps = _ref.dataProps,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return jsxRuntime.jsx(Select.components.SingleValue, _objectSpread$1(_objectSpread$1({}, props), {}, {
     children: jsxRuntime.jsx("label", _objectSpread$1(_objectSpread$1({
       htmlFor: id
@@ -255,6 +255,7 @@ const SelectableSelect = props => {
 SelectableSelect.propTypes = {};
 var SelectableSelect$1 = SelectableSelect;
 
+const _excluded = ["horizontalConstraint", "isClearable", "menuHorizontalConstraint", "showSubmitButton", "menuPortalZIndex"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const Container = /*#__PURE__*/_styled__default["default"]("div", {
@@ -265,14 +266,6 @@ const Container = /*#__PURE__*/_styled__default["default"]("div", {
 } );
 const getTextInputName = name => name ? `${name}.textInput` : undefined;
 const getDropdownName = name => name ? `${name}.dropdown` : undefined;
-const defaultProps = {
-  horizontalConstraint: 'scale',
-  isClearable: true,
-  menuHorizontalConstraint: 3,
-  showSubmitButton: true,
-  menuPortalZIndex: 1,
-  options: []
-};
 const selectableSearchInputSequentialId = utils.createSequentialId('selectable-search-input-');
 const isOptionObject = option => option.options !== undefined;
 const transformDataProps = dataProps => {
@@ -284,8 +277,19 @@ const transformDataProps = dataProps => {
     return [`data-${key}`, value];
   }));
 };
-const SelectableSearchInput = props => {
+const SelectableSearchInput = _ref3 => {
   var _context2;
+  let _ref3$horizontalConst = _ref3.horizontalConstraint,
+    horizontalConstraint = _ref3$horizontalConst === void 0 ? 'scale' : _ref3$horizontalConst,
+    _ref3$isClearable = _ref3.isClearable,
+    isClearable = _ref3$isClearable === void 0 ? true : _ref3$isClearable,
+    _ref3$menuHorizontalC = _ref3.menuHorizontalConstraint,
+    menuHorizontalConstraint = _ref3$menuHorizontalC === void 0 ? 3 : _ref3$menuHorizontalC,
+    _ref3$showSubmitButto = _ref3.showSubmitButton,
+    showSubmitButton = _ref3$showSubmitButto === void 0 ? true : _ref3$showSubmitButto,
+    _ref3$menuPortalZInde = _ref3.menuPortalZIndex,
+    menuPortalZIndex = _ref3$menuPortalZInde === void 0 ? 1 : _ref3$menuPortalZInde,
+    props = _objectWithoutProperties(_ref3, _excluded);
   const _useToggleState = hooks.useToggleState(false),
     _useToggleState2 = _slicedToArray(_useToggleState, 2),
     dropdownHasFocus = _useToggleState2[0],
@@ -300,6 +304,13 @@ const SelectableSearchInput = props => {
     setSearchOption = _useState4[1];
   const containerRef = react$1.useRef(null);
   const textInputRef = react$1.useRef(null);
+  const allProps = _objectSpread({
+    horizontalConstraint,
+    isClearable,
+    menuHorizontalConstraint,
+    showSubmitButton,
+    menuPortalZIndex
+  }, props);
   const legacyDataProps = utils.filterDataAttributes(props);
   const transformedSelectDataProps = transformDataProps(props.selectDataProps);
   const transformedInputDataProps = transformDataProps(props.inputDataProps);
@@ -316,7 +327,7 @@ const SelectableSearchInput = props => {
   const selectablSearchInputId = hooks.useFieldId(props.id, selectableSearchInputSequentialId);
   if (!props.isReadOnly) ;
   selectUtils.warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'SelectableSearchInput'
   });
@@ -426,14 +437,14 @@ const SelectableSearchInput = props => {
     textInputRef.current?.focus();
   }, [props.onChange, selectablSearchInputId, name]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
-    max: props.horizontalConstraint,
+    max: horizontalConstraint,
     children: jsxRuntime.jsxs(Container, {
       ref: containerRef,
       onBlur: handleContainerBlur,
       "data-testid": "selectable-search-input-container",
       children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
-        max: props.menuHorizontalConstraint,
-        children: jsxRuntime.jsx(SelectableSelect$1, _objectSpread(_objectSpread({}, props), {}, {
+        max: menuHorizontalConstraint,
+        children: jsxRuntime.jsx(SelectableSelect$1, _objectSpread(_objectSpread({}, allProps), {}, {
           id: SelectableSearchInput.getDropdownId(selectablSearchInputId),
           name: getDropdownName(props.name),
           dropdownHasFocus: dropdownHasFocus,
@@ -447,7 +458,7 @@ const SelectableSearchInput = props => {
           selectCustomComponents: props.selectCustomComponents
         }))
       }), jsxRuntime.jsxs("div", {
-        css: [getSelectableSearchInputContainerStyles(props), dropdownHasFocus && !props.isReadOnly && /*#__PURE__*/react.css("border-left-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{border-left-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), "" , "" ],
+        css: [getSelectableSearchInputContainerStyles(allProps), dropdownHasFocus && !props.isReadOnly && /*#__PURE__*/react.css("border-left-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{border-left-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), "" , "" ],
         children: [jsxRuntime.jsx("input", _objectSpread(_objectSpread(_objectSpread({
           ref: textInputRef,
           id: SelectableSearchInput.getTextInputId(selectablSearchInputId),
@@ -464,7 +475,7 @@ const SelectableSearchInput = props => {
           autoComplete: props.autoComplete,
           "aria-readonly": props.isReadOnly,
           contentEditable: !props.isReadOnly,
-          css: getSelectableSearchInputStyles(props)
+          css: getSelectableSearchInputStyles(allProps)
         }, transformedInputDataProps), legacyDataProps), {}, {
           /* ARIA */
           "aria-invalid": props['aria-invalid'],
@@ -475,18 +486,18 @@ const SelectableSearchInput = props => {
               handleSubmit(event);
             }
           }
-        })), props.isClearable && searchInputValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        })), isClearable && searchInputValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
           icon: jsxRuntime.jsx(icons.CloseIcon, {}),
           size: props.isCondensed ? '10' : '20',
           label: 'clear-button',
           onClick: handleClear,
-          css: getClearIconButtonStyles(props)
-        }), props.showSubmitButton && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+          css: getClearIconButtonStyles(allProps)
+        }), showSubmitButton && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
           icon: jsxRuntime.jsx(icons.SearchIcon, {}),
           size: props.isCondensed ? '20' : '40',
           label: 'search-button',
           onClick: handleSubmit,
-          css: getSearchIconButtonStyles(props),
+          css: getSearchIconButtonStyles(allProps),
           isDisabled: props.isDisabled
         }), props.rightActionIcon && props.rightActionProps && jsxRuntime.jsx("div", {
           css: /*#__PURE__*/react.css("order:4;margin-left:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
@@ -503,7 +514,6 @@ const SelectableSearchInput = props => {
 };
 SelectableSearchInput.propTypes = {};
 SelectableSearchInput.displayName = 'SelectableSearchInput';
-SelectableSearchInput.defaultProps = defaultProps;
 SelectableSearchInput.isEmpty = formValue => {
   var _context3;
   return !formValue || _trimInstanceProperty__default["default"](_context3 = formValue.text).call(_context3) === '';
@@ -513,7 +523,7 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.20.1";
+var version = "19.22.0";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;