@automattic/vip-design-system 0.30.2 → 0.32.0

package/build/system/Form/RadioBoxGroup.js

@@ -9,93 +9,153 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
-
-var _md = require("react-icons/md");
-
-var _ = require("../");
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["onChange", "groupLabel", "value", "options"];
+var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
+    _excluded2 = ["optionWidth", "name", "onChange", "groupLabel", "defaultValue", "options", "disabled"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var onChange = _ref.onChange,
-      groupLabel = _ref.groupLabel,
-      value = _ref.value,
-      options = _ref.options,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, (0, _extends2["default"])({
-    onValueChange: onChange,
+/**
+ * Internal dependencies
+ */
+var RadioOption = function RadioOption(_ref) {
+  var width = _ref.width,
+      disabled = _ref.disabled,
+      defaultValue = _ref.defaultValue,
+      _ref$option = _ref.option,
+      id = _ref$option.id,
+      value = _ref$option.value,
+      className = _ref$option.className,
+      label = _ref$option.label,
+      description = _ref$option.description,
+      _ref$option$labelProp = _ref$option.labelProps,
+      labelProps = _ref$option$labelProp === void 0 ? {} : _ref$option$labelProp,
+      restOption = (0, _objectWithoutPropertiesLoose2["default"])(_ref$option, _excluded),
+      name = _ref.name,
+      onChangeHandler = _ref.onChangeHandler;
+  var forLabel = id || value;
+  return (0, _jsxRuntime.jsxs)("div", {
     value: value,
-    "aria-label": groupLabel,
-    sx: {
+    id: "o" + forLabel,
+    sx: (0, _extends2["default"])({
+      width: width,
       display: 'flex',
-      gap: 2
-    },
-    ref: forwardRef
-  }, props, {
-    children: options.map(function (option, index) {
-      return (0, _jsxRuntime.jsxs)(RadioGroupPrimitive.Item, {
-        value: option.value,
-        id: "o" + index,
-        sx: {
-          p: 3,
-          backgroundColor: 'input.radio-box.background.default',
-          cursor: 'pointer',
-          borderRadius: 2,
-          textAlign: 'left',
-          border: '1px solid',
-          borderColor: 'input.radio-box.border.default',
-          position: 'relative',
-          '&:hover': {
-            backgroundColor: 'input.radio-box.background.hover',
-            borderColor: 'input.radio-box.border.default'
-          },
-          '&[data-state=checked]': {
-            borderColor: 'input.radio-box.border.active'
-          },
-          '&[data-state=disabled]': {
-            borderColor: 'input.radio-box.border.disabled'
-          }
-        },
-        children: [(0, _jsxRuntime.jsx)(RadioGroupPrimitive.Indicator, {
-          children: (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-            size: 16,
-            sx: {
-              position: 'absolute',
-              top: 2,
-              right: 2,
-              color: 'icon.primary'
-            }
-          })
-        }), (0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "label",
-          htmlFor: "o" + index,
-          sx: {
-            mb: 0,
-            color: 'input.radio-box.label.primary.default'
-          },
-          children: option.label
-        }), (0, _jsxRuntime.jsx)(_.Text, {
+      flexDirection: 'row-reverse',
+      alignItems: 'flex-start',
+      backgroundColor: 'input.radio-box.background.default',
+      cursor: 'pointer',
+      borderRadius: 2,
+      textAlign: 'left',
+      border: '1px solid',
+      borderColor: 'input.radio-box.border.default',
+      position: 'relative',
+      '&:hover': {
+        backgroundColor: 'input.radio-box.background.hover',
+        borderColor: 'input.radio-box.border.default'
+      }
+    }, "" + defaultValue === "" + value && {
+      borderColor: 'input.radio-box.border.active'
+    }, disabled && {
+      borderColor: 'input.radio-box.border.disabled'
+    }),
+    children: [(0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
+      checked: "" + defaultValue === "" + value,
+      type: "radio",
+      name: name,
+      id: forLabel,
+      onChange: onChangeHandler,
+      value: "" + value,
+      sx: {
+        mr: 3,
+        mt: 3
+      }
+    }, restOption)), (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
+      htmlFor: forLabel,
+      sx: {
+        mb: 0,
+        color: 'input.radio-box.label.primary.default',
+        p: 3,
+        pr: 0,
+        flex: 'auto'
+      }
+    }, labelProps, {
+      children: [label, description && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+          children: "."
+        }), (0, _jsxRuntime.jsx)("span", {
           sx: {
             color: 'input.radio-box.label.secondary.default',
             mb: 0,
-            fontSize: 1
+            fontSize: 1,
+            display: 'block'
           },
-          children: option.description
+          children: description
         })]
-      }, option.value);
-    })
+      })]
+    }))]
+  }, value);
+};
+
+RadioOption.propTypes = {
+  defaultValue: _propTypes["default"].string,
+  option: _propTypes["default"].object,
+  name: _propTypes["default"].string,
+  onChangeHandler: _propTypes["default"].func,
+  checked: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  width: _propTypes["default"].string
+};
+
+var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var _ref2$optionWidth = _ref2.optionWidth,
+      optionWidth = _ref2$optionWidth === void 0 ? 'auto' : _ref2$optionWidth,
+      _ref2$name = _ref2.name,
+      name = _ref2$name === void 0 ? '' : _ref2$name,
+      onChange = _ref2.onChange,
+      groupLabel = _ref2.groupLabel,
+      defaultValue = _ref2.defaultValue,
+      options = _ref2.options,
+      disabled = _ref2.disabled,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+  var onChangeHandler = (0, _react.useCallback)(function (e) {
+    var optionTriggered = options.find(function (option) {
+      return "" + option.value === "" + e.target.value;
+    });
+    onChange(e, optionTriggered);
+  }, [onChange]);
+  var renderedOptions = options.map(function (option) {
+    return (0, _jsxRuntime.jsx)(RadioOption, {
+      defaultValue: defaultValue,
+      disabled: disabled,
+      name: name,
+      option: option,
+      onChangeHandler: onChangeHandler,
+      width: optionWidth
+    }, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
+  });
+  return (0, _jsxRuntime.jsxs)("fieldset", (0, _extends2["default"])({
+    sx: {
+      display: 'flex',
+      gap: 2,
+      border: 0,
+      padding: 0
+    },
+    ref: forwardRef
+  }, props, {
+    children: [groupLabel ? (0, _jsxRuntime.jsx)("legend", {
+      children: groupLabel
+    }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: "Choose an option"
+    }), renderedOptions]
   }));
 });
 
