@vitality-ds/components 4.0.0-alpha.0

package/dist/Input/Select/AsyncSelect/hooks/useMemoizedDebounceSearch.spec.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _reactHooks = require("@testing-library/react-hooks");
+var _useMemoizedDebounceSearch = _interopRequireDefault(require("./useMemoizedDebounceSearch"));
+describe("useMemoizedDebounce", function () {
+  var onSearch = jest.fn();
+  var requestDelayMs = 250;
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  var mount = function mount() {
+    return (0, _reactHooks.renderHook)(function () {
+      return (0, _useMemoizedDebounceSearch["default"])({
+        requestDelayMs: requestDelayMs,
+        onSearch: onSearch
+      });
+    });
+  };
+  it("returns a function when called", function () {
+    var _mount = mount(),
+      result = _mount.result;
+    var expectedResult = {
+      memoizedDebouncedSearch: expect.any(Function)
+    };
+    expect(result.current).toEqual(expectedResult);
+  });
+});

package/dist/Input/Select/AsyncSelect/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _async = _interopRequireDefault(require("react-select/async"));
+var _useGetCustomComponents = _interopRequireDefault(require("../hooks/useGetCustomComponents"));
+var _useMenuPositionProps = _interopRequireDefault(require("../hooks/useMenuPositionProps"));
+var _useTypeaheadChangeHandlers = _interopRequireDefault(require("../hooks/useTypeaheadChangeHandlers"));
+var _logic = require("../logic");
+var _useLoadOptions2 = _interopRequireDefault(require("./hooks/useLoadOptions"));
+var _useMemoizedDebounceSearch = _interopRequireDefault(require("./hooks/useMemoizedDebounceSearch"));
+var _excluded = ["style", "className", "suggestedItems", "name", "onChange", "onSearch", "id", "disabled", "hasError", "isClearable", "value", "hideDropdownIndicator", "minChars", "requestDelayMs", "leftAdornmentIcon", "isMulti", "openMenuOnClick", "renderOption", "menuPlacement", "menuPosition", "portalMenu", "valueRenderType", "inputValue", "onInputChange", "noOptionsMessage"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var AsyncSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var style = _ref.style,
+    className = _ref.className,
+    suggestedItems = _ref.suggestedItems,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    onSearch = _ref.onSearch,
+    id = _ref.id,
+    disabled = _ref.disabled,
+    hasError = _ref.hasError,
+    isClearable = _ref.isClearable,
+    value = _ref.value,
+    _ref$hideDropdownIndi = _ref.hideDropdownIndicator,
+    hideDropdownIndicator = _ref$hideDropdownIndi === void 0 ? false : _ref$hideDropdownIndi,
+    _ref$minChars = _ref.minChars,
+    minChars = _ref$minChars === void 0 ? 0 : _ref$minChars,
+    _ref$requestDelayMs = _ref.requestDelayMs,
+    requestDelayMs = _ref$requestDelayMs === void 0 ? 250 : _ref$requestDelayMs,
+    leftAdornmentIcon = _ref.leftAdornmentIcon,
+    _ref$isMulti = _ref.isMulti,
+    isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
+    openMenuOnClick = _ref.openMenuOnClick,
+    renderOption = _ref.renderOption,
+    _ref$menuPlacement = _ref.menuPlacement,
+    menuPlacement = _ref$menuPlacement === void 0 ? "auto" : _ref$menuPlacement,
+    _ref$menuPosition = _ref.menuPosition,
+    menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
+    _ref$portalMenu = _ref.portalMenu,
+    portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    _ref$valueRenderType = _ref.valueRenderType,
+    valueRenderType = _ref$valueRenderType === void 0 ? "default" : _ref$valueRenderType,
+    inputValue = _ref.inputValue,
+    _ref$onInputChange = _ref.onInputChange,
+    onInputChange = _ref$onInputChange === void 0 ? function () {
+      return null;
+    } : _ref$onInputChange,
+    noOptionsMessage = _ref.noOptionsMessage,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var disabledOptions = function disabledOptions(option) {
+    return option.disabled;
+  };
+  var _useGetCustomComponen = (0, _useGetCustomComponents["default"])({
+      hideDropdownIndicator: hideDropdownIndicator,
+      component: "asyncSelect",
+      valueRenderType: valueRenderType
+    }),
+    customComponents = _useGetCustomComponen.customComponents,
+    styles = _useGetCustomComponen.styles;
+  var _useMemoizedDebounced = (0, _useMemoizedDebounceSearch["default"])({
+      requestDelayMs: requestDelayMs,
+      onSearch: onSearch
+    }),
+    memoizedDebouncedSearch = _useMemoizedDebounced.memoizedDebouncedSearch;
+  var _useLoadOptions = (0, _useLoadOptions2["default"])(onSearch, minChars, requestDelayMs, memoizedDebouncedSearch),
+    loadOptions = _useLoadOptions.loadOptions;
+  var menuPositionProps = (0, _useMenuPositionProps["default"])(menuPlacement, menuPosition, portalMenu);
+  var _useTypeaheadChangeHa = (0, _useTypeaheadChangeHandlers["default"])(onChange, onInputChange, valueRenderType),
+    _useTypeaheadChangeHa2 = (0, _slicedToArray2["default"])(_useTypeaheadChangeHa, 2),
+    handleOnChange = _useTypeaheadChangeHa2[0],
+    handleInputOnChange = _useTypeaheadChangeHa2[1];
+  var safeInputValue = (0, _react.useMemo)(function () {
+    return (0, _logic.getSafeInputValue)(value, inputValue, valueRenderType);
+  }, [value, inputValue, valueRenderType]);
+  return /*#__PURE__*/_react["default"].createElement(_async["default"], (0, _extends2["default"])({
+    id: id,
+    loadOptions: loadOptions,
+    value: value,
+    name: name,
+    onChange: handleOnChange,
+    ref: forwardedRef,
+    openMenuOnClick: openMenuOnClick,
+    defaultOptions: suggestedItems,
+    isDisabled: disabled,
+    isOptionDisabled: disabledOptions,
+    "aria-invalid": hasError,
+    isClearable: isClearable,
+    isMulti: isMulti,
+    styles: styles,
+    icon: leftAdornmentIcon,
+    components: customComponents // inner components that have been customised
+    ,
+    unstyled: true,
+    renderOption: renderOption,
+    controlShouldRenderValue: valueRenderType !== "typeahead",
+    inputValue: safeInputValue,
+    onInputChange: handleInputOnChange,
+    noOptionsMessage: noOptionsMessage || valueRenderType === "typeahead" ? function () {
+      return "No suggestions";
+    } : function () {
+      return "No options";
+    }
+  }, menuPositionProps, props));
+});
+AsyncSelect.displayName = "AsyncSelect";
+var _default = exports["default"] = AsyncSelect;

