npm - @commercetools-uikit/select-input - Versions diffs - 13.0.3 → 14.0.1 - Mend

@commercetools-uikit/select-input 13.0.3 → 14.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +7 -6
package/dist/commercetools-uikit-select-input.cjs.dev.js +38 -7
package/dist/commercetools-uikit-select-input.cjs.prod.js +39 -8
package/dist/commercetools-uikit-select-input.esm.js +39 -8
package/dist/declarations/src/select-input.d.ts +60 -1
package/package.json +10 -10

package/README.md CHANGED Viewed

@@ -67,6 +67,8 @@ export default Example;
 | `iconLeft`               | `ReactNode`                                                                                           |          |         | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.                                                                                                                                                                                                                                                                                                                                 |
 | `aria-label`             | `ReactSelectProps['aria-label']`                                                                      |          |         | Aria label (for assistive tech)&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                                                                                |
 | `aria-labelledby`        | `ReactSelectProps['aria-labelledby']`                                                                 |          |         | HTML ID of an element that should be used as the label (for assistive tech)&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                                    |
+| `aria-invalid`           | `ReactSelectProps['aria-invalid']`                                                                    |          |         | Indicate if the value entered in the input is invalid.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                                                         |
+| `aria-errormessage`      | `ReactSelectProps['aria-errormessage']`                                                               |          |         | HTML ID of an element containing an error message related to the input.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                                        |
 | `isAutofocussed`         | `boolean`                                                                                             |          |         | Focus the control when it is mounted                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `backspaceRemovesValue`  | `ReactSelectProps['backspaceRemovesValue']`                                                           |          |         | Remove the currently focused option when the user presses backspace&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                                            |
 | `components`             | `ReactSelectProps['components']`                                                                      |          |         | Map of components to overwrite the default ones, see what components you can override&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                          |
@@ -126,8 +128,7 @@ The options support a `isDisabled` property which will render the option with a
 ### `isTouched(touched)`
-Expects to be called with an array or boolean.
-Returns `true` when truthy.
+Returns truthy value for the Formik `touched` value of this input field.
 ## Components
@@ -138,24 +139,24 @@ Components available as static exports are:
 - `ClearIndicator`
 - `Control`
-- `DropdownIndicator`
-- `DownChevron`
 - `CrossIcon`
+- `DownChevron`
+- `DropdownIndicator`
 - `Group`
 - `GroupHeading`
 - `IndicatorsContainer`
 - `IndicatorSeparator`
 - `Input`
 - `LoadingIndicator`
+- `LoadingMessage`
 - `Menu`
 - `MenuList`
 - `MenuPortal`
-- `LoadingMessage`
-- `NoOptionsMessage`
 - `MultiValue`
 - `MultiValueContainer`
 - `MultiValueLabel`
 - `MultiValueRemove`
+- `NoOptionsMessage`
 - `Option`
 - `Placeholder`
 - `SelectContainer`

package/dist/commercetools-uikit-select-input.cjs.dev.js CHANGED Viewed

@@ -89,6 +89,8 @@ var SelectInput = function SelectInput(props) {
       children: jsxRuntime.jsx(Select__default["default"], {
         "aria-label": props['aria-label'],
         "aria-labelledby": props['aria-labelledby'],
+        "aria-invalid": props['aria-invalid'],
+        "aria-errormessage": props['aria-errormessage'],
         autoFocus: props.isAutofocussed,
         backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
         components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
@@ -212,21 +214,50 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   }))]),
   showOptionGroupDivider: _pt__default["default"].bool
 } : {};
-SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
-// conveniently handles both cases
+SelectInput.displayName = 'SelectInput';
+SelectInput.defaultProps = defaultProps;
+/**
+ * Expose static helper methods.
+ */
+// Both "true" and an empty array [] represent a touched state.
 SelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
+/**
+ * Expose react-select components for customization purposes.
+ */
-SelectInput.defaultProps = defaultProps;
-utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
-  isTouched: SelectInput.isTouched
-}));
+SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+SelectInput.Control = Select.components.Control;
+SelectInput.CrossIcon = Select.components.CrossIcon;
+SelectInput.DownChevron = Select.components.DownChevron;
+SelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+SelectInput.Group = Select.components.Group;
+SelectInput.GroupHeading = Select.components.GroupHeading;
+SelectInput.IndicatorSeparator = Select.components.IndicatorSeparator;
+SelectInput.IndicatorsContainer = Select.components.IndicatorsContainer;
+SelectInput.Input = Select.components.Input;
+SelectInput.LoadingIndicator = Select.components.LoadingIndicator;
+SelectInput.LoadingMessage = Select.components.LoadingMessage;
+SelectInput.Menu = Select.components.Menu;
+SelectInput.MenuList = Select.components.MenuList;
+SelectInput.MenuPortal = Select.components.MenuPortal;
+SelectInput.MultiValue = Select.components.MultiValue;
+SelectInput.MultiValueContainer = Select.components.MultiValueContainer;
+SelectInput.MultiValueLabel = Select.components.MultiValueLabel;
+SelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+SelectInput.NoOptionsMessage = Select.components.NoOptionsMessage;
+SelectInput.Option = Select.components.Option;
+SelectInput.Placeholder = Select.components.Placeholder;
+SelectInput.SelectContainer = Select.components.SelectContainer;
+SelectInput.SingleValue = Select.components.SingleValue;
+SelectInput.ValueContainer = Select.components.ValueContainer;
 var SelectInput$1 = SelectInput;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.3";