@@ -104,6 +164,9 @@ RadioBoxGroup.displayName = 'RadioBoxGroup';
 RadioBoxGroup.propTypes = {
   onChange: _propTypes["default"].func,
   options: _propTypes["default"].array,
-  value: _propTypes["default"].string,
-  groupLabel: _propTypes["default"].string
+  defaultValue: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  groupLabel: _propTypes["default"].string,
+  optionWidth: _propTypes["default"].string
 };

package/build/system/Form/RadioBoxGroup.stories.js

@@ -41,12 +41,12 @@ var Default = function Default() {
       setValue = _useState[1];
 
   return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
-    value: value,
-    onChange: function onChange(newValue) {
-      return setValue(newValue);
+    defaultValue: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
     },
-    groupLabel: "group",
-    options: options
+    options: options,
+    optionWidth: "350px"
   });
 };
 

package/build/system/NewForm/FormAutocomplete.js

@@ -37,7 +37,7 @@ var _Form = require("../Form");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "source", "value"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -171,6 +171,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       searchIcon = _ref.searchIcon,
       _ref$showAllValues = _ref.showAllValues,
       showAllValues = _ref$showAllValues === void 0 ? false : _ref$showAllValues,
+      _ref$resetOnBlur = _ref.resetOnBlur,
+      resetOnBlur = _ref$resetOnBlur === void 0 ? false : _ref$resetOnBlur,
       source = _ref.source,
       value = _ref.value,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -179,8 +181,20 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       isDirty = _useState[0],
       setIsDirty = _useState[1];
 
+  var _useState2 = (0, _react.useState)(value || ''),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      inputQuery = _useState3[0],
+      setInputQuery = _useState3[1];
+
   var debounceTimeout;
 
+  if (!forwardRef) {
+    forwardRef = /*#__PURE__*/_react["default"].createRef();
+  }
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       required: required,
@@ -209,11 +223,43 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       return "" + optionLabel(option) === "" + inputValue;
     });
   }, [getAllOptions, optionLabel]);
