@nulogy/components 8.2.1 → 8.3.0

package/dist/main.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-resize-detector'), require('react-windowed-select'), require('react-dom'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-resize-detector', 'react-windowed-select', 'react-dom', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.ReactResizeDetector, global.components, global.reactDom, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
-}(this, (function (exports, React, styled, _typeof$1, _classCallCheck$1, _createClass$1, _defineProperty$1, assign$1, icons, _extends$4, _assertThisInitialized$2, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, ReactResizeDetector, WindowedSelect, reactDom, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-resize-detector'), require('react-windowed-select'), require('regenerator-runtime'), require('react-dom'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-resize-detector', 'react-windowed-select', 'regenerator-runtime', 'react-dom', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.ReactResizeDetector, global.components, global.regeneratorRuntime, global.reactDom, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
+}(this, (function (exports, React, styled, _typeof$1, _classCallCheck$1, _createClass$1, _defineProperty$1, assign$1, icons, _extends$4, _assertThisInitialized$2, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, ReactResizeDetector, WindowedSelect, regeneratorRuntime, reactDom, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,6 +47,7 @@
   var createContext__default = /*#__PURE__*/_interopDefaultLegacy(createContext);
   var ReactResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(ReactResizeDetector);
   var WindowedSelect__default = /*#__PURE__*/_interopDefaultLegacy(WindowedSelect);
+  var regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(regeneratorRuntime);
   var reactDom__default = /*#__PURE__*/_interopDefaultLegacy(reactDom);
   var exenv__default = /*#__PURE__*/_interopDefaultLegacy(exenv);
   var smoothscroll__default = /*#__PURE__*/_interopDefaultLegacy(smoothscroll);
@@ -11737,6 +11738,16 @@
                   t[p[i]] = s[p[i]];
           }
       return t;
+  }
+
+  function __awaiter(thisArg, _arguments, P, generator) {
+      function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+      return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+          function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
   }
 
   var prefix = "random-id-";
@@ -22982,6 +22993,8 @@
     }), /*#__PURE__*/React__default['default'].createElement(WindowedSelect.components.Option, Object.assign({}, props)));
   };
 
+  var regenerator = regeneratorRuntime__default['default'];
+
   var getBorderColor = function getBorderColor(_ref) {
     var errored = _ref.errored,
         disabled = _ref.disabled,
@@ -23195,6 +23208,20 @@
     };
   };
 
