@bigbinary/neetoui 8.3.0-beta2 → 8.3.0

package/dist/cjs/Select.js

@@ -8,7 +8,7 @@ var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var ramda = require('ramda');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-23eddf9f.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-Bdv9YAMt.js');
 var _extends = require('@babel/runtime/helpers/esm/extends');
 require('@babel/runtime/helpers/objectSpread2');
 require('@babel/runtime/helpers/slicedToArray');
@@ -24,11 +24,11 @@ var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
 var _objectSpread$1 = require('@babel/runtime/helpers/esm/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/esm/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
-var useId = require('./useId-4e3deb5c.js');
+var useId = require('./useId-DXHUzdxd.js');
 require('react-router-dom');
 require('@bigbinary/neeto-hotkeys');
 require('./overlayManager.js');
-var index = require('./index-0f5141e0.js');
+var index = require('./index-BG9I04iF.js');
 require('qs');
 var Label = require('./Label.js');
 var Spinner = require('./Spinner.js');
@@ -39,12 +39,12 @@ require('@babel/runtime/helpers/esm/createSuper');
 require('@babel/runtime/helpers/esm/toConsumableArray');
 require('@babel/runtime/helpers/esm/taggedTemplateLiteral');
 require('@babel/runtime/helpers/esm/typeof');
+require('./en-DhnUUSB_.js');
 require('dayjs');
 require('dayjs/plugin/localeData');
 require('dayjs/plugin/utc');
 require('dayjs/plugin/weekday');
 require('dayjs/plugin/weekOfYear');
-require('./en-80d0fbff.js');
 require('./Button.js');
 require('./Tooltip.js');
 require('@tippyjs/react');
@@ -52,10 +52,7 @@ require('tippy.js');
 require('./Popover.js');
 require('./Typography.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -68,25 +65,15 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var _extends__default$1 = /*#__PURE__*/_interopDefaultLegacy(_extends$1);
-var _defineProperty__default$1 = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$1);
-var _objectWithoutProperties__default$1 = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties$1);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread$1);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var baseSelectProps = reactSelectCreatable_esm.useStateManager(props);
-  return /*#__PURE__*/React__namespace.createElement(reactSelectCreatable_esm.Select, _extends__default["default"]({
+  return /*#__PURE__*/React__namespace.createElement(reactSelectCreatable_esm.Select, _extends({
     ref: ref
   }, baseSelectProps));
 });
@@ -104,44 +91,44 @@ function useAsync(_ref) {
     propsOnInputChange = _ref.onInputChange,
     _ref$filterOption = _ref.filterOption,
     filterOption = _ref$filterOption === void 0 ? null : _ref$filterOption,
-    restSelectProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+    restSelectProps = _objectWithoutProperties(_ref, _excluded$1);
   var propsInputValue = restSelectProps.inputValue;
   var lastRequest = React.useRef(undefined);
   var mounted = React.useRef(false);
   var _useState = React.useState(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     defaultOptions = _useState2[0],
     setDefaultOptions = _useState2[1];
   var _useState3 = React.useState(typeof propsInputValue !== 'undefined' ? propsInputValue : ''),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     stateInputValue = _useState4[0],
     setStateInputValue = _useState4[1];
   var _useState5 = React.useState(propsDefaultOptions === true),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     isLoading = _useState6[0],
     setIsLoading = _useState6[1];
   var _useState7 = React.useState(undefined),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    _useState8 = _slicedToArray(_useState7, 2),
     loadedInputValue = _useState8[0],
     setLoadedInputValue = _useState8[1];
   var _useState9 = React.useState([]),
-    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    _useState10 = _slicedToArray(_useState9, 2),
     loadedOptions = _useState10[0],
     setLoadedOptions = _useState10[1];
   var _useState11 = React.useState(false),
-    _useState12 = _slicedToArray__default["default"](_useState11, 2),
+    _useState12 = _slicedToArray(_useState11, 2),
     passEmptyOptions = _useState12[0],
     setPassEmptyOptions = _useState12[1];
   var _useState13 = React.useState({}),
-    _useState14 = _slicedToArray__default["default"](_useState13, 2),
+    _useState14 = _slicedToArray(_useState13, 2),
     optionsCache = _useState14[0],
     setOptionsCache = _useState14[1];
   var _useState15 = React.useState(undefined),
-    _useState16 = _slicedToArray__default["default"](_useState15, 2),
+    _useState16 = _slicedToArray(_useState15, 2),
     prevDefaultOptions = _useState16[0],
     setPrevDefaultOptions = _useState16[1];
   var _useState17 = React.useState(undefined),
-    _useState18 = _slicedToArray__default["default"](_useState17, 2),
+    _useState18 = _slicedToArray(_useState17, 2),
     prevCacheOptions = _useState18[0],
     setPrevCacheOptions = _useState18[1];
   if (cacheOptions !== prevCacheOptions) {
@@ -209,12 +196,12 @@ function useAsync(_ref) {
         setLoadedInputValue(inputValue);
         setLoadedOptions(options || []);
         setPassEmptyOptions(false);
-        setOptionsCache(options ? _objectSpread__default["default"](_objectSpread__default["default"]({}, optionsCache), {}, _defineProperty__default["default"]({}, inputValue, options)) : optionsCache);
+        setOptionsCache(options ? _objectSpread$1(_objectSpread$1({}, optionsCache), {}, _defineProperty({}, inputValue, options)) : optionsCache);
       });
     }
   }, [cacheOptions, loadOptions, loadedInputValue, optionsCache, propsOnInputChange]);
   var options = passEmptyOptions ? [] : stateInputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, restSelectProps), {}, {
+  return _objectSpread$1(_objectSpread$1({}, restSelectProps), {}, {
     options: options,
     isLoading: isLoading || propsIsLoading,
     onInputChange: onInputChange,
@@ -225,7 +212,7 @@ function useAsync(_ref) {
 var AsyncSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var stateManagedProps = useAsync(props);
   var selectProps = reactSelectCreatable_esm.useStateManager(stateManagedProps);
-  return /*#__PURE__*/React__namespace.createElement(reactSelectCreatable_esm.Select, _extends__default["default"]({
+  return /*#__PURE__*/React__namespace.createElement(reactSelectCreatable_esm.Select, _extends({
     ref: ref
   }, selectProps));
 });
@@ -234,15 +221,15 @@ var AsyncCreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var stateManagerProps = useAsync(props);
   var creatableProps = reactSelectCreatable_esm.useStateManager(stateManagerProps);
   var selectProps = reactSelectCreatable_esm.useCreatable(creatableProps);
-  return /*#__PURE__*/React__namespace.createElement(reactSelectCreatable_esm.Select, _extends__default["default"]({
+  return /*#__PURE__*/React__namespace.createElement(reactSelectCreatable_esm.Select, _extends({
     ref: ref
   }, selectProps));
 });
 
 var _excluded = ["children"],
-  _excluded2 = ["size", "label", "required", "error", "helpText", "className", "innerRef", "isCreateable", "strategy", "id", "labelProps", "value", "defaultValue", "components", "optionRemapping"];
+  _excluded2 = ["size", "label", "required", "error", "helpText", "className", "innerRef", "isCreateable", "strategy", "id", "labelProps", "value", "defaultValue", "components", "optionRemapping", "onMenuClose", "onMenuOpen", "onKeyDown", "styles", "dataCy"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default$1["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SIZES = {
   small: "small",
   medium: "medium",
@@ -254,37 +241,37 @@ var STRATEGIES = {
 };
 var Control = function Control(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default$1["default"](_ref, _excluded);
+    props = _objectWithoutProperties$1(_ref, _excluded);
   var selectProps = props.selectProps,
     hasValue = props.hasValue;
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.Control, props, hasValue && selectProps.isMulti && /*#__PURE__*/React__default["default"].createElement("span", {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.Control, props, hasValue && selectProps.isMulti && /*#__PURE__*/React.createElement("span", {
     className: "neeto-ui-btn neeto-ui-btn--style-secondary neeto-ui-react-select__add-btn"
   }, selectProps.addButtonLabel || "Add"), " ", children);
 };
 var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.DropdownIndicator, _extends__default$1["default"]({}, props, {
-    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, _defineProperty__default$1["default"]({}, "data-cy", "action-select-indicator"))
-  }), /*#__PURE__*/React__default["default"].createElement(neetoIcons.Down, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.DropdownIndicator, _extends$1({}, props, {
+    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, _defineProperty$1({}, "data-cy", "action-select-indicator"))
+  }), /*#__PURE__*/React.createElement(neetoIcons.Down, {
     size: 16
   }));
 };
 var ClearIndicator = function ClearIndicator(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.ClearIndicator, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.ClearIndicator, _extends$1({}, props, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       "data-cy": "clear-select-indicator"
     })
-  }), /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+  }), /*#__PURE__*/React.createElement(neetoIcons.Close, {
     size: 16
   }));
 };
 var MultiValueRemove = function MultiValueRemove(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.MultiValueRemove, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.MultiValueRemove, props, /*#__PURE__*/React.createElement(neetoIcons.Close, {
     size: 16
   }));
 };
 var CustomInput = function CustomInput(props) {
   var selectProps = props.selectProps;
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.Input, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.Input, _extends$1({}, props, {
     "data-cy": selectProps ? selectProps["data-cy"] : "select-input",
     "data-testid": selectProps && selectProps["data-testid"],
     maxLength: selectProps && selectProps.maxLength
@@ -292,34 +279,35 @@ var CustomInput = function CustomInput(props) {
 };
 var CustomOption = function CustomOption(props) {
   var ref = React.useRef();
+  var dataCy = props.data.dataCy;
   React.useEffect(function () {
     props.isSelected && ref.current.scrollIntoView();
   }, [props.isSelected]);
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.Option, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.Option, _extends$1({}, props, {
     innerRef: ref,
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
-      "data-cy": "".concat(index.hyphenize(props.label), "-select-option")
+      "data-cy": dataCy || "".concat(index.hyphenize(props.label), "-select-option")
     })
   }));
 };
 var Placeholder = function Placeholder(props) {
   var selectProps = props.selectProps;
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.Placeholder, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.Placeholder, _extends$1({}, props, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
-      "data-cy": selectProps ? "".concat(index.hyphenize(selectProps.label), "-select-placeholder") : "select-placeholder"
+      "data-cy": selectProps !== null && selectProps !== void 0 && selectProps.hyphenatedDataCyLabel ? "".concat(selectProps.hyphenatedDataCyLabel, "-select-placeholder") : "select-placeholder"
     })
   }));
 };
 var Menu = function Menu(props) {
   var selectProps = props.selectProps;
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.Menu, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.Menu, _extends$1({}, props, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
-      "data-cy": selectProps ? "".concat(index.hyphenize(selectProps.label), "-select-menu") : "select-menu"
+      "data-cy": selectProps ? "".concat(selectProps.hyphenatedDataCyLabel, "-select-menu") : "select-menu"
     })
   }));
 };
 var SingleValue = function SingleValue(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.SingleValue, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.SingleValue, _extends$1({}, props, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       "data-cy": "select-single-value"
     })
