@commercetools-uikit/async-creatable-select-field 12.2.9 → 13.0.0

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

@@ -13,13 +13,13 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
 import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
+import _pt from 'prop-types';
 import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import requiredIf from 'react-required-if';
-import { createSequentialId, filterDataAttributes, getFieldId, SafeHTMLElement } from '@commercetools-uikit/utils';
+import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
+import { isValidElement, Component } from 'react';
+import { createSequentialId, warning, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import Spacings from '@commercetools-uikit/spacings';
 import FieldLabel from '@commercetools-uikit/field-label';
@@ -27,9 +27,9 @@ import AsyncCreatableSelectInput from '@commercetools-uikit/async-creatable-sele
 import FieldErrors from '@commercetools-uikit/field-errors';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context8; _forEachInstanceProperty(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context9; _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -71,6 +71,16 @@ var AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var hasError = AsyncCreatableSelectInput.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(typeof this.props.hint), 'TextField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
+      }
+
+      if (this.props.isMulti) {
+        process.env.NODE_ENV !== "production" ? warning(_Array$isArray(this.props.value), 'AsyncCreatableSelectField: `value` is expected to be an array of string when isMulti is true') : void 0;
+        process.env.NODE_ENV !== "production" ? warning(_Array$isArray(this.props.touched), 'AsyncCreatableSelectField: `touched` is expected to be an array of boolean when isMulti is true') : void 0;
+      }
+
       return jsx(Constraints.Horizontal, {
         max: this.props.horizontalConstraint,
         children: jsxs(Spacings.Stack, {
@@ -105,14 +115,13 @@ var AsyncCreatableSelectField = /*#__PURE__*/function (_Component) {
             maxMenuHeight: this.props.maxMenuHeight,
             menuPortalTarget: this.props.menuPortalTarget,
             menuPortalZIndex: this.props.menuPortalZIndex,
-            menuShouldBlockSroll: this.props.menuShouldBlockScroll,
+            menuShouldBlockScroll: this.props.menuShouldBlockScroll,
             name: this.props.name,
             noOptionsMessage: this.props.noOptionsMessage,
             onBlur: this.props.onBlur,
             onChange: this.props.onChange,
             onFocus: this.props.onFocus,
             onInputChange: this.props.onInputChange,
-            options: this.props.options,
             placeholder: this.props.placeholder,
             tabIndex: this.props.tabIndex,
             tabSelectsValue: this.props.tabSelectsValue,
@@ -154,326 +163,28 @@ AsyncCreatableSelectField.getDerivedStateFromProps = function (props, state) {
   };
 };
 AsyncCreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-  // AsyncCreatableSelectField
-
-  /**
-   * Used as HTML id property. An id is auto-generated when it is not specified.
-   */
-  id: PropTypes.string,
-
-  /**
-   * Horizontal size limit of the input fields.
-   */
-  horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
-
-  /**
-   * A map of errors. Error messages for known errors are rendered automatically.
-   * <br />
-   * Unknown errors will be forwarded to `renderError`
-   */
-  errors: PropTypes.shape({
-    missing: PropTypes.bool
-  }),
-
-  /**
-   * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
-   * <br />
-   * Signature: `(key, error) => React.node`
-   */
-  renderError: PropTypes.func,
-
-  /**
-   * Indicates if the value is required. Shows an the "required asterisk" if so.
-   */
-  isRequired: PropTypes.bool,
-
-  /**
-   * Indicates whether the field was touched. Errors will only be shown when the field was touched.
-   */
-  touched: function touched(props) {
-    var _context3, _context4, _context5;
-
-    for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      rest[_key2 - 1] = arguments[_key2];
-    }
-
-    return props.isMulti ? PropTypes.arrayOf.apply(PropTypes, _concatInstanceProperty(_context3 = [PropTypes.bool]).call(_context3, rest)).apply(void 0, _concatInstanceProperty(_context4 = [props]).call(_context4, rest)) : PropTypes.bool.apply(PropTypes, _concatInstanceProperty(_context5 = [props]).call(_context5, rest));
-  },
-  // AsyncCreatableSelectInput
-
-  /**
-   * Aria label (for assistive tech)
-   */
-  'aria-label': PropTypes.string,
-
-  /**
-   * HTML ID of an element that should be used as the label (for assistive tech)
-   */
-  'aria-labelledby': PropTypes.string,
-
-  /**
-   * Focus the control when it is mounted
-   */
-  isAutofocussed: PropTypes.bool,
-
-  /**
-   * Remove the currently focused option when the user presses backspace
-   */
-  backspaceRemovesValue: PropTypes.bool,
-
-  /**
-   * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
-   */
-  components: PropTypes.objectOf(PropTypes.func),
-
-  /**
-   * Custom method to filter whether an option should be displayed in the menu
-   */
-  filterOption: PropTypes.func,
-
-  /**
-   * The id to set on the SelectContainer component
-   */
-  containerId: PropTypes.string,
-
-  /**
-   * Is the select value clearable
-   */
-  isClearable: PropTypes.bool,
-
-  /**
-   * Is the select disabled
-   */
-  isDisabled: PropTypes.bool,
-
-  /**
-   * Is the select read-only
-   */
-  isReadOnly: PropTypes.bool,
-
-  /**
-   * Override the built-in logic to detect whether an option is disabled
-   * <br />
-   * Signature: `(option, options) => boolean`
-   */
-  isOptionDisabled: PropTypes.func,
-
-  /**
-   * Support multiple selected options
-   */
-  isMulti: PropTypes.bool,
-
-  /**
-   * Whether to enable search functionality
-   */
-  isSearchable: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-
-  /**
-   * Maximum height of the menu before scrolling
-   */
-  maxMenuHeight: PropTypes.number,
-
-  /**
-   * 	Dom element to portal the select menu to
-   */
-  menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
-
-  /**
-   * z-index value for the menu portal
-   */
-  menuPortalZIndex: PropTypes.number,
-
-  /**
-   * whether the menu should block scroll while open
-   */
-  menuShouldBlockScroll: PropTypes.bool,
-
-  /**
-   * 	Name of the HTML Input (optional - without this, no input will be rendered)
-   */
-  name: PropTypes.string,
-
-  /**
-   * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
-   * <br/>
-   * Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
-   * <br />
-   * Signature: `({ inputValue }) => string`
-   */
-  noOptionsMessage: PropTypes.func,
-
-  /**
-   * Handle blur events on the control
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * Called with a fake event when value changes.
-   * <br />
-   * 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`.
-   * <br />
-   * Signature: `(event) => void`
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Handle focus events on the control
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   * Handle change events on the input
-   */
-  onInputChange: PropTypes.func,
-
-  /**
-   * Array of options that populate the select menu
-   */
-  options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
-    value: PropTypes.string.isRequired
-  }), PropTypes.shape({
-    options: PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.string.isRequired
-    }))
-  })])),
-
-  /**
-   * Placeholder text for the select value
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Sets the tabIndex attribute on the input
-   */
-  tabIndex: PropTypes.string,
-
-  /**
-   * Select the currently focused option when the user presses tab
-   */
-  tabSelectsValue: PropTypes.bool,
-
-  /**
-   * The value of the select; reflected by the selected option
-   */
-  value: function value(props) {
-    var _context6, _context7;
-
-    for (var _len3 = arguments.length, rest = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
-      rest[_key3 - 1] = arguments[_key3];
-    }
-
-    return props.isMulti ? PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.string.isRequired
-    })).apply(void 0, _concatInstanceProperty(_context6 = [props]).call(_context6, rest)) : PropTypes.shape({
-      value: PropTypes.string.isRequired
-    }).apply(void 0, _concatInstanceProperty(_context7 = [props]).call(_context7, rest));
-  },
-  showOptionGroupDivider: PropTypes.bool,
-  // Async props
-
-  /**
-   * The default set of options to show before the user starts searching.
-   * <br/>
-   * When set to `true`, the results for `loadOptions('')` will be autoloaded.
-   */
-  defaultOptions: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired
-  }))]),
-
-  /**
-   * Function that returns a promise, which is the set of options to be used once the promise resolves.
-   * <br />
-   * Signature: `(inputValue, callback) => void)) => Promise | void`
-   * <br />
-   * `callback` can be called with `options`
-   */
-  loadOptions: PropTypes.func.isRequired,
-
-  /**
-   * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
-   */
-  cacheOptions: PropTypes.any,
-  // Creatable props
-
-  /**
-   * Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
-   */
-  allowCreateWhileLoading: PropTypes.bool,
-
-  /**
-   * Gets the label for the "create new ..." option in the menu. Is given the current input value.
-   */
-  formatCreateLabel: PropTypes.func,
-
-  /**
-   * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
-   */
-  isValidNewOption: PropTypes.func,
-
-  /**
-   * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
-   */
-  getNewOptionData: PropTypes.func,
-
-  /**
-   * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
-   */
-  onCreateOption: PropTypes.func,
-
-  /**
-   * Sets the position of the createOption element in your options list.
-   */
-  createOptionPosition: PropTypes.string,
-  // LabelField
-
-  /**
-   * Title of the label
-   */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-
-  /**
-   * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
-   */
-  hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
-    return props.hintIcon;
-  }),
-
-  /**
-   * Provides a description for the title.
-   */
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /**
-   * Function called when info button is pressed.
-   * <br />
-   * Info button will only be visible when this prop is passed.
-   * <br />
-   * Signature: `(event) => void`
-   */
-  onInfoButtonClick: PropTypes.func,
-
-  /**
-   * Icon to be displayed beside the hint text.
-   * <br />
-   * Will only get rendered when `hint` is passed as well.
-   */
-  hintIcon: PropTypes.node,
-
-  /**
-   * Badge to be displayed beside the label.
-   * <br />
-   * Might be used to display additional information about the content of the field (E.g verified email)
-   */
-  badge: PropTypes.node,
-
-  /**
-   * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
-   */
-  iconLeft: PropTypes.node
+  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  errors: _pt.objectOf(_pt.bool),
+  renderError: _pt.func,
+  isRequired: _pt.bool,
+  touched: _pt.oneOfType([_pt.arrayOf(_pt.bool), _pt.bool]),
+  isAutofocussed: _pt.bool,
+  isReadOnly: _pt.bool,
+  hasWarning: _pt.bool,
+  menuPortalZIndex: _pt.number,
+  onBlur: _pt.func,
+  onChange: _pt.func.isRequired,
+  showOptionGroupDivider: _pt.bool,
+  title: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
+  hint: _pt.oneOfType([_pt.string, _pt.node]),
+  description: _pt.oneOfType([_pt.string, _pt.node]),
+  onInfoButtonClick: _pt.func,
+  hintIcon: _pt.element,
+  badge: _pt.node,
+  iconLeft: _pt.node
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.9";
+var version = "13.0.0";
 
 export { AsyncCreatableSelectField as default, version };

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