+  var extractValuesFromCsvString = function extractValuesFromCsvString(csv) {
+    var quoteRegEx = /(["'])(?:(?=(\\?))\2.)*?\1/gim;
+    var matchedValues = csv.match(quoteRegEx) || [];
+    var quotedValues = matchedValues.map(function (str) {
+      return str.replace(/(["',])/g, "");
+    });
+    var values = Array.from(new Set(csv.replace(quoteRegEx, "").split(",").map(function (value) {
+      return value.trim();
+    }).filter(function (str) {
+      return str.length > 0;
+    }).concat(quotedValues)));
+    return values;
+  };
+
   var SelectControl = function SelectControl(props) {
     // eslint-disable-next-line react/prop-types
     var isFocused = props.isFocused;
@@ -23267,61 +23294,7 @@
     components: undefined,
     closeMenuOnSelect: true
   };
-
-  var checkOptionsAreValid = function checkOptionsAreValid(options) {
-    if (options && process.env.NODE_ENV === "development") {
-      var uniq = function uniq(a) {
-        return Array.from(new Set(a));
-      };
-
-      var uniqueValues = uniq(options.map(function (_ref) {
-        var value = _ref.value;
-        return value === null ? "_null_" : value;
-      }));
-
-      if (uniqueValues.length < options.length) {
-        console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
-      }
-    }
-  };
-
-  var getOption = function getOption(options, value) {
-    // allows an option with  a null value to be matched
-    if (options.length > 0 && value !== undefined) {
-      var optionWithMatchingValue = options.find(function (o) {
-        return o.value === value;
-      });
-      return optionWithMatchingValue || null;
-    }
-
-    return value;
-  };
-
-  var getReactSelectValue = function getReactSelectValue(options, input) {
-    if (Array.isArray(input)) {
-      return input.map(function (i) {
-        return getOption(options, i);
-      });
-    }
-
-    return getOption(options, input);
-  };
-
-  var extractValue = function extractValue(options, isMulti) {
-    if (isMulti) {
-      return options && options.length ? options.map(function (o) {
-        return o.value;
-      }) : [];
-    }
-
-    if (options == null) {
-      return options;
-    } else {
-      return options.value;
-    }
-  };
-
-  var ReactSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var ReactSelect = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
     var autocomplete = _a.autocomplete,
         options = _a.options,
         labelText = _a.labelText,
@@ -23350,17 +23323,83 @@
     var _useTranslation = useTranslation(),
         t = _useTranslation.t;
 
-    var themeContext = React.useContext(styled.ThemeContext);
+    var themeContext = React__default['default'].useContext(styled.ThemeContext);
     var spaceProps = getSubset(props, propTypes.space);
-    React.useEffect(function () {
+    var reactSelectRef = React__default['default'].useRef(null);
+    React__default['default'].useEffect(function () {
       checkOptionsAreValid(options);
     }, [options]);
+    var handleChange = React__default['default'].useCallback(function (option) {
+      onChange && onChange(extractValue(option, multiselect));
+    }, [multiselect, onChange]);
+    var handlePaste = React__default['default'].useCallback(function (e) {
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+        var currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                e.preventDefault();
+                currentRef = reactSelectRef.current;
+                currentValue = currentRef.state.value || [];
+                clipboardData = e.clipboardData.getData("text/plain") || "";
+                values = extractValuesFromCsvString(clipboardData);
+                notExistingOptions = [];
+                pastedOptions = values.map(function (pastedOption) {
+                  var existingOption = options.find(function (option) {
+                    return option.label === pastedOption || option.value === pastedOption;
+                  });
+
+                  if (existingOption) {
+                    return existingOption;
+                  }
+
+                  notExistingOptions.push(pastedOption);
+                  return null;
+                }).filter(Boolean).filter(function (pastedOption) {
+                  return (// ignoring already selected options
+                    currentValue.findIndex(function (option) {
+                      return pastedOption.value === option.value;
+                    }) === -1
+                  );
+                });
+                newValue = [].concat(currentValue, pastedOptions);
+                currentRef.setState(function (prevState) {
+                  return Object.assign(Object.assign({}, prevState), {
+                    value: newValue,
+                    inputValue: notExistingOptions.join(", ")
+                  });
+                });
+                handleChange(newValue);
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+    }, [options]);
+
+    var _SelectInput = React__default['default'].useCallback(function (inputProps) {
+      return /*#__PURE__*/React__default['default'].createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
+        onPaste: handlePaste
+      } : {}));
+    }, [handlePaste, multiselect]);
+
+    React__default['default'].useEffect(function () {
+      if (ref) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref.current = reactSelectRef.current;
+      }
+    }, [reactSelectRef, ref]);
     return /*#__PURE__*/React__default['default'].createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default['default'].createElement(MaybeFieldLabel, {
       labelText: labelText,
       requirementText: requirementText,
       helpText: helpText
     }, /*#__PURE__*/React__default['default'].createElement(WindowedSelect__default['default'], Object.assign({
-      ref: ref,
+      ref: reactSelectRef,
       placeholder: placeholder || t("select ..."),
       windowThreshold: windowThreshold,
       styles: customStyles({
@@ -23375,9 +23414,7 @@
       "aria-invalid": error,
       defaultMenuIsOpen: initialIsOpen,
       inputId: id,
-      onChange: onChange && function (option) {
-        return onChange(extractValue(option, multiselect));
-      },
+      onChange: handleChange,
       defaultValue: getReactSelectValue(options, defaultValue),
       value: getReactSelectValue(options, value),
       isMulti: multiselect,
@@ -23390,7 +23427,7 @@
         DropdownIndicator: SelectDropdownIndicator,
         SelectContainer: SelectContainer$1,
         Menu: SelectMenu,
-        Input: SelectInput
+        Input: _SelectInput
       }, components),
       "aria-label": ariaLabel,
       options: options,
@@ -23401,6 +23438,60 @@
       errorList: errorList
     })));
   });
+
+  var checkOptionsAreValid = function checkOptionsAreValid(options) {
+    if (options && process.env.NODE_ENV === "development") {
+      var uniq = function uniq(a) {
+        return Array.from(new Set(a));
+      };
+
+      var uniqueValues = uniq(options.map(function (_ref) {
+        var value = _ref.value;
+        return value === null ? "_null_" : value;
+      }));
+
+      if (uniqueValues.length < options.length) {
+        console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
+      }
+    }
+  };
+
+  var getOption = function getOption(options, value) {
+    // allows an option with  a null value to be matched
+    if (options.length > 0 && value !== undefined) {
+      var optionWithMatchingValue = options.find(function (o) {
+        return o.value === value;
+      });
+      return optionWithMatchingValue || null;
+    }
+
+    return value;
+  };
+
+  var getReactSelectValue = function getReactSelectValue(options, input) {
+    if (Array.isArray(input)) {
+      return input.map(function (i) {
+        return getOption(options, i);
+      });
+    }
+
+    return getOption(options, input);
+  };
+
+  var extractValue = function extractValue(options, isMulti) {
+    if (isMulti) {
+      return options && options.length ? options.map(function (o) {
+        return o.value;
+      }) : [];
+    }
+
+    if (options == null) {
+      return options;
+    } else {
+      return options.value;
+    }
+  };
+
   ReactSelect.defaultProps = Object.assign(Object.assign({}, SelectDefaultProps), {
     windowThreshold: 300,
     filterOption: undefined
@@ -26188,7 +26279,8 @@
           return /*#__PURE__*/React__default['default'].createElement("div", {
             "aria-hidden": !selected,
             hidden: !selected,
-            selected: selected
+            selected: selected,
+            key: tab.key || tab.label
           }, (_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.children);
         }
       });

package/dist/main.module.js

@@ -19,6 +19,7 @@ import deepEqual from 'deep-equal';
 import createContext$1 from 'create-react-context';
 import ReactResizeDetector from 'react-resize-detector';
 import WindowedSelect, { components as components$1 } from 'react-windowed-select';
+import regeneratorRuntime from 'regenerator-runtime';
 import reactDom, { findDOMNode, createPortal } from 'react-dom';
 import exenv from 'exenv';
 import smoothscroll from 'smoothscroll-polyfill';
@@ -11711,6 +11712,16 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 }
 
 var prefix = "random-id-";
