@hyphen/hyphen-components 2.14.0 → 2.15.1

package/dist/components/SelectInput/SelectInput.d.ts

@@ -58,6 +58,10 @@ export interface SelectInputProps {
      * If the input value is clearable programmatically.
      */
     isClearable?: boolean;
+    /**
+     * Include custom option in dropdown list.
+     */
+    isCreatable?: boolean;
     /**
      * If the input should be disabled and not focusable.
      */

package/dist/components/SelectInput/SelectInput.stories.d.ts

@@ -8,8 +8,10 @@ export declare const PreSelected: () => React.JSX.Element;
 export declare const HelpText: () => React.JSX.Element;
 export declare const Placeholder: () => React.JSX.Element;
 export declare const HiddenLabel: () => React.JSX.Element;
+export declare const CreatableSelect: () => React.JSX.Element;
 export declare const MultiSelect: () => React.JSX.Element;
 export declare const MultiSelectAndPreSelected: () => React.JSX.Element;
+export declare const MultiSelectCreatable: () => React.JSX.Element;
 export declare const Autofocus: () => React.JSX.Element;
 export declare const Required: () => React.JSX.Element;
 export declare const Disabled: () => React.JSX.Element;

package/dist/hyphen-components.cjs.development.js

@@ -18,6 +18,7 @@ var FocusLock = require('react-focus-lock');
 var reactRemoveScroll = require('react-remove-scroll');
 var formik = require('formik');
 var Select = require('react-select');
+var CreatableSelect = require('react-select/creatable');
 var uuid = require('uuid');
 
 function _extends() {
@@ -2222,7 +2223,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
 
 var styles$e = {"react-select-icon":"SelectInput-module_react-select-icon__PvocB","size-sm":"SelectInput-module_size-sm__PKB-J","size-md":"SelectInput-module_size-md__n9Fj8","size-lg":"SelectInput-module_size-lg__LQ-uG","error":"SelectInput-module_error__Avf98","size-sm-tablet":"SelectInput-module_size-sm-tablet__2Dg01","size-md-tablet":"SelectInput-module_size-md-tablet__-iOSg","size-lg-tablet":"SelectInput-module_size-lg-tablet__9xmuJ","size-sm-desktop":"SelectInput-module_size-sm-desktop__tOWI4","size-md-desktop":"SelectInput-module_size-md-desktop__vo-UC","size-lg-desktop":"SelectInput-module_size-lg-desktop__nxQdj","size-sm-hd":"SelectInput-module_size-sm-hd__qamTH","size-md-hd":"SelectInput-module_size-md-hd__Cf8hk","size-lg-hd":"SelectInput-module_size-lg-hd__E4-mZ","disabled":"SelectInput-module_disabled__4ezAy","select-input-label":"SelectInput-module_select-input-label__eqEYa"};
 
-var _excluded$k = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
+var _excluded$k = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isCreatable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
 var SelectInput = function SelectInput(_ref) {
   var _ref2, _classNames;
   var id = _ref.id,
@@ -2241,6 +2242,8 @@ var SelectInput = function SelectInput(_ref) {
     hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
     _ref$isClearable = _ref.isClearable,
     isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
+    _ref$isCreatable = _ref.isCreatable,
+    isCreatable = _ref$isCreatable === void 0 ? false : _ref$isCreatable,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isMulti = _ref.isMulti,
@@ -2295,10 +2298,11 @@ var SelectInput = function SelectInput(_ref) {
       name: "remove"
     }));
   };
+  var Component = isCreatable ? CreatableSelect : Select;
   return React.createElement(Box, {
     width: "100%",
     className: wrapperClasses
-  }, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Select, _extends({}, restProps, {
+  }, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, {
     inputId: id,
     "aria-label": label,
     components: {
@@ -2331,6 +2335,7 @@ var SelectInput = function SelectInput(_ref) {
 
 var _excluded$j = ["field", "form", "onChange", "id", "label", "options"];
 var FormikSelectInput = function FormikSelectInput(_ref) {
+  var _errorMessage$label;
   var _ref$field = _ref.field,
     name = _ref$field.name,
     onBlur = _ref$field.onBlur,
@@ -2344,7 +2349,11 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
     label = _ref.label,
     options = _ref.options,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  return React.createElement(SelectInput, _extends({}, props, {
+  var error = formik.getIn(errors, name);
+  var errorMessage = typeof error !== 'string' && (error == null ? void 0 : error.find(function (error) {
+    return error.label;
+  }));
+  return React.createElement(SelectInput, _extends({
     id: id,
     label: label,
     options: options,
@@ -2352,8 +2361,8 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
     onBlur: onBlur,
     onChange: onChange != null ? onChange : formikOnChange,
     value: value,
-    error: formik.getIn(touched, name) && formik.getIn(errors, name)
-  }));
+    error: (_errorMessage$label = errorMessage == null ? void 0 : errorMessage.label) != null ? _errorMessage$label : formik.getIn(touched, name) && error
+  }, props));
 };
 
 var styles$d = {"text-input-wrapper":"SelectInputInset-module_text-input-wrapper__hZ4Fy","size-md":"SelectInputInset-module_size-md__6MFcV","select-input-label":"SelectInputInset-module_select-input-label__6XdR6","clear-button":"SelectInputInset-module_clear-button__xbZaY","size-lg":"SelectInputInset-module_size-lg__i2Bzf","disabled":"SelectInputInset-module_disabled__DYSr2","size-md-tablet":"SelectInputInset-module_size-md-tablet__xwoPz","size-lg-tablet":"SelectInputInset-module_size-lg-tablet__2DgFa","size-md-desktop":"SelectInputInset-module_size-md-desktop__MfemS","size-lg-desktop":"SelectInputInset-module_size-lg-desktop__etLGJ","size-md-hd":"SelectInputInset-module_size-md-hd__NWb1q","size-lg-hd":"SelectInputInset-module_size-lg-hd__ycjXC","error":"SelectInputInset-module_error__j-jgS"};