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

package/README.md

@@ -111,7 +111,7 @@ export default Example;
 | `menuShouldBlockScroll`  | `boolean`                                                                                             |          |         | whether the menu should block scroll while open                                                                                                                                                                                                                                                                                                                             |
 | `showOptionGroupDivider` | `boolean`                                                                                             |          |         | Determines if option groups will be separated by a divider                                                                                                                                                                                                                                                                                                                  |
 | `onBlur`                 | `Function`<br/>[See signature.](#signature-onBlur)                                                    |          |         | Handle blur events on the control                                                                                                                                                                                                                                                                                                                                           |
-| `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`.                                                                                                      |
+| `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`.                                                                                                      |
 | `onFocus`                | `AsyncProps['onFocus']`                                                                               |          |         | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                          |
 | `onInputChange`          | `AsyncProps['onInputChange']`                                                                         |          |         | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                           |
 | `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)                                                                                                                                                                                                                               |
@@ -136,13 +136,13 @@ export default Example;
 ### Signature `onBlur`
 
 ```ts
-(event: TEvent) => void
+(event: TCustomEvent) => void
 ```
 
 ### Signature `onChange`
 
 ```ts
-(event: TEvent, info: ActionMeta<unknown>) => void
+(event: TCustomEvent, info: ActionMeta<unknown>) => void
 ```
 
 ### Signature `renderError`
@@ -178,3 +178,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `SearchSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<SearchSelectField
+  // ...
+  name="my-field"
+  errors={SearchSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

package/dist/commercetools-uikit-search-select-field.cjs.dev.js

@@ -18,6 +18,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var react = require('react');
 var utils = require('@commercetools-uikit/utils');
 var Constraints = require('@commercetools-uikit/constraints');
+var hooks = require('@commercetools-uikit/hooks');
 var Spacings = require('@commercetools-uikit/spacings');
 var FieldLabel = require('@commercetools-uikit/field-label');
 var SearchSelectInput = require('@commercetools-uikit/search-select-input');
@@ -59,7 +60,11 @@ var sequentialErrorsId = utils.createSequentialId('search-select-field-error-')(
 
 var SearchSelectField = function SearchSelectField(props) {
   var hasError = Boolean(props.touched) && hasErrors(props.errors);
-  var id = props.id || sequentialId();
+  var id = hooks.useFieldId(props.id, sequentialId);
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'SearchSelectField: `onChange` is required when field is not read only.') : void 0;
+  }
 
   if (props.hintIcon) {
     process.env.NODE_ENV !== "production" ? utils.warning(typeof props.hint === 'string' || /*#__PURE__*/react.isValidElement(props.hint), 'SearchSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
@@ -144,7 +149,7 @@ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   menuShouldBlockScroll: _pt__default["default"].bool,
   showOptionGroupDivider: _pt__default["default"].bool,
   onBlur: _pt__default["default"].func,
-  onChange: _pt__default["default"].func.isRequired,
+  onChange: _pt__default["default"].func,
   loadingMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].func]),
   optionType: _pt__default["default"].oneOf(['single-property', 'double-property', 'multiple-properties']),
   errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
@@ -159,10 +164,20 @@ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   badge: _pt__default["default"].node
 } : {};
 SearchSelectField.displayName = 'SearchSelectField';
+/**
+ * Use this function to convert the Formik `errors` object type to
+ * our custom field errors type.
+ * This is primarly useful when using TypeScript.
+ */
+
+SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
+  return errors;
+};
+
 var SearchSelectField$1 = SearchSelectField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 exports["default"] = SearchSelectField$1;
 exports.version = version;

package/dist/commercetools-uikit-search-select-field.cjs.prod.js

@@ -18,6 +18,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 require('react');
 var utils = require('@commercetools-uikit/utils');
 var Constraints = require('@commercetools-uikit/constraints');
+var hooks = require('@commercetools-uikit/hooks');
 var Spacings = require('@commercetools-uikit/spacings');
 var FieldLabel = require('@commercetools-uikit/field-label');
 var SearchSelectInput = require('@commercetools-uikit/search-select-input');
