@commercetools-uikit/search-text-input 15.12.0 → 15.13.1

package/dist/commercetools-uikit-search-text-input.cjs.dev.js

@@ -12,7 +12,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
-var _pt = require('prop-types');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var react$1 = require('react');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
@@ -34,7 +33,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
@@ -136,8 +134,7 @@ var defaultProps = {
   horizontalConstraint: 'scale',
   isClearable: true
 };
-
-var SearchTextInput = function SearchTextInput(props) {
+var SearchTextInput = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'TextInput: `onChange` is required when is not read only.') : void 0;
   }
@@ -175,7 +172,7 @@ var SearchTextInput = function SearchTextInput(props) {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsxs("div", {
       css: getSearchTextInputContainerStyles(props),
-      children: [jsxRuntime.jsx("input", _objectSpread({
+      children: [jsxRuntime.jsx("input", _objectSpread(_objectSpread({
         id: props.id,
         name: props.name,
         type: "text",
@@ -192,8 +189,15 @@ var SearchTextInput = function SearchTextInput(props) {
         contentEditable: !props.isReadOnly,
         "aria-invalid": props['aria-invalid'],
         "aria-errormessage": props['aria-errormessage'],
-        css: getSearchTextInputStyles(props)
-      }, utils.filterDataAttributes(props))), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        css: getSearchTextInputStyles(props),
+        ref: forwardedRef
+      }, utils.filterDataAttributes(props)), {}, {
+        onKeyDown: function onKeyDown(event) {
+          if (!props.isReadOnly && event.key === 'Enter') {
+            handleSubmit(event);
+          }
+        }
+      })), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
         icon: jsxRuntime.jsx(icons.CloseIcon, {
           size: "medium"
         }),
@@ -208,40 +212,19 @@ var SearchTextInput = function SearchTextInput(props) {
       })]
     })
   });
-};
-
-SearchTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  id: _pt__default["default"].string,
-  autoComplete: _pt__default["default"].string,
-  'aria-invalid': _pt__default["default"].bool,
-  'aria-errormessage': _pt__default["default"].string,
-  name: _pt__default["default"].string,
-  value: _pt__default["default"].string.isRequired,
-  onChange: _pt__default["default"].func,
-  onBlur: _pt__default["default"].func,
-  onFocus: _pt__default["default"].func,
-  onSubmit: _pt__default["default"].func.isRequired,
-  onReset: _pt__default["default"].func.isRequired,
-  isAutofocussed: _pt__default["default"].bool,
-  isDisabled: _pt__default["default"].bool,
-  isReadOnly: _pt__default["default"].bool,
-  hasError: _pt__default["default"].bool,
-  hasWarning: _pt__default["default"].bool,
-  placeholder: _pt__default["default"].string,
-  isClearable: _pt__default["default"].bool,
-  horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
-} : {};
+});
 SearchTextInput.displayName = 'SearchTextInput';
 SearchTextInput.defaultProps = defaultProps;
 
-SearchTextInput.isEmpty = function (value) {
+var isEmpty = function isEmpty(value) {
   return !value || _trimInstanceProperty__default["default"](value).call(value).length === 0;
 };
 
+SearchTextInput.isEmpty = isEmpty;
 var SearchTextInput$1 = SearchTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.12.0";
+var version = "15.13.1";
 
 exports["default"] = SearchTextInput$1;
 exports.version = version;

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

@@ -12,7 +12,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
-require('prop-types');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var react$1 = require('react');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
@@ -128,8 +127,7 @@ var defaultProps = {
   horizontalConstraint: 'scale',
   isClearable: true
 };
-
-var SearchTextInput = function SearchTextInput(props) {
+var SearchTextInput = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
   if (!props.isReadOnly) ;
 
   var _useState = react$1.useState(props.value || ''),
@@ -165,7 +163,7 @@ var SearchTextInput = function SearchTextInput(props) {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsxs("div", {
       css: getSearchTextInputContainerStyles(props),
-      children: [jsxRuntime.jsx("input", _objectSpread({
+      children: [jsxRuntime.jsx("input", _objectSpread(_objectSpread({
         id: props.id,
         name: props.name,
         type: "text",
@@ -182,8 +180,15 @@ var SearchTextInput = function SearchTextInput(props) {
         contentEditable: !props.isReadOnly,
         "aria-invalid": props['aria-invalid'],
         "aria-errormessage": props['aria-errormessage'],
-        css: getSearchTextInputStyles(props)
-      }, utils.filterDataAttributes(props))), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        css: getSearchTextInputStyles(props),
+        ref: forwardedRef
+      }, utils.filterDataAttributes(props)), {}, {
+        onKeyDown: function onKeyDown(event) {
+          if (!props.isReadOnly && event.key === 'Enter') {
+            handleSubmit(event);
+          }
+        }
+      })), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
         icon: jsxRuntime.jsx(icons.CloseIcon, {
           size: "medium"
         }),
@@ -198,20 +203,19 @@ var SearchTextInput = function SearchTextInput(props) {
       })]
     })
   });
-};
-
-SearchTextInput.propTypes = {};
+});
 SearchTextInput.displayName = 'SearchTextInput';
 SearchTextInput.defaultProps = defaultProps;
 
