@hyphen/hyphen-components 2.13.1 → 2.15.0

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/css/utilities.css

@@ -5253,6 +5253,10 @@
   display: table-cell;
 }
 
+.display-contents {
+  display: contents;
+}
+
 @media (min-width: 680px) {
   .display-inherit-tablet {
     display: inherit;
@@ -5281,6 +5285,9 @@
   .display-table-cell-tablet {
     display: table-cell;
   }
+  .display-contents-tablet {
+    display: contents;
+  }
 }
 @media (min-width: 992px) {
   .display-inherit-desktop {
@@ -5310,6 +5317,9 @@
   .display-table-cell-desktop {
     display: table-cell;
   }
+  .display-contents-desktop {
+    display: contents;
+  }
 }
 @media (min-width: 1280px) {
   .display-inherit-hd {
@@ -5339,6 +5349,9 @@
   .display-table-cell-hd {
     display: table-cell;
   }
+  .display-contents-hd {
+    display: contents;
+  }
 }
 .flex-auto {
   flex: 1 1 auto;

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: {