@@ -0,0 +1,79 @@
+import { Component, type ReactElement, type ReactNode } from 'react';
+import type { GroupBase, ActionMeta } from 'react-select';
+import type { AsyncCreatableProps } from 'react-select/async-creatable';
+declare type ReactSelectAsyncCreatableProps = AsyncCreatableProps<unknown, boolean, GroupBase<unknown>>;
+declare type TFieldErrors = Record<string, boolean>;
+declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
+declare type TEvent = {
+    target: {
+        name?: string;
+        value?: unknown;
+    };
+    persist: () => void;
+};
+declare type TAsyncCreatableSelectFieldProps = {
+    id?: ReactSelectAsyncCreatableProps['inputId'];
+    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    errors?: TFieldErrors;
+    renderError?: TErrorRenderer;
+    isRequired?: boolean;
+    touched?: boolean[] | boolean;
+    'aria-label'?: ReactSelectAsyncCreatableProps['aria-label'];
+    'aria-labelledby'?: ReactSelectAsyncCreatableProps['aria-labelledby'];
+    isAutofocussed?: boolean;
+    backspaceRemovesValue?: ReactSelectAsyncCreatableProps['backspaceRemovesValue'];
+    components?: ReactSelectAsyncCreatableProps['components'];
+    filterOption?: ReactSelectAsyncCreatableProps['filterOption'];
+    containerId?: ReactSelectAsyncCreatableProps['id'];
+    isClearable?: ReactSelectAsyncCreatableProps['isClearable'];
+    isDisabled?: ReactSelectAsyncCreatableProps['isDisabled'];
+    isReadOnly?: boolean;
+    isOptionDisabled?: ReactSelectAsyncCreatableProps['isOptionDisabled'];
+    isMulti?: ReactSelectAsyncCreatableProps['isMulti'];
+    isSearchable?: ReactSelectAsyncCreatableProps['isSearchable'];
+    hasWarning?: boolean;
+    maxMenuHeight?: ReactSelectAsyncCreatableProps['maxMenuHeight'];
+    menuPortalTarget?: ReactSelectAsyncCreatableProps['menuPortalTarget'];
+    menuPortalZIndex?: number;
+    menuShouldBlockScroll?: ReactSelectAsyncCreatableProps['menuShouldBlockScroll'];
+    name?: ReactSelectAsyncCreatableProps['name'];
+    noOptionsMessage?: ReactSelectAsyncCreatableProps['noOptionsMessage'];
+    onBlur?: (event: TEvent) => void;
+    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onFocus?: ReactSelectAsyncCreatableProps['onFocus'];
+    onInputChange?: ReactSelectAsyncCreatableProps['onInputChange'];
+    placeholder?: ReactSelectAsyncCreatableProps['placeholder'];
+    tabIndex?: ReactSelectAsyncCreatableProps['tabIndex'];
+    tabSelectsValue?: ReactSelectAsyncCreatableProps['tabSelectsValue'];
+    value?: ReactSelectAsyncCreatableProps['value'];
+    showOptionGroupDivider?: boolean;
+    defaultOptions?: ReactSelectAsyncCreatableProps['defaultOptions'];
+    loadOptions: ReactSelectAsyncCreatableProps['loadOptions'];
+    cacheOptions?: ReactSelectAsyncCreatableProps['cacheOptions'];
+    allowCreateWhileLoading?: ReactSelectAsyncCreatableProps['allowCreateWhileLoading'];
+    formatCreateLabel?: ReactSelectAsyncCreatableProps['formatCreateLabel'];
+    isValidNewOption?: ReactSelectAsyncCreatableProps['isValidNewOption'];
+    getNewOptionData?: ReactSelectAsyncCreatableProps['getNewOptionData'];
+    onCreateOption?: ReactSelectAsyncCreatableProps['onCreateOption'];
+    createOptionPosition?: ReactSelectAsyncCreatableProps['createOptionPosition'];
+    title: string | ReactNode;
+    hint?: string | ReactNode;
+    description?: string | ReactNode;
+    onInfoButtonClick?: () => void;
+    hintIcon?: ReactElement;
+    badge?: ReactNode;
+    iconLeft?: ReactNode;
+};
+declare type TAsyncCreatableSelectFieldState = Pick<TAsyncCreatableSelectFieldProps, 'id'>;
+export default class AsyncCreatableSelectField extends Component<TAsyncCreatableSelectFieldProps, TAsyncCreatableSelectFieldState> {
+    static displayName: string;
+    static defaultProps: Pick<TAsyncCreatableSelectFieldProps, 'horizontalConstraint'>;
+    state: {
+        id: string | undefined;
+    };
+    static getDerivedStateFromProps: (props: TAsyncCreatableSelectFieldProps, state: TAsyncCreatableSelectFieldState) => {
+        id: string;
+    };
+    render(): import("@emotion/react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './async-creatable-select-field';
+export { default as version } from './version';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-creatable-select-field",
   "description": "An input component with validation states and a label getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
-  "version": "12.2.9",
+  "version": "13.0.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -19,18 +19,18 @@
   "module": "dist/commercetools-uikit-async-creatable-select-field.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.16.5",
-    "@babel/runtime-corejs3": "7.16.5",
-    "@commercetools-uikit/async-creatable-select-input": "12.2.9",
-    "@commercetools-uikit/constraints": "12.2.9",
-    "@commercetools-uikit/design-system": "12.2.9",
-    "@commercetools-uikit/field-errors": "12.2.9",
-    "@commercetools-uikit/field-label": "12.2.9",
-    "@commercetools-uikit/spacings": "12.2.9",
+    "@babel/runtime": "7.17.2",
+    "@babel/runtime-corejs3": "7.17.2",
+    "@commercetools-uikit/async-creatable-select-input": "13.0.0",
+    "@commercetools-uikit/constraints": "13.0.0",
+    "@commercetools-uikit/design-system": "13.0.0",
+    "@commercetools-uikit/field-errors": "13.0.0",
+    "@commercetools-uikit/field-label": "13.0.0",
+    "@commercetools-uikit/spacings": "13.0.0",
     "@commercetools-uikit/utils": "12.2.9",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "react-required-if": "1.0.3"
   },
   "devDependencies": {