@@ -327,10 +315,10 @@ var SingleValue = function SingleValue(props) {
 };
 var ValueContainer = function ValueContainer(props) {
   var selectProps = props.selectProps;
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.ValueContainer, _extends__default$1["default"]({}, props, {
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.ValueContainer, _extends$1({}, props, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       name: selectProps.name,
-      "data-cy": selectProps ? "".concat(index.hyphenize(selectProps.label), "-select-value-container") : "select-value-container"
+      "data-cy": selectProps ? "".concat(selectProps.hyphenatedDataCyLabel, "-select-value-container") : "select-value-container"
     })
   }));
 };
@@ -362,15 +350,16 @@ var MenuList = function MenuList(props) {
       (_observer = observer) === null || _observer === void 0 || _observer.unobserve(loaderRef.current);
     };
   }, [hasMore]);
-  return /*#__PURE__*/React__default["default"].createElement(reactSelectCreatable_esm.components.MenuList, _extends__default$1["default"]({}, props, portalProps, {
-    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, _defineProperty__default$1["default"]({}, "data-testid", "menu-list"))
-  }), props.children, hasMore && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-center justify-center py-3",
+  return /*#__PURE__*/React.createElement(reactSelectCreatable_esm.components.MenuList, _extends$1({}, props, portalProps, {
+    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, _defineProperty$1({}, "data-testid", "menu-list"))
+  }), props.children, hasMore && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-w-full neeto-ui-items-center neeto-ui-justify-center neeto-ui-py-3",
     "data-testid": "loader",
     ref: loaderRef