+var version = "14.0.1";
 exports["default"] = SelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-select-input.cjs.prod.js CHANGED Viewed

@@ -88,6 +88,8 @@ var SelectInput = function SelectInput(props) {
       children: jsxRuntime.jsx(Select__default["default"], {
         "aria-label": props['aria-label'],
         "aria-labelledby": props['aria-labelledby'],
+        "aria-invalid": props['aria-invalid'],
+        "aria-errormessage": props['aria-errormessage'],
         autoFocus: props.isAutofocussed,
         backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
         components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
@@ -193,21 +195,50 @@ var SelectInput = function SelectInput(props) {
 };
 SelectInput.propTypes = {};
-SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
-// conveniently handles both cases
+SelectInput.displayName = 'SelectInput';
+SelectInput.defaultProps = defaultProps;
+/**
+ * Expose static helper methods.
+ */
+// Both "true" and an empty array [] represent a touched state.
 SelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
-SelectInput.defaultProps = defaultProps;
-utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
-  isTouched: SelectInput.isTouched
-}));
+/**
+ * Expose react-select components for customization purposes.
+ */
+SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+SelectInput.Control = Select.components.Control;
+SelectInput.CrossIcon = Select.components.CrossIcon;
+SelectInput.DownChevron = Select.components.DownChevron;
+SelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+SelectInput.Group = Select.components.Group;
+SelectInput.GroupHeading = Select.components.GroupHeading;
+SelectInput.IndicatorSeparator = Select.components.IndicatorSeparator;
+SelectInput.IndicatorsContainer = Select.components.IndicatorsContainer;
+SelectInput.Input = Select.components.Input;
+SelectInput.LoadingIndicator = Select.components.LoadingIndicator;
+SelectInput.LoadingMessage = Select.components.LoadingMessage;
+SelectInput.Menu = Select.components.Menu;
+SelectInput.MenuList = Select.components.MenuList;
+SelectInput.MenuPortal = Select.components.MenuPortal;
+SelectInput.MultiValue = Select.components.MultiValue;
+SelectInput.MultiValueContainer = Select.components.MultiValueContainer;
+SelectInput.MultiValueLabel = Select.components.MultiValueLabel;
+SelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+SelectInput.NoOptionsMessage = Select.components.NoOptionsMessage;
+SelectInput.Option = Select.components.Option;
+SelectInput.Placeholder = Select.components.Placeholder;
+SelectInput.SelectContainer = Select.components.SelectContainer;
+SelectInput.SingleValue = Select.components.SingleValue;
+SelectInput.ValueContainer = Select.components.ValueContainer;
 var SelectInput$1 = SelectInput;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.3";
+var version = "14.0.1";
 exports["default"] = SelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-select-input.esm.js CHANGED Viewed

@@ -18,7 +18,7 @@ import flatMap from 'lodash/flatMap';
 import Select, { components } from 'react-select';
 import Constraints from '@commercetools-uikit/constraints';
 import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
-import { filterDataAttributes, addStaticFields } from '@commercetools-uikit/utils';
+import { filterDataAttributes } from '@commercetools-uikit/utils';
 import { jsx } from '@emotion/react/jsx-runtime';
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -66,6 +66,8 @@ var SelectInput = function SelectInput(props) {
       children: jsx(Select, {
         "aria-label": props['aria-label'],
         "aria-labelledby": props['aria-labelledby'],
+        "aria-invalid": props['aria-invalid'],
+        "aria-errormessage": props['aria-errormessage'],
         autoFocus: props.isAutofocussed,
         backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
         components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
@@ -189,20 +191,49 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   }))]),
   showOptionGroupDivider: _pt.bool
 } : {};
-SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
-// conveniently handles both cases
+SelectInput.displayName = 'SelectInput';
+SelectInput.defaultProps = defaultProps;
+/**
+ * Expose static helper methods.
+ */
+// Both "true" and an empty array [] represent a touched state.
 SelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