@@ -22956,6 +22967,8 @@ var SelectOption = function SelectOption(props) {
   }), /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
 };
 
+var regenerator = regeneratorRuntime;
+
 var getBorderColor = function getBorderColor(_ref) {
   var errored = _ref.errored,
       disabled = _ref.disabled,
@@ -23169,6 +23182,20 @@ var customStyles = function customStyles(_ref4) {
   };
 };
 
+var extractValuesFromCsvString = function extractValuesFromCsvString(csv) {
+  var quoteRegEx = /(["'])(?:(?=(\\?))\2.)*?\1/gim;
+  var matchedValues = csv.match(quoteRegEx) || [];
+  var quotedValues = matchedValues.map(function (str) {
+    return str.replace(/(["',])/g, "");
+  });
+  var values = Array.from(new Set(csv.replace(quoteRegEx, "").split(",").map(function (value) {
+    return value.trim();
+  }).filter(function (str) {
+    return str.length > 0;
+  }).concat(quotedValues)));
+  return values;
+};
+
 var SelectControl = function SelectControl(props) {
   // eslint-disable-next-line react/prop-types
   var isFocused = props.isFocused;
@@ -23241,61 +23268,7 @@ var SelectDefaultProps = {
   components: undefined,
   closeMenuOnSelect: true
 };
-
-var checkOptionsAreValid = function checkOptionsAreValid(options) {
-  if (options && process.env.NODE_ENV === "development") {
-    var uniq = function uniq(a) {
-      return Array.from(new Set(a));
-    };
-
-    var uniqueValues = uniq(options.map(function (_ref) {
-      var value = _ref.value;
-      return value === null ? "_null_" : value;
-    }));
-
-    if (uniqueValues.length < options.length) {
-      console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
-    }
-  }
-};
-
-var getOption = function getOption(options, value) {
-  // allows an option with  a null value to be matched
-  if (options.length > 0 && value !== undefined) {
-    var optionWithMatchingValue = options.find(function (o) {
-      return o.value === value;
-    });
-    return optionWithMatchingValue || null;
-  }
-
-  return value;
-};
-
-var getReactSelectValue = function getReactSelectValue(options, input) {
-  if (Array.isArray(input)) {
-    return input.map(function (i) {
-      return getOption(options, i);
-    });
-  }
-
-  return getOption(options, input);
-};
-
-var extractValue = function extractValue(options, isMulti) {
-  if (isMulti) {
-    return options && options.length ? options.map(function (o) {
-      return o.value;
-    }) : [];
-  }
-
-  if (options == null) {
-    return options;
-  } else {
-    return options.value;
-  }
-};
-
-var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
+var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var autocomplete = _a.autocomplete,
       options = _a.options,
       labelText = _a.labelText,
@@ -23324,17 +23297,83 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  var themeContext = useContext(ThemeContext$1);
+  var themeContext = React__default.useContext(ThemeContext$1);
   var spaceProps = getSubset(props, propTypes.space);
-  useEffect(function () {
+  var reactSelectRef = React__default.useRef(null);
+  React__default.useEffect(function () {
     checkOptionsAreValid(options);
   }, [options]);
+  var handleChange = React__default.useCallback(function (option) {
+    onChange && onChange(extractValue(option, multiselect));
+  }, [multiselect, onChange]);
+  var handlePaste = React__default.useCallback(function (e) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+      var currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              currentRef = reactSelectRef.current;
+              currentValue = currentRef.state.value || [];
+              clipboardData = e.clipboardData.getData("text/plain") || "";
+              values = extractValuesFromCsvString(clipboardData);
+              notExistingOptions = [];
+              pastedOptions = values.map(function (pastedOption) {
+                var existingOption = options.find(function (option) {
+                  return option.label === pastedOption || option.value === pastedOption;
+                });
+
+                if (existingOption) {
+                  return existingOption;
+                }
+
+                notExistingOptions.push(pastedOption);
+                return null;
+              }).filter(Boolean).filter(function (pastedOption) {
+                return (// ignoring already selected options
+                  currentValue.findIndex(function (option) {
+                    return pastedOption.value === option.value;
+                  }) === -1
+                );
+              });
+              newValue = [].concat(currentValue, pastedOptions);
+              currentRef.setState(function (prevState) {
+                return Object.assign(Object.assign({}, prevState), {
+                  value: newValue,
+                  inputValue: notExistingOptions.join(", ")
+                });
+              });
+              handleChange(newValue);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [options]);
+
+  var _SelectInput = React__default.useCallback(function (inputProps) {
+    return /*#__PURE__*/React__default.createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
+      onPaste: handlePaste
+    } : {}));
+  }, [handlePaste, multiselect]);
+
+  React__default.useEffect(function () {
+    if (ref) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ref.current = reactSelectRef.current;
+    }
+  }, [reactSelectRef, ref]);
   return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
     helpText: helpText
   }, /*#__PURE__*/React__default.createElement(WindowedSelect, Object.assign({
-    ref: ref,
+    ref: reactSelectRef,
     placeholder: placeholder || t("select ..."),
     windowThreshold: windowThreshold,
     styles: customStyles({
@@ -23349,9 +23388,7 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-invalid": error,
     defaultMenuIsOpen: initialIsOpen,
     inputId: id,
-    onChange: onChange && function (option) {
-      return onChange(extractValue(option, multiselect));
-    },
+    onChange: handleChange,
     defaultValue: getReactSelectValue(options, defaultValue),
     value: getReactSelectValue(options, value),
     isMulti: multiselect,
@@ -23364,7 +23401,7 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       DropdownIndicator: SelectDropdownIndicator,
       SelectContainer: SelectContainer$1,
       Menu: SelectMenu,
-      Input: SelectInput
+      Input: _SelectInput
     }, components),
     "aria-label": ariaLabel,
     options: options,
@@ -23375,6 +23412,60 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     errorList: errorList
   })));
 });