-  }, /*#__PURE__*/React__default["default"].createElement(Spinner, null)));
+  }, /*#__PURE__*/React.createElement(Spinner, null)));
 };
 var Select = function Select(_ref2) {
+  var _ref3, _otherProps$isMenuOpe;
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? SIZES.medium : _ref2$size,
     _ref2$label = _ref2.label,
@@ -395,8 +384,17 @@ var Select = function Select(_ref2) {
     componentOverrides = _ref2.components,
     _ref2$optionRemapping = _ref2.optionRemapping,
     optionRemapping = _ref2$optionRemapping === void 0 ? {} : _ref2$optionRemapping,
-    otherProps = _objectWithoutProperties__default$1["default"](_ref2, _excluded2);
+    onMenuClose = _ref2.onMenuClose,
+    onMenuOpen = _ref2.onMenuOpen,
+    onKeyDown = _ref2.onKeyDown,
+    _ref2$styles = _ref2.styles,
+    styles = _ref2$styles === void 0 ? {} : _ref2$styles,
+    _ref2$dataCy = _ref2.dataCy,
+    dataCy = _ref2$dataCy === void 0 ? "nui" : _ref2$dataCy,
+    otherProps = _objectWithoutProperties$1(_ref2, _excluded2);
   var inputId = useId.useId(id);
+  var isMenuOpen = React.useRef((_ref3 = (_otherProps$isMenuOpe = otherProps.isMenuOpen) !== null && _otherProps$isMenuOpe !== void 0 ? _otherProps$isMenuOpe : otherProps.defaultMenuIsOpen) !== null && _ref3 !== void 0 ? _ref3 : false);
+  var hyphenatedDataCyLabel = ramda.isEmpty(label) ? index.hyphenize(dataCy) : index.hyphenize(label);
   var Parent = StateManagedSelect;
   if (isCreateable) {
     Parent = reactSelectCreatable_esm.CreatableSelect;
@@ -412,9 +410,9 @@ var Select = function Select(_ref2) {
   }
   var portalProps = strategy === STRATEGIES.fixed && {
     menuPortalTarget: document.body,
-    styles: {
+    styles: ramda.mergeDeepRight({
       menuPortal: ramda.assoc("zIndex", 999999)
-    },
+    }, styles),
     menuPosition: "fixed"
   };
   var options = otherProps.options,
@@ -445,24 +443,37 @@ var Select = function Select(_ref2) {
       return getRealOptionValue(opt) === getRealOptionValue(value);
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](["neeto-ui-input__wrapper", className]),
-    "data-cy": "".concat(index.hyphenize(label), "-select-container-wrapper"),
+  var handleMenuOpen = function handleMenuOpen() {
+    isMenuOpen.current = true;
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  };
+  var handleMenuClose = function handleMenuClose() {
+    isMenuOpen.current = false;
+    onMenuClose === null || onMenuClose === void 0 || onMenuClose();
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!isMenuOpen.current) return;
+    e.stopPropagation();
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(["neeto-ui-input__wrapper", className]),
+    "data-cy": "".concat(hyphenatedDataCyLabel, "-select-container-wrapper"),
     "data-testid": "select"
-  }, label && /*#__PURE__*/React__default["default"].createElement(Label, _extends__default$1["default"]({
+  }, label && /*#__PURE__*/React.createElement(Label, _extends$1({
     required: required,
-    "data-cy": "".concat(index.hyphenize(label), "-input-label"),
+    "data-cy": "".concat(hyphenatedDataCyLabel, "-input-label"),
     "data-testid": "select-label",
     htmlFor: inputId
-  }, labelProps), label), /*#__PURE__*/React__default["default"].createElement(Parent, _extends__default$1["default"]({
+  }, labelProps), label), /*#__PURE__*/React.createElement(Parent, _extends$1({
     blurInputOnSelect: false,
     classNamePrefix: "neeto-ui-react-select",
     closeMenuOnSelect: !otherProps.isMulti,
-    "data-cy": "".concat(index.hyphenize(label), "-select-container"),
+    "data-cy": "".concat(hyphenatedDataCyLabel, "-select-container"),
     defaultValue: findInOptions(defaultValue),
     ref: innerRef,
     value: findInOptions(value),
-    className: classnames__default["default"](["neeto-ui-react-select__container"], {
+    className: classnames(["neeto-ui-react-select__container"], {
       "neeto-ui-react-select__container--error": !!error,
       "neeto-ui-react-select__container--small": size === SIZES.small,
       "neeto-ui-react-select__container--medium": size === SIZES.medium,
@@ -480,17 +491,23 @@ var Select = function Select(_ref2) {
       MenuList: MenuList,
       SingleValue: SingleValue,
       Control: Control
-    }, componentOverrides)
-  }, _objectSpread(_objectSpread({
+    }, componentOverrides),
+    onKeyDown: handleKeyDown,
+    onMenuClose: handleMenuClose,
+    onMenuOpen: handleMenuOpen
+  }, _objectSpread(_objectSpread(_objectSpread({
     inputId: inputId,
-    label: label
-  }, portalProps), otherProps))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
+    label: label,
+    styles: styles
+  }, portalProps), otherProps), {}, {
+    hyphenatedDataCyLabel: hyphenatedDataCyLabel
+  }))), !!error && /*#__PURE__*/React.createElement("p", {
     className: "neeto-ui-input__error",
-    "data-cy": "".concat(index.hyphenize(label), "-select-error"),
+    "data-cy": "".concat(hyphenatedDataCyLabel, "-select-error"),
     "data-testid": "select-error"
-  }, error), helpText && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, error), helpText && /*#__PURE__*/React.createElement("p", {
     className: "neeto-ui-input__help-text",
-    "data-cy": "".concat(index.hyphenize(label), "-select-help-text"),
+    "data-cy": "".concat(hyphenatedDataCyLabel, "-select-help-text"),
     "data-testid": "select-help-text"
   }, helpText));
 };