@hyphen/hyphen-components 2.13.1 → 2.15.0
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.
- package/dist/components/SelectInput/SelectInput.d.ts +4 -0
- package/dist/components/SelectInput/SelectInput.stories.d.ts +2 -0
- package/dist/css/utilities.css +13 -0
- package/dist/hyphen-components.cjs.development.js +6 -2
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +6 -2
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/Box/Box.test.tsx +229 -314
- package/src/components/SelectInput/SelectInput.mdx +12 -0
- package/src/components/SelectInput/SelectInput.stories.tsx +44 -0
- package/src/components/SelectInput/SelectInput.test.tsx +57 -18
- package/src/components/SelectInput/SelectInput.tsx +10 -3
- package/src/styles/display.scss +12 -0
- package/src/types/index.ts +2 -1
|
@@ -14,6 +14,7 @@ import FocusLock from 'react-focus-lock';
|
|
|
14
14
|
import { RemoveScroll } from 'react-remove-scroll';
|
|
15
15
|
import { getIn } from 'formik';
|
|
16
16
|
import Select, { components } from 'react-select';
|
|
17
|
+
import CreatableSelect from 'react-select/creatable';
|
|
17
18
|
import { v4 } from 'uuid';
|
|
18
19
|
|
|
19
20
|
function _extends() {
|
|
@@ -2218,7 +2219,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
|
|
|
2218
2219
|
|
|
2219
2220
|
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"};
|
|
2220
2221
|
|
|
2221
|
-
var _excluded$k = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
|
|
2222
|
+
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"];
|
|
2222
2223
|
var SelectInput = function SelectInput(_ref) {
|
|
2223
2224
|
var _ref2, _classNames;
|
|
2224
2225
|
var id = _ref.id,
|
|
@@ -2237,6 +2238,8 @@ var SelectInput = function SelectInput(_ref) {
|
|
|
2237
2238
|
hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
|
|
2238
2239
|
_ref$isClearable = _ref.isClearable,
|
|
2239
2240
|
isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
|
|
2241
|
+
_ref$isCreatable = _ref.isCreatable,
|
|
2242
|
+
isCreatable = _ref$isCreatable === void 0 ? false : _ref$isCreatable,
|
|
2240
2243
|
_ref$isDisabled = _ref.isDisabled,
|
|
2241
2244
|
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
2242
2245
|
_ref$isMulti = _ref.isMulti,
|
|
@@ -2291,10 +2294,11 @@ var SelectInput = function SelectInput(_ref) {
|
|
|
2291
2294
|
name: "remove"
|
|
2292
2295
|
}));
|
|
2293
2296
|
};
|
|
2297
|
+
var Component = isCreatable ? CreatableSelect : Select;
|
|
2294
2298
|
return React.createElement(Box, {
|
|
2295
2299
|
width: "100%",
|
|
2296
2300
|
className: wrapperClasses
|
|
2297
|
-
}, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(
|
|
2301
|
+
}, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, {
|
|
2298
2302
|
inputId: id,
|
|
2299
2303
|
"aria-label": label,
|
|
2300
2304
|
components: {
|