glints-aries 4.0.239 → 4.0.241

package/lib/@next/Select/components/Activator/ActivatorSelect.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    values?: string[];
+    allowMultiple?: boolean;
+    hasError?: boolean;
+    selectedValues?: string[];
     placeholder?: string;
     onRemoveTag?({ option }: {
         option: string;
     }): void;
+    onSelectClick?(): void;
     width?: string;
 }
-export declare const ActivatorSelect: ({ placeholder, values, onClick, onRemoveTag, width, ...props }: ActivatorSelectProps) => JSX.Element;
+export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, ...props }: ActivatorSelectProps) => JSX.Element;

package/lib/@next/Select/components/Activator/ActivatorSelect.js

@@ -9,29 +9,28 @@ var _react = _interopRequireWildcard(require("react"));
 var _Icon = require("../../../Icon");
 var _Typography = require("../../../Typography");
 var _colors = require("../../../utilities/colors");
-var _ActivatorContext = require("./ActivatorContext");
 var _ActivatorStyle = require("./ActivatorStyle");
-var _excluded = ["placeholder", "values", "onClick", "onRemoveTag", "width"];
+var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError"];
 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 ActivatorSelect = function ActivatorSelect(_ref) {
   var placeholder = _ref.placeholder,
-    values = _ref.values,
+    selectedValues = _ref.selectedValues,
     onClick = _ref.onClick,
     onRemoveTag = _ref.onRemoveTag,
     width = _ref.width,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    disabled = _ref.disabled,
+    onSelectClick = _ref.onSelectClick,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var activatorRef = (0, _react.useRef)(null);
-  var filteredValues = values == null ? void 0 : values.filter(function (value) {
+  var filteredValues = selectedValues == null ? void 0 : selectedValues.filter(function (value) {
     return value != '';
   });
   var hasValue = filteredValues.length > 0;
-  var activatorContext = (0, _ActivatorContext.useActivatorSelect)();
-  var allowMultiple = activatorContext.allowMultiple,
-    disabled = activatorContext.disabled,
-    onSelectClick = activatorContext.onSelectClick,
-    hasError = activatorContext.hasError,
-    selectedValues = activatorContext.selectedValues;
   var handleClick = function handleClick(e) {
     e.preventDefault();
     e.stopPropagation();

package/lib/@next/Select/components/Activator/ActivatorTextInput.d.ts

@@ -1,8 +1,22 @@
 /// <reference types="react" />
+import { Option } from '../../../Menu';
 import { TextInputProps } from '../../../TextInput';
-export interface ActivatorTextInputProps extends Omit<TextInputProps, 'onChange'> {
+import { SearchableSelectState } from '../SearchableSelectInput/SearchableSelectInput';
+export interface ActivatorTextInputProps extends Omit<TextInputProps, 'onChange' | 'onSelect'> {
+    allowMultiple?: boolean;
+    disabled?: boolean;
     hasError?: boolean;
     onChange?(value: string): void;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    selectedValues?: string[];
     width?: string;
+    inputValue?: string;
+    updateInputValue?: (newValue: string) => void;
+    searchableSelectState?: SearchableSelectState;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    options?: Option[];
+    updateMenuOptions?: (newState: Option[]) => void;
 }
-export declare const ActivatorTextInput: ({ onChange, prefix, value, width, ...props }: ActivatorTextInputProps) => JSX.Element;
+export declare const ActivatorTextInput: ({ allowMultiple, disabled, hasError, onChange, onFocus, onSelect, prefix, selectedValues, width, inputValue, updateInputValue, options, updateMenuOptions, ...props }: ActivatorTextInputProps) => JSX.Element;

package/lib/@next/Select/components/Activator/ActivatorTextInput.js

@@ -7,33 +7,63 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = require("../../../Icon");
-var _ActivatorContext = require("./ActivatorContext");
+var _SearchableSelectInput = require("../SearchableSelectInput/SearchableSelectInput");
 var _ActivatorStyle = require("./ActivatorStyle");
-var _excluded = ["onChange", "prefix", "value", "width"];
+var _excluded = ["allowMultiple", "disabled", "hasError", "onChange", "onFocus", "onSelect", "prefix", "selectedValues", "width", "inputValue", "updateInputValue", "options", "updateMenuOptions"];
 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 ActivatorTextInput = function ActivatorTextInput(_ref) {
-  var onChange = _ref.onChange,
+  var allowMultiple = _ref.allowMultiple,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onSelect = _ref.onSelect,
     _ref$prefix = _ref.prefix,
     prefix = _ref$prefix === void 0 ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
       name: "ri-search"
     }) : _ref$prefix,
-    value = _ref.value,
+    selectedValues = _ref.selectedValues,
     width = _ref.width,
+    inputValue = _ref.inputValue,
+    updateInputValue = _ref.updateInputValue,
+    options = _ref.options,
+    updateMenuOptions = _ref.updateMenuOptions,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var activatorRef = (0, _react.useRef)(null);
-  var activatorContext = (0, _ActivatorContext.useActivatorTextInput)();
-  var disabled = activatorContext.disabled,
-    onFocus = activatorContext.onFocus,
-    hasError = activatorContext.hasError;
+  var _useState = (0, _react.useState)(false),
+    hasSelectedValues = _useState[0],
+    setHasSelectedValues = _useState[1];
+  var filterOptions = function filterOptions(str) {
+    if (str === '') {
+      updateMenuOptions(options);
+      return options;
+    }
+    var filterRegex = new RegExp(str, 'i');
+    var filterOptions = options.filter(function (option) {
+      return option.label.match(filterRegex);
+    });
+    return filterOptions;
+  };
   var handleChange = function handleChange(_ref2) {
     var value = _ref2.value;
-    if (onChange) onChange(value);
+    if (onChange) {
+      onChange(value);
+      var filteredOptions = filterOptions(value);
+      updateMenuOptions(filteredOptions);
+      return;
+    }
   };
-  return /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledTextInput, (0, _extends2["default"])({}, props, {
+  (0, _react.useEffect)(function () {
+    setHasSelectedValues(selectedValues.filter(function (v) {
+      return v != '';
+    }).length > 0);
+  }, [selectedValues]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, allowMultiple ? /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledTextInput, (0, _extends2["default"])({}, props, {
     ref: activatorRef,
     prefix: prefix,
-    value: value,
     onChange: function onChange(value) {
       return handleChange({
         value: value
@@ -43,6 +73,20 @@ var ActivatorTextInput = function ActivatorTextInput(_ref) {
     error: hasError,
     disabled: disabled,
     width: width
-  }));
+  })) : /*#__PURE__*/_react["default"].createElement(_SearchableSelectInput.SearchableSelectInput, (0, _extends2["default"])({}, props, {
+    ref: activatorRef,
+    prefix: prefix,
+    filterOptions: filterOptions,
+    onFocus: onFocus,
+    onSelect: onSelect,
+    error: hasError,
+    disabled: disabled,
+    selectedValue: hasSelectedValues ? selectedValues[0] : null,
+    width: width,
+    inputValue: inputValue,
+    updateInputValue: updateInputValue,
+    options: options,
+    updateMenuOptions: updateMenuOptions
+  })));
 };
 exports.ActivatorTextInput = ActivatorTextInput;

package/lib/@next/Select/components/OptionList/OptionList.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
-import { MenuProps } from '../../../Menu';
+import { MenuProps, Option } from '../../../Menu';
+import { SearchableSelectState } from '../SearchableSelectInput/SearchableSelectInput';
 export interface OptionListProps extends MenuProps {
     isEmpty?: boolean;
     noOptionsMessage?: React.ReactNode;
+    onMenuClose?: () => void;
     onSelect?({ value }: {
         value: string;
     }): void;
     width?: string;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    menuOptions?: Option[];
 }
 export interface NoOptionListProps {
     noOptionsMessage?: React.ReactNode;
 }
 export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;
-export declare const OptionList: ({ allowMultiple, noOptionsMessage, onSelect, options, sections, selectedValues, title, width, }: OptionListProps) => JSX.Element;
+export declare const OptionList: ({ allowMultiple, noOptionsMessage, onMenuClose, onSelect, sections, selectedValues, title, updateSearchableSelectState, width, menuOptions, }: OptionListProps) => JSX.Element;

package/lib/@next/Select/components/OptionList/OptionList.js

@@ -1,13 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.OptionList = exports.NoOptionList = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Menu = require("../../../Menu");
 var _Typography = require("../../../Typography");
 var _colors = require("../../../utilities/colors");
 var _OptionListStyle = require("./OptionListStyle");
+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 NoOptionList = function NoOptionList(_ref) {
   var _ref$noOptionsMessage = _ref.noOptionsMessage,
     noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'No matching results' : _ref$noOptionsMessage;
@@ -21,27 +22,40 @@ exports.NoOptionList = NoOptionList;
 var OptionList = function OptionList(_ref2) {
   var allowMultiple = _ref2.allowMultiple,
     noOptionsMessage = _ref2.noOptionsMessage,
+    onMenuClose = _ref2.onMenuClose,
     onSelect = _ref2.onSelect,
-    options = _ref2.options,
     sections = _ref2.sections,
     selectedValues = _ref2.selectedValues,
     title = _ref2.title,
-    width = _ref2.width;
-  var hasOptions = options.length > 0;
+    updateSearchableSelectState = _ref2.updateSearchableSelectState,
+    width = _ref2.width,
+    menuOptions = _ref2.menuOptions;
+  var _useState = (0, _react.useState)(false),
+    hasMenuOptions = _useState[0],
+    setHasMenuOptions = _useState[1];
+  (0, _react.useEffect)(function () {
+    setHasMenuOptions((menuOptions == null ? void 0 : menuOptions.length) > 0);
+  }, [menuOptions]);
   var onOptionSelect = function onOptionSelect(_ref3) {
     var value = _ref3.value;
     if (onSelect) {
       onSelect({
         value: value
       });
-      return;
+      if (allowMultiple) return;
+      updateSearchableSelectState({
+        showSelected: true,
+        showInput: false,
+        showPlaceholder: false
+      });
+      onMenuClose();
     }
   };
   return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.OptionListContainer, {
     width: width
-  }, hasOptions ? /*#__PURE__*/_react["default"].createElement(_Menu.Menu, {
+  }, hasMenuOptions ? /*#__PURE__*/_react["default"].createElement(_Menu.Menu, {
     allowMultiple: allowMultiple,
-    options: options,
+    options: menuOptions,
     onClick: onOptionSelect,
     sections: sections,
     selectedValues: selectedValues,

package/lib/@next/Select/components/SearchableSelectInput/ClearSelected.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface ClearSelectedProps {
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    handleClearIconClick?: () => void;
+    updateInputValue?(newValue: string): void;
+}
+export declare const ClearSelected: ({ onSelect, handleClearIconClick, updateInputValue, }: ClearSelectedProps) => JSX.Element;

package/lib/@next/Select/components/SearchableSelectInput/ClearSelected.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ClearSelected = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../../../Icon");
+var _SearchableSelectInputStyle = require("./SearchableSelectInputStyle");
+var ClearSelected = function ClearSelected(_ref) {
+  var onSelect = _ref.onSelect,
+    handleClearIconClick = _ref.handleClearIconClick,
+    updateInputValue = _ref.updateInputValue;
+  var onClearIconClick = function onClearIconClick() {
+    updateInputValue('');
+    onSelect({
+      value: ''
+    });
+    handleClearIconClick();
+  };
+  return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.ClearSelectedContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close-circle-fill",
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: onClearIconClick
+  }));
+};
+exports.ClearSelected = ClearSelected;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { InputProps } from '../../../Input/Input';
+import { Option } from '../../../Menu';
+export interface SearchableSelectState {
+    showSelected: boolean;
+    showInput: boolean;
+    showPlaceholder: boolean;
+}
+export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onChange' | 'onSelect'> & {
+    canClear?: boolean;
+    filterOptions?: (str: string) => Option[];
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    selectedValue?: string;
+    inputValue?: string;
+    updateInputValue?: (newValue: string) => void;
+    searchableSelectState?: SearchableSelectState;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    options?: Option[];
+    updateMenuOptions?: (newState: Option[]) => void;
+};
+export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "onSelect"> & {
+    canClear?: boolean;
+    filterOptions?: (str: string) => Option[];
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    selectedValue?: string;
+    inputValue?: string;
+    updateInputValue?: (newValue: string) => void;
+    searchableSelectState?: SearchableSelectState;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    options?: Option[];
+    updateMenuOptions?: (newState: Option[]) => void;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SearchableSelectInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _InputStyle = require("../../../Input/InputStyle");
+var _ClearSelected = require("./ClearSelected");
+var _SearchableSelectInputStyle = require("./SearchableSelectInputStyle");
+var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
+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 SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function SearchableSelectInput(_ref, ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    error = _ref.error,
+    filterOptions = _ref.filterOptions,
+    onSelect = _ref.onSelect,
+    placeholder = _ref.placeholder,
+    prefix = _ref.prefix,
+    selectedValue = _ref.selectedValue,
+    width = _ref.width,
+    inputValue = _ref.inputValue,
+    updateInputValue = _ref.updateInputValue,
+    onFocus = _ref.onFocus,
+    _ref$searchableSelect = _ref.searchableSelectState,
+    showInput = _ref$searchableSelect.showInput,
+    showPlaceholder = _ref$searchableSelect.showPlaceholder,
+    showSelected = _ref$searchableSelect.showSelected,
+    updateSearchableSelectState = _ref.updateSearchableSelectState,
+    options = _ref.options,
+    updateMenuOptions = _ref.updateMenuOptions,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var inputRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    showClear = _useState[0],
+    setShowClear = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isSelectedClicked = _useState2[0],
+    setIsSelectedClicked = _useState2[1];
+  var handleFocus = function handleFocus(e) {
+    setIsSelectedClicked(false);
+    setShowClear(false);
+    onFocus(e);
+  };
+  var handleClearIconClick = function handleClearIconClick() {
+    setShowClear(false);
+    updateSearchableSelectState({
+      showSelected: false,
+      showPlaceholder: true,
+      showInput: true
+    });
+    updateMenuOptions(options);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    var str = e.currentTarget.value;
+    updateInputValue(str);
+    var filteredOptions = filterOptions(str);
+    updateMenuOptions(filteredOptions);
+    updateSearchableSelectState({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: false
+    });
+  };
+  var handleSelectedClick = function handleSelectedClick(e) {
+    e.stopPropagation();
+    setIsSelectedClicked(true);
+    updateSearchableSelectState({
+      showSelected: true,
+      showInput: true,
+      showPlaceholder: false
+    });
+    updateInputValue('');
+    updateMenuOptions(options);
+  };
+  var handleInputBlur = function handleInputBlur() {
+    setIsSelectedClicked(false);
+    if (selectedValue) {
+      // allow onClick event handler in Menu before onBlur of input
+      setTimeout(function () {
+        setShowClear(true);
+        updateSearchableSelectState({
+          showSelected: true,
+          showInput: false,
+          showPlaceholder: false
+        });
+      }, 100);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (isSelectedClicked && showInput) {
+      inputRef.current.focus();
+    }
+    return;
+  }, [isSelectedClicked, showInput]);
+  (0, _react.useEffect)(function () {
+    if (selectedValue) {
+      setShowClear(true);
+      return;
+    }
+    setShowClear(false);
+  }, [selectedValue]);
+  return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledContainer, {
+    ref: ref,
+    "data-error": error,
+    "data-disabled": disabled,
+    prefixWidth: 37,
+    suffixWidth: 33,
+    width: width
+  }, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, null, prefix), showSelected && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelectedValue, {
+    className: "searchable-select",
+    onClick: handleSelectedClick
+  }, selectedValue), showInput && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.InputContainer, null, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({
+    ref: inputRef,
+    onChange: handleInputChange,
+    placeholder: showPlaceholder ? placeholder : null,
+    value: inputValue,
+    onBlur: handleInputBlur,
+    onFocus: handleFocus
+  }, props))), showClear && /*#__PURE__*/_react["default"].createElement(_ClearSelected.ClearSelected, {
+    onSelect: onSelect,
+    handleClearIconClick: handleClearIconClick,
+    updateInputValue: updateInputValue
+  }));
+});
+exports.SearchableSelectInput = SearchableSelectInput;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, import("../../../Input/Input").InputProps & import("../../../Input/InputStyle").PreffixSuffixWidthProps, never>;
+export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledSelectedValue = exports.StyledContainer = exports.InputContainer = exports.ClearSelectedContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints"));
+var _colors = require("../../../utilities/colors");
+var _fonts = require("../../../utilities/fonts");
+var _InputStyle = require("../../../Input/InputStyle");
+var _borderRadius = require("../../../utilities/borderRadius");
+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 StyledContainer = (0, _styledComponents["default"])(_InputStyle.StyledContainer).withConfig({
+  displayName: "SearchableSelectInputStyle__StyledContainer",
+  componentId: "sc-1oj168h-0"
+})(["position:relative;height:36px;width:", ";background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);box-sizing:border-box;display:grid;input{background:transparent;z-index:1;width:", ";}&:has(> div > input:focus) > .searchable-select{color:", ";}.searchable-select,input{padding-left:", "px;padding-right:", "px;}&[data-error='true'] .searchable-select{border:1px solid ", ";}&[data-error='true'] .searchable-select:focus{box-shadow:none;}&[data-disabled='true'] .searchable-select{border:1px solid ", ";background:", ";color:", ";}"], function (props) {
+  return props.width;
+}, _colors.Neutral.B100, function (props) {
+  return props.width;
+}, _colors.Neutral.B40, function (props) {
+  return props.prefixWidth;
+}, function (props) {
+  return props.suffixWidth;
+}, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85);
+exports.StyledContainer = StyledContainer;
+var StyledSelectedValue = _styledComponents["default"].div.withConfig({
+  displayName: "SearchableSelectInputStyle__StyledSelectedValue",
+  componentId: "sc-1oj168h-1"
+})(["border:1px solid ", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B68, _borderRadius.borderRadius4, _fonts.NotoSans, _colors.Neutral.B18, Breakpoints.large);
+exports.StyledSelectedValue = StyledSelectedValue;
+var InputContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SearchableSelectInputStyle__InputContainer",
+  componentId: "sc-1oj168h-2"
+})(["grid-column:1 / 1;grid-row:1 / 1;"]);
+exports.InputContainer = InputContainer;
+var ClearSelectedContainer = (0, _styledComponents["default"])(_InputStyle.StyledSuffixContainer).withConfig({
+  displayName: "SearchableSelectInputStyle__ClearSelectedContainer",
+  componentId: "sc-1oj168h-3"
+})(["z-index:2;"]);
+exports.ClearSelectedContainer = ClearSelectedContainer;