@@ -57,7 +58,9 @@ var sequentialErrorsId = utils.createSequentialId('search-select-field-error-')(
 
 var SearchSelectField = function SearchSelectField(props) {
   var hasError = Boolean(props.touched) && hasErrors(props.errors);
-  var id = props.id || sequentialId();
+  var id = hooks.useFieldId(props.id, sequentialId);
+
+  if (!props.isReadOnly) ;
 
   if (props.hintIcon) ;
 
@@ -127,10 +130,20 @@ var SearchSelectField = function SearchSelectField(props) {
 
 SearchSelectField.propTypes = {};
 SearchSelectField.displayName = 'SearchSelectField';
+/**
+ * Use this function to convert the Formik `errors` object type to
+ * our custom field errors type.
+ * This is primarly useful when using TypeScript.
+ */
+
+SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
+  return errors;
+};
+
 var SearchSelectField$1 = SearchSelectField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 exports["default"] = SearchSelectField$1;
 exports.version = version;

package/dist/commercetools-uikit-search-select-field.esm.js

@@ -14,6 +14,7 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import { isValidElement } from 'react';
 import { createSequentialId, warning, filterDataAttributes } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
+import { useFieldId } from '@commercetools-uikit/hooks';
 import Spacings from '@commercetools-uikit/spacings';
 import FieldLabel from '@commercetools-uikit/field-label';
 import SearchSelectInput from '@commercetools-uikit/search-select-input';
@@ -35,7 +36,11 @@ var sequentialErrorsId = createSequentialId('search-select-field-error-')();
 
 var SearchSelectField = function SearchSelectField(props) {
   var hasError = Boolean(props.touched) && hasErrors(props.errors);
-  var id = props.id || sequentialId();
+  var id = useFieldId(props.id, sequentialId);
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'SearchSelectField: `onChange` is required when field is not read only.') : void 0;
+  }
 
   if (props.hintIcon) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.hint === 'string' || /*#__PURE__*/isValidElement(props.hint), 'SearchSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
@@ -120,7 +125,7 @@ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   menuShouldBlockScroll: _pt.bool,
   showOptionGroupDivider: _pt.bool,
   onBlur: _pt.func,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   loadingMessage: _pt.oneOfType([_pt.string, _pt.func]),
   optionType: _pt.oneOf(['single-property', 'double-property', 'multiple-properties']),
   errors: _pt.objectOf(_pt.bool),
@@ -135,9 +140,19 @@ SearchSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   badge: _pt.node
 } : {};
 SearchSelectField.displayName = 'SearchSelectField';
+/**
+ * Use this function to convert the Formik `errors` object type to
+ * our custom field errors type.
+ * This is primarly useful when using TypeScript.
+ */
+
+SearchSelectField.toFieldErrors = function toFieldErrors(errors) {
+  return errors;
+};
+
 var SearchSelectField$1 = SearchSelectField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 export { SearchSelectField$1 as default, version };

package/dist/declarations/src/search-select-field.d.ts

@@ -2,15 +2,19 @@ import { type ReactNode, type MouseEvent, type KeyboardEvent, type ReactElement
 import type { ActionMeta, GroupBase } from 'react-select';
 import type { AsyncProps } from 'react-select/async';
 declare type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
-declare type TEvent = {
+declare type TCustomEvent = {
     target: {
-        name?: string;
+        id?: ReactSelectAsyncProps['inputId'];
+        name?: ReactSelectAsyncProps['name'];
         value?: unknown;
     };
     persist: () => void;
 };
-declare type TFieldErrors = Record<string, boolean>;
 declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
+declare type TFieldErrors = Record<string, boolean>;
+declare type TCustomFormErrors<Values> = {
+    [K in keyof Values]?: TFieldErrors;
+};
 declare type TSearchSelectFieldProps = {
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
     'aria-label'?: ReactSelectAsyncProps['aria-label'];
@@ -37,8 +41,8 @@ declare type TSearchSelectFieldProps = {
     menuPortalZIndex?: number;
     menuShouldBlockScroll?: boolean;
     showOptionGroupDivider?: boolean;
-    onBlur?: (event: TEvent) => void;
-    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onBlur?: (event: TCustomEvent) => void;
+    onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
     onFocus?: ReactSelectAsyncProps['onFocus'];
     onInputChange?: ReactSelectAsyncProps['onInputChange'];
     tabSelectsValue?: ReactSelectAsyncProps['tabSelectsValue'];
@@ -61,5 +65,6 @@ declare type TSearchSelectFieldProps = {
 declare const SearchSelectField: {
     (props: TSearchSelectFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
+    toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
 };
 export default SearchSelectField;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/search-select-field",
   "description": "A search select field built on top of search select input, allowing users to asynchronously search for options",
-  "version": "13.0.4",
+  "version": "14.0.2",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
     "directory": "packages/components/fields/search-select-field"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "design system", "react", "uikit"],
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -19,15 +19,16 @@
   "module": "dist/commercetools-uikit-search-select-field.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.17.2",
-    "@babel/runtime-corejs3": "7.17.2",
-    "@commercetools-uikit/constraints": "13.0.2",
-    "@commercetools-uikit/design-system": "13.0.0",
-    "@commercetools-uikit/field-errors": "13.0.4",
-    "@commercetools-uikit/field-label": "13.0.4",
-    "@commercetools-uikit/search-select-input": "13.0.4",
-    "@commercetools-uikit/spacings": "13.0.2",
-    "@commercetools-uikit/utils": "13.0.2",
+    "@babel/runtime": "^7.17.2",
+    "@babel/runtime-corejs3": "^7.17.2",
+    "@commercetools-uikit/constraints": "14.0.1",
+    "@commercetools-uikit/design-system": "14.0.0",
+    "@commercetools-uikit/field-errors": "14.0.1",
+    "@commercetools-uikit/field-label": "14.0.2",
+    "@commercetools-uikit/hooks": "14.0.1",
+    "@commercetools-uikit/search-select-input": "14.0.2",
+    "@commercetools-uikit/spacings": "14.0.1",
+    "@commercetools-uikit/utils": "14.0.1",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "prop-types": "15.8.1",