+  /**
+   * Reset the underlying component state to show the selected value
+   */
+
+  var resetInputState = (0, _react.useCallback)(function () {
+    var _forwardRef;
+
+    if (resetOnBlur && (_forwardRef = forwardRef) != null && _forwardRef.current && inputQuery !== selectedValue) {
+      // resets the input field to the selected value or the empty string
+      forwardRef.current.setState((0, _extends2["default"])({}, forwardRef.current.state, {
+        query: inputQuery && inputQuery !== '' ? selectedValue != null ? selectedValue : '' : '' // selected value should not be null or the component will crash
+
+      }));
+    }
+  }, [forwardRef]); // sets the internal state variables and calls the onChange callback
+
+  var setAutocompleteState = function setAutocompleteState(inputValue) {
+    setInputQuery(inputValue);
+    setSelectedValue(inputValue);
+    onChange(getOptionByLabel(inputValue), inputValue);
+    setIsDirty(false);
+  }; // this method gets called when we confirm the selection via click/enter
+
+
   var onValueChange = (0, _react.useCallback)(function (inputValue) {
     if (inputValue) {
-      onChange(getOptionByLabel(inputValue), inputValue);
+      setAutocompleteState(inputValue);
+    } else if (resetOnBlur && inputQuery !== selectedValue) {
+      if (inputQuery && inputQuery !== '') {
+        // reset the content to the selected value
+        setAutocompleteState(selectedValue);
+      } else {
+        // reset the content to empty if there's no match
+        setAutocompleteState(null);
+      }
     }
-  }, [onChange, getOptionByLabel]);
+  }, [onChange, getOptionByLabel, setAutocompleteState]);
   var handleTypeChange = (0, _react.useCallback)(function (query) {
     return options.filter(function (option) {
       return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
@@ -248,7 +294,18 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     populateResults((_data = data) == null ? void 0 : _data.map(function (option) {
       return optionLabel(option);
     }));
-  }, [autoFilter, isDirty, onInputChange, options]);
+  }, [autoFilter, isDirty, onInputChange, options]); // internal function to save the inputQuery
+
+  var handleSource = function handleSource(query, populateResults) {
+    setInputQuery(query); // user function to fetch the results has the precedence
+
+    if (source) {
+      return source(query, populateResults);
+    }
+
+    return suggest(query, populateResults);
+  };
+
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
   }, []);
@@ -265,8 +322,13 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     input.setAttribute('aria-required', required);
   }, [required]);
   (0, _react.useEffect)(function () {
-    global.document.querySelector("#" + forLabel).addEventListener('keydown', function () {
-      setIsDirty(true);
+    global.document.querySelector("#" + forLabel).addEventListener('keydown', function (e) {
+      // pressed escape, we want to reset the status
+      if (e.keyCode === 27 && resetOnBlur) {
+        resetInputState();
+      } else {
+        setIsDirty(true);
+      }
     });
   }, [setIsDirty]); // For accessibility, we need to add the error message to the aria-describedby attribute
 
@@ -274,6 +336,11 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     var input = global.document.querySelector("#" + forLabel);
     input == null ? void 0 : input.setAttribute('aria-describedby', "describe-" + forLabel + "-validation " + input.getAttribute('aria-describedby'));
   }, []);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector("#" + forLabel).addEventListener('blur', function () {
+      resetInputState();
+    });
+  }, [forwardRef]);
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
@@ -286,7 +353,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           "aria-busy": loading,
           showAllValues: showAllValues,
           ref: forwardRef,
-          source: source || suggest,
+          source: handleSource,
           defaultValue: value,
           displayMenu: displayMenu,
           onConfirm: onValueChange,
@@ -331,6 +398,7 @@ FormAutocomplete.propTypes = {
   required: _propTypes["default"].bool,
   searchIcon: _propTypes["default"].bool,
   showAllValues: _propTypes["default"].bool,
+  resetOnBlur: _propTypes["default"].bool,
   source: _propTypes["default"].func,
   value: _propTypes["default"].string,
   dropdownArrow: _propTypes["default"].node

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -3,7 +3,11 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.WithCustomArrow = exports.WithArrow = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSlowSearch = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.WithCustomArrow = exports.WithArrow = exports.Inline = exports.Default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -41,6 +45,12 @@ var _default = {
       control: {
         type: 'text'
       }
+    },
+    resetOnBlur: {
+      options: [false, true],
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -57,7 +67,9 @@ var options = [{
 }];
 var args = {
   label: 'Label',
-  options: options
+  options: options,
+  resetOnBlur: false,
+  placeholder: 'Start typing...'
 }; // eslint-disable-next-line react/prop-types
 
 var DefaultComponent = function DefaultComponent(_ref) {
@@ -94,62 +106,30 @@ var DefaultComponent = function DefaultComponent(_ref) {
   });
 };
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
-      required: true
-    }, args, {
-      placeholder: "Start typing..."
-    }))
-  });
-};
-
+var Default = DefaultComponent.bind({});
 exports.Default = Default;