package/lib/@next/Select/selectStoryHelper/Searchable.js

@@ -22,23 +22,8 @@ var SearchableSelect = function SearchableSelect(_ref) {
   var _useState2 = (0, _react.useState)([]),
     selectedOptions = _useState2[0],
     setSelectedOptions = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    isSearchEmpty = _useState3[0],
-    setIsSearchEmpty = _useState3[1];
-  var _useState4 = (0, _react.useState)(data),
-    options = _useState4[0],
-    setOptions = _useState4[1];
   var handleInputChange = function handleInputChange(value) {
     setInputValue(value);
-    if (value === '') {
-      setOptions(data);
-      return;
-    }
-    var filterRegex = new RegExp(value, 'i');
-    var filterOptions = options.filter(function (option) {
-      return option.label.match(filterRegex);
-    });
-    setOptions(filterOptions);
   };
   var handleSelect = function handleSelect(_ref2) {
     var value = _ref2.value;
@@ -64,17 +49,9 @@ var SearchableSelect = function SearchableSelect(_ref) {
       textColor: _colors.Blue.S99
     }, option);
   });
-  (0, _react.useEffect)(function () {
-    if (options.length === 0) {
-      setIsSearchEmpty(true);
-    }
-    if (options.length > 0 && isSearchEmpty === true) {
-      setIsSearchEmpty(false);
-    }
-  }, [isSearchEmpty, options]);
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
     onSelect: handleSelect,
