@commercetools-uikit/selectable-search-input 19.4.0 → 19.6.0

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

@@ -22,6 +22,7 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var react$1 = require('react');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var IconButton = require('@commercetools-uikit/icon-button');
 var Constraints = require('@commercetools-uikit/constraints');
 var icons = require('@commercetools-uikit/icons');
 var utils = require('@commercetools-uikit/utils');
@@ -53,6 +54,7 @@ var _flatMapInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatMapIns
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 
@@ -98,8 +100,8 @@ const getInputBoxShadow = props => {
   }
   return designSystem.designTokens.shadowForInput;
 };
-const getSelectableSearchInputStyles = props => [inputUtils.getInputStyles(props), /*#__PURE__*/react.css("border:none;box-shadow:none;background:none;&,&:focus,&:focus:not(:read-only){box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}width:100%;color:", getInputFontColor(props), ";" + ("" ), "" )];
-const getButtonStyles = () => /*#__PURE__*/react.css("border:none;background:none;height:100%;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";margin-right:", designSystem.designTokens.spacing20, ";" + ("" ), "" );
+const getSelectableSearchInputStyles = props => [inputUtils.getInputStyles(props), /*#__PURE__*/react.css("border:none;box-shadow:none;background:none;&,&:focus,&:focus:not(:read-only){box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}width:100%;color:", getInputFontColor(props), ";order:2;margin-left:", designSystem.designTokens.spacing10, ";padding-left:0;padding-right:0;" + ("" ), "" )];
+const getButtonStyles = () => /*#__PURE__*/react.css("border:none;background:none;height:100%;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";" + ("" ), "" );
 const getIconColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
@@ -109,8 +111,8 @@ const getIconColor = (props, defaultColor) => {
   }
   return defaultColor;
 };
-const getClearIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("fill:", getIconColor(props, designSystem.designTokens.colorNeutral40), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.colorError), ";}" + ("" ), "" )];
-const getSearchIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.spacing25, ";fill:", getIconColor(props, designSystem.designTokens.colorNeutral60), ";cursor:", props.isReadOnly ? 'default' : 'pointer', ";&:hover{fill:", getIconColor(props, designSystem.designTokens.colorPrimary), ";}" + ("" ), "" )];
+const getClearIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("fill:", getIconColor(props, designSystem.designTokens.colorNeutral40), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.colorError), ";}order:3;margin-left:", designSystem.designTokens.spacing10, ";" + ("" ), "" )];
+const getSearchIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("fill:", getIconColor(props, designSystem.designTokens.colorNeutral60), ";cursor:", props.isReadOnly ? 'default' : 'pointer', ";&:hover{fill:", getIconColor(props, designSystem.designTokens.colorPrimary), ";}border-radius:0;order:1;" + ("" ), "" )];
 const getBackgroundColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -120,7 +122,7 @@ const getBackgroundColor = (props, defaultColor) => {
   }
   return defaultColor;
 };
-const getSelectableSearchInputContainerStyles = props => [/*#__PURE__*/react.css("display:flex;align-items:center;background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInput), ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";box-sizing:border-box;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0;width:", props.horizontalConstraint === 'auto' ? 'auto' : '100%', ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";&::placeholder{color:", designSystem.designTokens.colorNeutral60, ";}&:hover{border-color:", getInputContainerBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInputWhenHovered), ";}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !props.isDisabled && !props.isReadOnly && /*#__PURE__*/react.css("&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 1px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
+const getSelectableSearchInputContainerStyles = props => [/*#__PURE__*/react.css("display:flex;align-items:center;background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInput), ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";box-sizing:border-box;border-top-left-radius:0;border-bottom-left-radius:0;width:", props.horizontalConstraint === 'auto' ? 'auto' : '100%', ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";padding-left:", designSystem.designTokens.spacing30, ";padding-right:", designSystem.designTokens.spacing30, ";&::placeholder{color:", designSystem.designTokens.colorNeutral60, ";}&:hover{border-color:", getInputContainerBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInputWhenHovered), ";}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !props.isDisabled && !props.isReadOnly && /*#__PURE__*/react.css("&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 1px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
 const createSelectableSelectStyles = _ref => {
   let hasWarning = _ref.hasWarning,
     hasError = _ref.hasError,
@@ -225,13 +227,13 @@ const SelectableSelect = props => {
     isSearchable: props.isReadOnly ? false : props.isMenuSearchable,
     maxMenuHeight: props.maxMenuHeight,
     closeMenuOnSelect: props.closeMenuOnSelect,
-    components: {
+    components: _objectSpread$1({
       SingleValue: innerProps => jsxRuntime.jsx(SingleValue, _objectSpread$1({
         id: props.id,
         dataProps: props.dataProps
       }, innerProps)),
       DropdownIndicator: selectUtils.DropdownIndicator
-    },
+    }, props.selectCustomComponents),
     options: props.options,
     menuIsOpen: props.isReadOnly ? false : undefined,
     placeholder: "",
@@ -310,6 +312,7 @@ const SelectableSearchInput = props => {
     return option;
   });
   const selectedOption = _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === searchInputOption);
+  if (props.rightActionIcon && !props.rightActionProps) ;
   const selectablSearchInputId = hooks.useFieldId(props.id, selectableSearchInputSequentialId);
   if (!props.isReadOnly) ;
   selectUtils.warnIfMenuPortalPropsAreMissing({
@@ -443,7 +446,8 @@ const SelectableSearchInput = props => {
           handleDropdownChange: handleDropdownChange,
           textInputRef: textInputRef,
           selectedOption: selectedOption,
-          dataProps: transformedSelectDataProps
+          dataProps: transformedSelectDataProps,
+          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, ";}" + ("" ), "" ), "" , "" ],
@@ -476,17 +480,25 @@ const SelectableSearchInput = props => {
           }
         })), props.isClearable && searchInputValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
           icon: jsxRuntime.jsx(icons.CloseIcon, {}),
-          size: props.isCondensed ? 'small' : 'medium',
+          size: props.isCondensed ? '10' : '20',
           label: 'clear-button',
           onClick: handleClear,
           css: getClearIconButtonStyles(props)
         }), props.showSubmitButton && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
           icon: jsxRuntime.jsx(icons.SearchIcon, {}),
-          size: props.isCondensed ? 'medium' : 'big',
+          size: props.isCondensed ? '20' : '40',
           label: 'search-button',
           onClick: handleSubmit,
           css: getSearchIconButtonStyles(props),
           isDisabled: props.isDisabled
+        }), props.rightActionIcon && props.rightActionProps && jsxRuntime.jsx("div", {
+          css: /*#__PURE__*/react.css("order:4;margin-left:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
+          children: jsxRuntime.jsx(IconButton__default["default"], _objectSpread({
+            theme: "primary",
+            isDisabled: props.isDisabled || props.isReadOnly,
+            size: props.isCondensed ? '10' : '20',
+            icon: props.rightActionIcon
+          }, props.rightActionProps))
         })]
       })]
     })
@@ -504,7 +516,7 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.6.0";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;