-
-var Inline = function Inline() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    isInline: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+Default.args = args;
+var Inline = DefaultComponent.bind({});
 exports.Inline = Inline;
-
-var WithDefaultValue = function WithDefaultValue() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    value: 'Chocolate'
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+Inline.args = (0, _extends2["default"])({}, Default.args, {
+  isInline: true
+});
+var WithDefaultValue = DefaultComponent.bind({});
 exports.WithDefaultValue = WithDefaultValue;
-
-var WithSearchIcon = function WithSearchIcon() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    searchIcon: true,
-    placeholder: 'Type to search'
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithDefaultValue.args = (0, _extends2["default"])({}, Default.args, {
+  value: 'Chocolate'
+});
+var WithSearchIcon = DefaultComponent.bind({});
 exports.WithSearchIcon = WithSearchIcon;
-
-var WithLoading = function WithLoading() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    loading: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithSearchIcon.args = (0, _extends2["default"])({}, Default.args, {
+  searchIcon: true,
+  placeholder: 'Type to search'
+});
+var WithLoading = DefaultComponent.bind({});
 exports.WithLoading = WithLoading;
+WithLoading.args = (0, _extends2["default"])({}, Default.args, {
+  loading: true
+});
 
 var WithDebounce = function WithDebounce() {
   var _useState2 = (0, _react.useState)(null),
@@ -169,65 +149,80 @@ var WithDebounce = function WithDebounce() {
 };
 
 exports.WithDebounce = WithDebounce;
+var WithSlowSearch = DefaultComponent.bind({});
+exports.WithSlowSearch = WithSlowSearch;
+WithSlowSearch.args = (0, _extends2["default"])({}, Default.args, {
+  label: 'Label',
+  autoFilter: false,
+  minLength: 3,
+  required: true,
+  source: function () {
+    var _source = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(query, populateResults) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!query || query.length >= 3) {
+                setTimeout(function () {
+                  var filteredResults = args.options.map(function (option) {
+                    return option.label;
+                  }).filter(function (result) {
+                    return result.toLowerCase().indexOf(query == null ? void 0 : query.toLowerCase()) !== -1;
+                  });
+                  populateResults(filteredResults);
+                }, 1000);
+              }
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
 
-var WithCustomMessages = function WithCustomMessages() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    noOptionsMessage: function noOptionsMessage() {
-      return 'No data';
-    },
-    placeholder: 'Type to search'
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
+    function source(_x, _x2) {
+      return _source.apply(this, arguments);
+    }
 
+    return source;
+  }()
+});
+var WithCustomMessages = DefaultComponent.bind({});
 exports.WithCustomMessages = WithCustomMessages;
-
-var WithErrors = function WithErrors() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    hasError: true,
-    errorMessage: 'Please select a value.',
-    required: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithCustomMessages.args = (0, _extends2["default"])({}, Default.args, {
+  noOptionsMessage: function noOptionsMessage() {
+    return 'No data';
+  },
+  placeholder: 'Type to search'
+});
+var WithErrors = DefaultComponent.bind({});
 exports.WithErrors = WithErrors;
-
-var WithArrow = function WithArrow() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    showAllValues: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithErrors.args = (0, _extends2["default"])({}, Default.args, {
+  hasError: true,
+  errorMessage: 'Please select a value.',
+  required: true
+});
+var WithArrow = DefaultComponent.bind({});
 exports.WithArrow = WithArrow;
-
-var WithCustomArrow = function WithCustomArrow() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    showAllValues: true,
-    // eslint-disable-next-line react/display-name
-    dropdownArrow: function dropdownArrow() {
-      return (0, _jsxRuntime.jsx)("span", {
-        sx: {
-          position: 'absolute',
-          top: '2px',
-          right: '10px',
-          pointerEvents: 'none'
-        },
-        children: "\uD83D\uDC47"
-      });
-    }
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithArrow.args = (0, _extends2["default"])({}, Default.args, {
+  showAllValues: true
+});
+var WithCustomArrow = DefaultComponent.bind({});
 exports.WithCustomArrow = WithCustomArrow;
+WithCustomArrow.args = (0, _extends2["default"])({}, Default.args, {
+  showAllValues: true,
+  // eslint-disable-next-line react/display-name
+  dropdownArrow: function dropdownArrow() {
+    return (0, _jsxRuntime.jsx)("span", {
+      sx: {
+        position: 'absolute',
+        top: '2px',
+        right: '10px',
+        pointerEvents: 'none'
+      },
+      children: "\uD83D\uDC47"
+    });
+  }
+});
 WithCustomArrow.displayName = 'WithCustomArrow';