package/dist/Input/Select/AsyncSelect/logic.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = handleSearch;
+function handleSearch(inputText, callback, minChars, requestDelayMs, onSearch, memoizedDebouncedSearch) {
+  if (inputText.trim().length < minChars) {
+    return callback(null);
+  }
+  if (!requestDelayMs) {
+    return Promise.resolve(onSearch(inputText)).then(function (receivedOptions) {
+      return callback(receivedOptions);
+    })["catch"](function (error) {
+      return callback(error);
+    });
+  }
+  if (requestDelayMs) {
+    return memoizedDebouncedSearch(inputText, callback);
+  }
+  return null;
+}

package/dist/Input/Select/AsyncSelect/logic.spec.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _logic = _interopRequireDefault(require("./logic"));
+describe("handleSearch", function () {
+  var inputText = "mock";
+  var callback = jest.fn();
+  var minChars = 5;
+  var requestDelayMs = 500;
+  var onSearch = jest.fn();
+  var memoizedDebouncedSearch = jest.fn();
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  it("when input is less than maxChars, it should call callback", function () {
+    (0, _logic["default"])(inputText, callback, minChars, 0, onSearch, memoizedDebouncedSearch);
+    expect(memoizedDebouncedSearch).not.toHaveBeenCalled();
+    expect(onSearch).not.toHaveBeenCalled();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+  it("when input is greater than maxChars, it should call memoizedDebounce", function () {
+    (0, _logic["default"])(inputText, callback, 0, requestDelayMs, onSearch, memoizedDebouncedSearch);
+    expect(onSearch).not.toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+    expect(memoizedDebouncedSearch).toHaveBeenCalledTimes(1);
+  });
+  it("when input length is greater than maxChars, and delay is set to 0, it should call onSearch", function () {
+    (0, _logic["default"])(inputText, callback, 0, 0, onSearch, memoizedDebouncedSearch);
+    expect(memoizedDebouncedSearch).not.toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+    expect(onSearch).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/Input/Select/AsyncSelect/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Input/Select/CreateableSelect/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
+var _useGetCustomComponents = _interopRequireDefault(require("../hooks/useGetCustomComponents"));
+var _useMenuPositionProps = _interopRequireDefault(require("../hooks/useMenuPositionProps"));
+var _logic = require("../logic");
+var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "onCreateOption", "value", "hideDropdownIndicator", "isMulti", "openMenuOnClick", "renderOption", "menuPlacement", "menuPosition", "portalMenu"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var CreatableSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var css = _ref.css,
+    asChild = _ref.asChild,
+    as = _ref.as,
+    style = _ref.style,
+    className = _ref.className,
+    options = _ref.options,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    disabled = _ref.disabled,
+    hasError = _ref.hasError,
+    onCreateOption = _ref.onCreateOption,
+    value = _ref.value,
+    hideDropdownIndicator = _ref.hideDropdownIndicator,
+    _ref$isMulti = _ref.isMulti,
+    isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
+    openMenuOnClick = _ref.openMenuOnClick,
+    renderOption = _ref.renderOption,
+    _ref$menuPlacement = _ref.menuPlacement,
+    menuPlacement = _ref$menuPlacement === void 0 ? "auto" : _ref$menuPlacement,
+    _ref$menuPosition = _ref.menuPosition,
+    menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
+    _ref$portalMenu = _ref.portalMenu,
+    portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var disabledOptions = function disabledOptions(option) {
+    return option.disabled;
+  };
+  var _useGetCustomComponen = (0, _useGetCustomComponents["default"])({
+      hideDropdownIndicator: hideDropdownIndicator,
+      component: "creatableSelect"
+    }),
+    customComponents = _useGetCustomComponen.customComponents,
+    styles = _useGetCustomComponen.styles;
+  var safeValue = (0, _react.useMemo)(function () {
+    return (0, _logic.getSafeValue)(value, options, isMulti, "CreatableSelect");
+  }, [value, options, isMulti]);
+  var menuPositionProps = (0, _useMenuPositionProps["default"])(menuPlacement, menuPosition, portalMenu);
+  return /*#__PURE__*/_react["default"].createElement(_creatable["default"], (0, _extends2["default"])({
+    id: id,
+    onCreateOption: onCreateOption
+    // does a check for value and if it exists, it will return the safeValue if it does other wise passes null to allow the component to function uncontrolled
+    ,
+    value: value && safeValue,
+    name: name,
+    onChange: onChange,
+    ref: forwardedRef,
+    options: options,
+    openMenuOnClick: openMenuOnClick,
+    isDisabled: disabled,
+    isOptionDisabled: disabledOptions,
+    "aria-invalid": hasError,
+    isClearable: true,
+    isMulti: isMulti,
+    styles: styles,
+    components: customComponents // inner components that have been customised
+    ,
+    unstyled: true,
+    renderOption: renderOption
+  }, menuPositionProps, props));
+});
+CreatableSelect.displayName = "CreatableSelect";
+var _default = exports["default"] = CreatableSelect;

package/dist/Input/Select/CreateableSelect/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Input/Select/SearchSelectInput/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _AsyncSelect = _interopRequireDefault(require("../AsyncSelect"));
+var _useGetCustomComponents = _interopRequireDefault(require("../hooks/useGetCustomComponents"));
+var _excluded = ["onSearch", "onChange", "name", "id", "icon", "hideDropdownIndicator", "openMenuOnClick", "isMulti", "valueRenderType"];
+var SearchSelectInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var onSearch = _ref.onSearch,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    id = _ref.id,
+    icon = _ref.icon,
+    _ref$hideDropdownIndi = _ref.hideDropdownIndicator,
+    hideDropdownIndicator = _ref$hideDropdownIndi === void 0 ? true : _ref$hideDropdownIndi,
+    _ref$openMenuOnClick = _ref.openMenuOnClick,
+    openMenuOnClick = _ref$openMenuOnClick === void 0 ? false : _ref$openMenuOnClick,
+    _ref$isMulti = _ref.isMulti,
+    isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
+    _ref$valueRenderType = _ref.valueRenderType,
+    valueRenderType = _ref$valueRenderType === void 0 ? "default" : _ref$valueRenderType,
+    restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useGetCustomComponen = (0, _useGetCustomComponents["default"])({
+      hideDropdownIndicator: hideDropdownIndicator,
+      component: "searchSelectInput",
+      valueRenderType: valueRenderType
+    }),
+    customComponents = _useGetCustomComponen.customComponents;
+  return /*#__PURE__*/_react["default"].createElement(_AsyncSelect["default"], (0, _extends2["default"])({
+    onChange: onChange,
+    onSearch: onSearch,
+    name: name,
+    openMenuOnClick: openMenuOnClick,
+    id: id,
+    ref: forwardedRef,
+    leftAdornmentIcon: icon,
+    hideDropdownIndicator: true,
+    isMulti: isMulti,
+    valueRenderType: valueRenderType,
+    components: customComponents // custom inner components
+  }, restProps));
+});
+SearchSelectInput.displayName = "SearchSelectInput";
+var _default = exports["default"] = SearchSelectInput;

package/dist/Input/Select/SearchSelectInput/index.spec.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));
+describe("<SearchSelectInput />", function () {
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  it("Should render the SearchSelectInput component", function () {
+    var mockChange = jest.fn();
+    var mockSearch = jest.fn();
+    var mockProps = {
+      name: "name",
+      id: "id"
+    };
+    (0, _react.render)( /*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: mockChange,
+      onSearch: mockSearch
+    }, mockProps)));
+    var searchSelect = _react.screen.getByRole("combobox");
+    expect(searchSelect).toBeDefined();
+  });
+  it("Should not call functions on load", function () {
+    var mockChange = jest.fn();
+    var mockSearch = jest.fn();
+    var mockProps = {
+      name: "name",
+      id: "id"
+    };
+    (0, _react.render)( /*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: mockChange,
+      onSearch: mockSearch
+    }, mockProps)));
+    expect(mockChange).not.toBeCalled();
+    expect(mockSearch).not.toBeCalled();
+  });
+});

package/dist/Input/Select/SearchSelectInput/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Input/Select/Select/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = _interopRequireDefault(require("./primitives"));
+var _excluded = ["css", "asChild", "as", "style", "className", "name", "hasError", "options", "isMulti", "value", "id", "inputId", "openMenuOnClick", "onChange", "disabled", "isClearable", "renderOption", "menuPlacement", "menuPosition", "portalMenu"];
+var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var css = _ref.css,
+    asChild = _ref.asChild,
+    as = _ref.as,
+    style = _ref.style,
+    className = _ref.className,
+    name = _ref.name,
+    hasError = _ref.hasError,
+    options = _ref.options,
+    isMulti = _ref.isMulti,
+    value = _ref.value,
+    id = _ref.id,
+    inputId = _ref.inputId,
+    openMenuOnClick = _ref.openMenuOnClick,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    isClearable = _ref.isClearable,
+    renderOption = _ref.renderOption,
+    _ref$menuPlacement = _ref.menuPlacement,
+    menuPlacement = _ref$menuPlacement === void 0 ? "auto" : _ref$menuPlacement,
+    _ref$menuPosition = _ref.menuPosition,
+    menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
+    _ref$portalMenu = _ref.portalMenu,
+    portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
+    id: id,
+    inputId: inputId,
+    value: value,
+    openMenuOnClick: openMenuOnClick,
+    name: name,
+    onChange: onChange,
+    ref: forwardedRef,
+    options: options,
+    disabled: disabled,
+    "aria-invalid": hasError,
+    isClearable: isClearable,
+    isMulti: isMulti,
+    renderOption: renderOption,
+    valueRenderType: "default",
+    portalMenu: portalMenu,
+    menuPosition: menuPosition,
+    menuPlacement: menuPlacement
+  }, props));
+});
+Select.displayName = "Select";
+var _default = exports["default"] = Select;

package/dist/Input/Select/Select/index.spec.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));
+describe("<Select />", function () {
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  it("Should render the Select component", function () {
+    var mockChange = jest.fn();
+    var mockProps = {
+      name: "name",
+      id: "id",
+      options: []
+    };
+    (0, _react.render)( /*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: mockChange
+    }, mockProps)));
+    var select = _react.screen.getByRole("combobox");
+    expect(select).toBeDefined();
+  });
+});

package/dist/Input/Select/Select/primitives/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactSelect = _interopRequireDefault(require("react-select"));
+var _useGetCustomComponents = _interopRequireDefault(require("../../hooks/useGetCustomComponents"));
+var _useMenuPositionProps = _interopRequireDefault(require("../../hooks/useMenuPositionProps"));
+var _useTypeaheadChangeHandlers = _interopRequireDefault(require("../../hooks/useTypeaheadChangeHandlers"));
+var _logic = require("../../logic");
+var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "isClearable", "hideDropdownIndicator", "isMulti", "value", "inputId", "openMenuOnClick", "renderOption", "valueRenderType", "inputValue", "menuPlacement", "menuPosition", "portalMenu", "onInputChange", "noOptionsMessage"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var SelectPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var css = _ref.css,
+    asChild = _ref.asChild,
+    as = _ref.as,
+    style = _ref.style,
+    className = _ref.className,
+    options = _ref.options,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    disabled = _ref.disabled,
+    hasError = _ref.hasError,
+    isClearable = _ref.isClearable,
+    hideDropdownIndicator = _ref.hideDropdownIndicator,
+    isMulti = _ref.isMulti,
+    value = _ref.value,
+    inputId = _ref.inputId,
+    openMenuOnClick = _ref.openMenuOnClick,
+    renderOption = _ref.renderOption,
+    valueRenderType = _ref.valueRenderType,
+    inputValue = _ref.inputValue,
+    _ref$menuPlacement = _ref.menuPlacement,
+    menuPlacement = _ref$menuPlacement === void 0 ? "auto" : _ref$menuPlacement,
+    _ref$menuPosition = _ref.menuPosition,
+    menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
+    _ref$portalMenu = _ref.portalMenu,
+    portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    _ref$onInputChange = _ref.onInputChange,
+    onInputChange = _ref$onInputChange === void 0 ? function () {
+      return null;
+    } : _ref$onInputChange,
+    noOptionsMessage = _ref.noOptionsMessage,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var disabledOptions = function disabledOptions(option) {
+    return option.disabled;
+  };
+  var _useGetCustomComponen = (0, _useGetCustomComponents["default"])({
+      hideDropdownIndicator: hideDropdownIndicator,
+      component: "select",
+      valueRenderType: valueRenderType
+    }),
+    customComponents = _useGetCustomComponen.customComponents,
+    styles = _useGetCustomComponen.styles;
+  var safeValue = (0, _react.useMemo)(function () {
+    return (0, _logic.getSafeValue)(value, options, isMulti);
+  }, [value, options, isMulti]);
+  var safeInputValue = (0, _react.useMemo)(function () {
+    return (0, _logic.getSafeInputValue)(value, inputValue, valueRenderType);
+  }, [value, inputValue, valueRenderType]);
+  var _useTypeaheadChangeHa = (0, _useTypeaheadChangeHandlers["default"])(onChange, onInputChange, valueRenderType),
+    _useTypeaheadChangeHa2 = (0, _slicedToArray2["default"])(_useTypeaheadChangeHa, 2),
+    handleOnChange = _useTypeaheadChangeHa2[0],
+    handleInputOnChange = _useTypeaheadChangeHa2[1];
+  var menuPositionProps = (0, _useMenuPositionProps["default"])(menuPlacement, menuPosition, portalMenu);
+  return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], (0, _extends2["default"])({
+    id: id,
+    inputId: inputId
+    // does a check for value and if it exists, it will return the safeValue if it does other wise passes null to allow the component to function uncontrolled
+    ,
+    value: value && safeValue,
+    openMenuOnClick: openMenuOnClick,
+    name: name,
+    onChange: handleOnChange,
+    ref: forwardedRef,
+    options: options,
+    isDisabled: disabled,
+    isOptionDisabled: disabledOptions,
+    "aria-invalid": hasError,
+    isClearable: isClearable,
+    isMulti: isMulti,
+    styles: styles,
+    components: customComponents // inner components that have been customised
+    ,
+    renderOption: renderOption,
+    unstyled: true,
+    controlShouldRenderValue: valueRenderType !== "typeahead",
+    inputValue: safeInputValue,
+    onInputChange: handleInputOnChange,
+    noOptionsMessage: noOptionsMessage || valueRenderType === "typeahead" ? function () {
+      return "No suggestions";
+    } : function () {
+      return "No options";
+    }
+  }, menuPositionProps, props));
+});
+SelectPrimitive.displayName = "SelectPrimitive";
+var _default = exports["default"] = SelectPrimitive;

package/dist/Input/Select/Select/primitives/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Input/Select/Select/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Input/Select/components/Chip/MultiValue/styles/BaseMultiValue.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _system = require("@vitality-ds/system");
+var _default = exports["default"] = function _default(baseStyles) {
+  return (0, _extends2["default"])({}, baseStyles, {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "".concat(_system.theme.space.sm)
+  });
+};

package/dist/Input/Select/components/Chip/MultiValueContainer/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactSelect = require("react-select");
+var _ChipIcon = _interopRequireDefault(require("../../../../../Chip/components/ChipIcon"));
+var _styled = require("../../../../../Chip/styled");
+var MultiValueContainer = _reactSelect.components.MultiValueContainer;
+function ChipMultiValueContainer(props) {
+  var data = props.data;
+  var iconProps = data.iconProps,
+    onClick = data.onClick,
+    isDisabled = data.isDisabled;
+  return /*#__PURE__*/_react["default"].createElement(_styled.BaseChip, {
+    size: "default",
+    isInteractive: Boolean(onClick),
+    onClick: onClick,
+    reduceLeftPadding: Boolean(iconProps),
+    isDisabled: isDisabled
+  }, iconProps && /*#__PURE__*/_react["default"].createElement(_ChipIcon["default"], iconProps), /*#__PURE__*/_react["default"].createElement(MultiValueContainer, props));
+}
+var _default = exports["default"] = ChipMultiValueContainer;

package/dist/Input/Select/components/Chip/MultiValueContainer/types.js

@@ -0,0 +1 @@
+"use strict";