+
+var checkOptionsAreValid = function checkOptionsAreValid(options) {
+  if (options && process.env.NODE_ENV === "development") {
+    var uniq = function uniq(a) {
+      return Array.from(new Set(a));
+    };
+
+    var uniqueValues = uniq(options.map(function (_ref) {
+      var value = _ref.value;
+      return value === null ? "_null_" : value;
+    }));
+
+    if (uniqueValues.length < options.length) {
+      console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
+    }
+  }
+};
+
+var getOption = function getOption(options, value) {
+  // allows an option with  a null value to be matched
+  if (options.length > 0 && value !== undefined) {
+    var optionWithMatchingValue = options.find(function (o) {
+      return o.value === value;
+    });
+    return optionWithMatchingValue || null;
+  }
+
+  return value;
+};
+
+var getReactSelectValue = function getReactSelectValue(options, input) {
+  if (Array.isArray(input)) {
+    return input.map(function (i) {
+      return getOption(options, i);
+    });
+  }
+
+  return getOption(options, input);
+};
+
+var extractValue = function extractValue(options, isMulti) {
+  if (isMulti) {
+    return options && options.length ? options.map(function (o) {
+      return o.value;
+    }) : [];
+  }
+
+  if (options == null) {
+    return options;
+  } else {
+    return options.value;
+  }
+};
+
 ReactSelect.defaultProps = Object.assign(Object.assign({}, SelectDefaultProps), {
   windowThreshold: 300,
   filterOption: undefined
@@ -26162,7 +26253,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React__default.createElement("div", {
           "aria-hidden": !selected,
           hidden: !selected,
-          selected: selected
+          selected: selected,
+          key: tab.key || tab.label
         }, (_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.children);
       }
     });

package/dist/src/Select/Select.d.ts

@@ -66,6 +66,6 @@ export declare const SelectDefaultProps: {
     components: any;
     closeMenuOnSelect: boolean;
 };
-export declare const getOption: (options: any, value: any) => any;
 declare const ReactSelect: React.ForwardRefExoticComponent<Pick<SelectProps, React.ReactText> & React.RefAttributes<unknown>>;
+export declare const getOption: (options: any, value: any) => any;
 export default ReactSelect;

package/dist/src/Select/Select.story.d.ts

@@ -108,3 +108,4 @@ export declare const UsingRefToControlFocus: {
     };
 };
 export declare const WithCustomProps: () => JSX.Element;
+export declare const PasteCsvValueInSelect: (props: any) => JSX.Element;

package/dist/src/Select/selectHelpers.d.ts

@@ -0,0 +1 @@
+export declare const extractValuesFromCsvString: (csv: string) => string[];

package/dist/src/Select/selectHelpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -179,6 +179,7 @@
     ],
     "testMatch": [
       "**/src/**/*.spec.tsx",
+      "**/src/**/*.spec.ts",
       "**/spec/**/*.spec.tsx"
     ],
     "setupFiles": [