-    options: options,
+    options: data,
     selectedValues: selectedOptions,
     width: "600px",
     searchableProps: {

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Option } from '../../Menu';
+interface SearchableSingleSelectProps {
+    data?: Option[];
+}
+export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export {};

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SearchableSingle = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Select = require("../Select");
+var _excluded = ["data"];
+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 SearchableSingle = function SearchableSingle(_ref) {
+  var data = _ref.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(''),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    width: "600px",
+    searchable: true,
+    label: "Label"
+  }));
+};
+exports.SearchableSingle = SearchableSingle;

package/lib/@next/utilities/colors/orange.d.ts

@@ -1,5 +1,5 @@
 export declare const Brand = "#F06730";
-export declare const S42 = "#FAD491";
+export declare const S21 = "#FCE9C8";
 export declare const S64 = "#F7BD59";
 export declare const S86 = "#F5A623";
 export declare const S87 = "#F48620";

package/lib/@next/utilities/colors/orange.js

@@ -1,11 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.S87 = exports.S86 = exports.S64 = exports.S42 = exports.S100 = exports.Brand = void 0;
+exports.S87 = exports.S86 = exports.S64 = exports.S21 = exports.S100 = exports.Brand = void 0;
 var Brand = '#F06730';
 exports.Brand = Brand;
-var S42 = '#FAD491';
-exports.S42 = S42;
+var S21 = '#FCE9C8';
+exports.S21 = S21;
 var S64 = '#F7BD59';
 exports.S64 = S64;
 var S86 = '#F5A623';