+/**
+ * Expose react-select components for customization purposes.
+ */
-SelectInput.defaultProps = defaultProps;
-addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
-  isTouched: SelectInput.isTouched
-}));
+SelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+SelectInput.Control = components.Control;
+SelectInput.CrossIcon = components.CrossIcon;
+SelectInput.DownChevron = components.DownChevron;
+SelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+SelectInput.Group = components.Group;
+SelectInput.GroupHeading = components.GroupHeading;
+SelectInput.IndicatorSeparator = components.IndicatorSeparator;
+SelectInput.IndicatorsContainer = components.IndicatorsContainer;
+SelectInput.Input = components.Input;
+SelectInput.LoadingIndicator = components.LoadingIndicator;
+SelectInput.LoadingMessage = components.LoadingMessage;
+SelectInput.Menu = components.Menu;
+SelectInput.MenuList = components.MenuList;
+SelectInput.MenuPortal = components.MenuPortal;
+SelectInput.MultiValue = components.MultiValue;
+SelectInput.MultiValueContainer = components.MultiValueContainer;
+SelectInput.MultiValueLabel = components.MultiValueLabel;
+SelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+SelectInput.NoOptionsMessage = components.NoOptionsMessage;
+SelectInput.Option = components.Option;
+SelectInput.Placeholder = components.Placeholder;
+SelectInput.SelectContainer = components.SelectContainer;
+SelectInput.SingleValue = components.SingleValue;
+SelectInput.ValueContainer = components.ValueContainer;
 var SelectInput$1 = SelectInput;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.3";
+var version = "14.0.1";
 export { SelectInput$1 as default, version };

package/dist/declarations/src/select-input.d.ts CHANGED Viewed

@@ -22,6 +22,8 @@ declare type TSelectInputProps = {
     iconLeft?: ReactNode;
     'aria-label'?: ReactSelectProps['aria-label'];
     'aria-labelledby'?: ReactSelectProps['aria-labelledby'];
+    'aria-invalid'?: ReactSelectProps['aria-invalid'];
+    'aria-errormessage'?: ReactSelectProps['aria-errormessage'];
     isAutofocussed?: boolean;
     backspaceRemovesValue?: ReactSelectProps['backspaceRemovesValue'];
     components?: ReactSelectProps['components'];
@@ -55,7 +57,64 @@ declare type TSelectInputProps = {
 declare const SelectInput: {
     (props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    isTouched(touched: boolean | unknown[]): boolean;
     defaultProps: Pick<TSelectInputProps, "maxMenuHeight" | "menuPortalZIndex">;
+    isTouched(touched: boolean | unknown[]): boolean;
+    ClearIndicator: {
+        (props: {
+            innerProps: {
+                ref: import("react").LegacyRef<HTMLButtonElement>;
+            } & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>;
+        } & import("react-select").ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
+    CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
+    DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
+    DropdownIndicator: {
+        (props: import("react-select").DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("react-select").GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
+    GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("react-select").GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("react-select").GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
+    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+    LoadingIndicator: {
+        <Option_8, IsMulti_8 extends boolean, Group_8 extends import("react-select").GroupBase<Option_8>>(props: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>): import("@emotion/react").jsx.JSX.Element;
+        defaultProps: {
+            size: number;
+        };
+    };
+    LoadingMessage: {
+        <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("react-select").NoticeProps<Option_11, IsMulti_11, Group_11>): import("@emotion/react").jsx.JSX.Element;
+        defaultProps: {
+            children: string;
+        };
+    };
+    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
+    MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("react-select").GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
+    MenuPortal: typeof import("react-select/dist/declarations/src/components/Menu").MenuPortal;
+    MultiValue: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>(props: import("react-select").MultiValueProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueContainer: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueLabel: <Option_14_1, IsMulti_14_1 extends boolean, Group_14_1 extends import("react-select").GroupBase<Option_14_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14_1, IsMulti_14_1, Group_14_1>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueRemove: {
+        (props: {
+            selectProps: {
+                isReadOnly: boolean;
+            } & import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>;
+        } & import("react-select").MultiValueGenericProps<unknown, boolean, import("react-select").GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    NoOptionsMessage: {
+        <Option_12, IsMulti_12 extends boolean, Group_12 extends import("react-select").GroupBase<Option_12>>(props: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>): import("@emotion/react").jsx.JSX.Element;
+        defaultProps: {
+            children: string;
+        };
+    };
+    Option: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>(props: import("react-select").OptionProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+    Placeholder: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").PlaceholderProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
+    SelectContainer: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").ContainerProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+    SingleValue: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").SingleValueProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+    ValueContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").ValueContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
 };
 export default SelectInput;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-input",
   "description": "An input component getting a selection from the user.",
-  "version": "13.0.3",
+  "version": "14.0.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
     "directory": "packages/components/inputs/select-input"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "design system", "react", "uikit"],
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -19,13 +19,13 @@
   "module": "dist/commercetools-uikit-select-input.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/icons": "13.0.2",
-    "@commercetools-uikit/select-utils": "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/icons": "14.0.1",
+    "@commercetools-uikit/select-utils": "14.0.1",
+    "@commercetools-uikit/utils": "14.0.1",
     "@emotion/is-prop-valid": "1.1.2",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "react": "17.0.2",
-    "react-intl": "5.24.6"
+    "react-intl": "^5.24.6"
   },
   "peerDependencies": {
     "react": "17.x",