-SearchTextInput.isEmpty = function (value) {
+var isEmpty = function isEmpty(value) {
   return !value || _trimInstanceProperty__default["default"](value).call(value).length === 0;
 };
 
+SearchTextInput.isEmpty = isEmpty;
 var SearchTextInput$1 = SearchTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.12.0";
+var version = "15.13.1";
 
 exports["default"] = SearchTextInput$1;
 exports.version = version;

package/dist/commercetools-uikit-search-text-input.esm.js

@@ -8,9 +8,8 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
-import _pt from 'prop-types';
 import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
 import Constraints from '@commercetools-uikit/constraints';
 import { CloseIcon, SearchIcon } from '@commercetools-uikit/icons';
@@ -117,8 +116,7 @@ var defaultProps = {
   horizontalConstraint: 'scale',
   isClearable: true
 };
-
-var SearchTextInput = function SearchTextInput(props) {
+var SearchTextInput = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'TextInput: `onChange` is required when is not read only.') : void 0;
   }
@@ -156,7 +154,7 @@ var SearchTextInput = function SearchTextInput(props) {
     max: props.horizontalConstraint,
     children: jsxs("div", {
       css: getSearchTextInputContainerStyles(props),
-      children: [jsx("input", _objectSpread({
+      children: [jsx("input", _objectSpread(_objectSpread({
         id: props.id,
         name: props.name,
         type: "text",
@@ -173,8 +171,15 @@ var SearchTextInput = function SearchTextInput(props) {
         contentEditable: !props.isReadOnly,
         "aria-invalid": props['aria-invalid'],
         "aria-errormessage": props['aria-errormessage'],
-        css: getSearchTextInputStyles(props)
-      }, filterDataAttributes(props))), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsx(SecondaryIconButton, {
+        css: getSearchTextInputStyles(props),
+        ref: forwardedRef
+      }, filterDataAttributes(props)), {}, {
+        onKeyDown: function onKeyDown(event) {
+          if (!props.isReadOnly && event.key === 'Enter') {
+            handleSubmit(event);
+          }
+        }
+      })), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsx(SecondaryIconButton, {
         icon: jsx(CloseIcon, {
           size: "medium"
         }),
@@ -189,39 +194,18 @@ var SearchTextInput = function SearchTextInput(props) {
       })]
     })
   });
-};
-
-SearchTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  id: _pt.string,
-  autoComplete: _pt.string,
-  'aria-invalid': _pt.bool,
-  'aria-errormessage': _pt.string,
-  name: _pt.string,
-  value: _pt.string.isRequired,
-  onChange: _pt.func,
-  onBlur: _pt.func,
-  onFocus: _pt.func,
-  onSubmit: _pt.func.isRequired,
-  onReset: _pt.func.isRequired,
-  isAutofocussed: _pt.bool,
-  isDisabled: _pt.bool,
-  isReadOnly: _pt.bool,
-  hasError: _pt.bool,
-  hasWarning: _pt.bool,
-  placeholder: _pt.string,
-  isClearable: _pt.bool,
-  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
-} : {};
+});
 SearchTextInput.displayName = 'SearchTextInput';
 SearchTextInput.defaultProps = defaultProps;
 
-SearchTextInput.isEmpty = function (value) {
+var isEmpty = function isEmpty(value) {
   return !value || _trimInstanceProperty(value).call(value).length === 0;
 };
 
+SearchTextInput.isEmpty = isEmpty;
 var SearchTextInput$1 = SearchTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.12.0";
+var version = "15.13.1";
 
 export { SearchTextInput$1 as default, version };

package/dist/declarations/src/search-text-input.d.ts

@@ -1,4 +1,4 @@
-import { type FocusEventHandler, type ChangeEventHandler } from 'react';
+import { type FocusEventHandler, type ChangeEventHandler, type ForwardRefExoticComponent, type RefAttributes } from 'react';
 export type TSearchTextInputProps = {
     id?: string;
     autoComplete?: string;
@@ -20,10 +20,9 @@ export type TSearchTextInputProps = {
     isClearable?: boolean;
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
 };
-declare const SearchTextInput: {
-    (props: TSearchTextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-    defaultProps: Pick<TSearchTextInputProps, "isClearable" | "horizontalConstraint">;
-    isEmpty(value: TSearchTextInputProps['value']): boolean;
+type StaticProps = {
+    isEmpty: typeof isEmpty;
 };
+declare const SearchTextInput: ForwardRefExoticComponent<TSearchTextInputProps & RefAttributes<HTMLInputElement>> & Partial<StaticProps>;
+declare const isEmpty: (value: TSearchTextInputProps['value']) => boolean;
 export default SearchTextInput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/search-text-input",
   "description": "A controlled search text input component for single-line strings with validation states.",
-  "version": "15.12.0",
+  "version": "15.13.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,12 +21,12 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "15.12.0",
-    "@commercetools-uikit/design-system": "15.12.0",
-    "@commercetools-uikit/icons": "15.12.0",
-    "@commercetools-uikit/input-utils": "15.12.0",
-    "@commercetools-uikit/secondary-icon-button": "15.12.0",
-    "@commercetools-uikit/utils": "15.12.0",
+    "@commercetools-uikit/constraints": "15.13.1",
+    "@commercetools-uikit/design-system": "15.13.1",
+    "@commercetools-uikit/icons": "15.13.1",
+    "@commercetools-uikit/input-utils": "15.13.1",
+    "@commercetools-uikit/secondary-icon-button": "15.13.1",
+    "@commercetools-uikit/utils": "15.13.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1"