@commercetools-uikit/async-select-field 13.0.2 → 14.0.1

package/README.md

@@ -145,3 +145,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
+
+### `AsyncSelectField.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;
+};
+
+<AsyncSelectField
+  // ...
+  name="my-field"
+  errors={AsyncSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

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

@@ -61,6 +61,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var sequentialId = utils.createSequentialId('async-select-field-');
+var sequentialErrorsId = utils.createSequentialId('async-select-field-error-')();
 
 var hasErrors = function hasErrors(errors) {
   var _context;
@@ -99,7 +100,7 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
       var hasError = AsyncSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
 
       if (this.props.hintIcon) {
-        process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'TextField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
+        process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'AsyncSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
       }
 
       if (this.props.isMulti) {
@@ -125,6 +126,8 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
             hasError: hasError,
             "aria-label": this.props['aria-label'],
             "aria-labelledby": this.props['aria-labelledby'],
+            "aria-invalid": hasError,
+            "aria-errormessage": sequentialErrorsId,
             isAutofocussed: this.props.isAutofocussed,
             backspaceRemovesValue: this.props.backspaceRemovesValue,
             components: this.props.components,
@@ -160,6 +163,7 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
             showOptionGroupDivider: this.props.showOptionGroupDivider,
             iconLeft: this.props.iconLeft
           }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
+            id: sequentialErrorsId,
             errors: this.props.errors,
             isVisible: hasError,
             renderError: this.props.renderError
@@ -167,6 +171,17 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
         })
       });
     }
+  }], [{
+    key: "toFieldErrors",
+    value:
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
+    function toFieldErrors(errors) {
+      return errors;
+    }
   }]);
 
   return AsyncSelectField;
@@ -208,7 +223,7 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.2";
+var version = "14.0.1";
 
 exports["default"] = AsyncSelectField;
 exports.version = version;

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

@@ -59,6 +59,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var sequentialId = utils.createSequentialId('async-select-field-');
+var sequentialErrorsId = utils.createSequentialId('async-select-field-error-')();
 
 var hasErrors = function hasErrors(errors) {
   var _context;
@@ -118,6 +119,8 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
             hasError: hasError,
             "aria-label": this.props['aria-label'],
             "aria-labelledby": this.props['aria-labelledby'],
+            "aria-invalid": hasError,
+            "aria-errormessage": sequentialErrorsId,
             isAutofocussed: this.props.isAutofocussed,
             backspaceRemovesValue: this.props.backspaceRemovesValue,
             components: this.props.components,
@@ -153,6 +156,7 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
             showOptionGroupDivider: this.props.showOptionGroupDivider,
             iconLeft: this.props.iconLeft
           }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default["default"], {
+            id: sequentialErrorsId,
             errors: this.props.errors,
             isVisible: hasError,
             renderError: this.props.renderError
@@ -160,6 +164,17 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
         })
       });
     }
+  }], [{
+    key: "toFieldErrors",
+    value:
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
+    function toFieldErrors(errors) {
+      return errors;
+    }
   }]);
 
   return AsyncSelectField;
@@ -178,7 +193,7 @@ AsyncSelectField.getDerivedStateFromProps = function (props, state) {
 AsyncSelectField.propTypes = {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.2";
+var version = "14.0.1";
 
 exports["default"] = AsyncSelectField;
 exports.version = version;

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

@@ -35,6 +35,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var sequentialId = createSequentialId('async-select-field-');
+var sequentialErrorsId = createSequentialId('async-select-field-error-')();
 
 var hasErrors = function hasErrors(errors) {
   var _context;
@@ -73,7 +74,7 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
       var hasError = AsyncSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
 
       if (this.props.hintIcon) {
-        process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'TextField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
+        process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'AsyncSelectField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
       }
 
       if (this.props.isMulti) {
@@ -99,6 +100,8 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
             hasError: hasError,
             "aria-label": this.props['aria-label'],
             "aria-labelledby": this.props['aria-labelledby'],
+            "aria-invalid": hasError,
+            "aria-errormessage": sequentialErrorsId,
             isAutofocussed: this.props.isAutofocussed,
             backspaceRemovesValue: this.props.backspaceRemovesValue,
             components: this.props.components,
@@ -134,6 +137,7 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
             showOptionGroupDivider: this.props.showOptionGroupDivider,
             iconLeft: this.props.iconLeft
           }, filterDataAttributes(this.props))), jsx(FieldErrors, {
+            id: sequentialErrorsId,
             errors: this.props.errors,
             isVisible: hasError,
             renderError: this.props.renderError
@@ -141,6 +145,17 @@ var AsyncSelectField = /*#__PURE__*/function (_Component) {
         })
       });
     }
+  }], [{
+    key: "toFieldErrors",
+    value:
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
+    function toFieldErrors(errors) {
+      return errors;
+    }
   }]);
 
   return AsyncSelectField;
@@ -182,6 +197,6 @@ AsyncSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.2";
+var version = "14.0.1";
 
 export { AsyncSelectField as default, version };

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

@@ -4,6 +4,9 @@ import type { GroupBase, OptionsOrGroups, ActionMeta } from 'react-select';
 declare type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
 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 TEvent = {
     target: {
         name?: string;
@@ -69,6 +72,7 @@ export default class AsyncSelectField extends Component<TAsyncSelectFieldProps,
     static getDerivedStateFromProps: (props: TAsyncSelectFieldProps, state: TAsyncSelectFieldState) => {
         id: string;
     };
+    static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-select-field",
   "description": "A controlled input component with validation states and a label getting a selection from an asynchronously loaded list from the user.",
-  "version": "13.0.2",
+  "version": "14.0.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
     "directory": "packages/components/fields/async-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,19 +19,19 @@
   "module": "dist/commercetools-uikit-async-select-field.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.17.2",
-    "@babel/runtime-corejs3": "7.17.2",
-    "@commercetools-uikit/async-select-input": "13.0.2",
-    "@commercetools-uikit/constraints": "13.0.2",
-    "@commercetools-uikit/design-system": "13.0.0",
-    "@commercetools-uikit/field-errors": "13.0.2",
-    "@commercetools-uikit/field-label": "13.0.2",
-    "@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/async-select-input": "14.0.1",
+    "@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.1",
+    "@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",
-    "react-required-if": "1.0.3"
+    "react-intl": "^5.24.6"
   },
   "devDependencies": {
     "react": "17.0.2"