glints-aries 4.0.239 → 4.0.240

package/README.md

@@ -28,11 +28,30 @@ import { GlintsContainer } from 'glints-aries';
 
 ### Development
 
+Before that, make sure you already have git, node (version >= 14), and yarn installed.
+
+1. Clone the repository
+
+```bash
+git clone https://github.com/glints-dev/glints-aries.git
+```
+
+2. Install the project dependencies (preferably use yarn here), then build the project
+
+```bash
+yarn
+yarn build
+```
+
+3. Start the application
+
 ```bash
 yarn storybook
 ```
 
-then open your browser on port 9001
+4. Open your browser on (port 6006)[http://localhost:6006].
+
+Note: For Windows user, please use [WSL2 Linux](https://learn.microsoft.com/en-us/windows/wsl/install) to execute all the commands above. Make sure that the repository is cloned on the linux folder, not on your C drive.
 
 ### How to test local changes in glints-aries in your project
 

package/es/@next/Input/InputStyle.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from './Input';
-interface PreffixSuffixWidthProps {
+export interface PreffixSuffixWidthProps {
     prefixWidth: number;
     suffixWidth: number;
 }
@@ -7,4 +7,3 @@ export declare const StyledContainer: import("styled-components").StyledComponen
 export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
-export {};

package/es/@next/Input/InputStyle.js

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { Neutral, Red } from '../utilities/colors';
 import { space12, space4, space8 } from '../utilities/spacing';
+import { NotoSans } from '../utilities/fonts';
+import { borderRadius4 } from '../utilities/borderRadius';
 export var StyledContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
@@ -21,4 +23,4 @@ export var StyledSuffixContainer = styled(StyledPrefixContainer).withConfig({
 export var StyledInput = styled.input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-3"
-})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:4px;padding:0 12px;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], Neutral.B100, Neutral.B68, Neutral.B18, Neutral.B40, Neutral.B100, Breakpoints.large);
+})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:", ";padding:0 12px;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], Neutral.B100, Neutral.B68, borderRadius4, NotoSans, Neutral.B18, Neutral.B40, Neutral.B100, Breakpoints.large);

package/es/@next/Menu/components/MenuOption.js

@@ -7,18 +7,17 @@ export var MenuOption = function MenuOption(_ref) {
     onClick = _ref.onClick,
     value = _ref.value,
     allowMultiple = _ref.allowMultiple;
-  var handleClick = function handleClick(value) {
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
     onClick({
-      value: value
+      value: event.currentTarget.dataset.value
     });
   };
   return /*#__PURE__*/React.createElement(ListContainer, null, /*#__PURE__*/React.createElement("li", {
     "aria-disabled": disabled,
     "data-active": isSelected,
     "data-multiple": allowMultiple,
-    value: value,
-    onClick: function onClick() {
-      return handleClick(value);
-    }
+    "data-value": value,
+    onClick: handleClick
   }, children));
 };

package/es/@next/Select/Select.d.ts

@@ -24,7 +24,9 @@ export interface SelectProps {
     options?: Option[];
     placeholder?: string;
     prefix?: React.ReactNode;
-    /** sets whether to be able to type in to search from the options*/
+    /** sets whether Select is searchable */
+    searchable?: boolean;
+    /** props used for searchable Select */
     searchableProps?: SearchableProps;
     /** true = Allow vertical scroll, default by 6 options. */
     scrollable?: boolean;
@@ -33,5 +35,5 @@ export interface SelectProps {
     /** sets a width for the Select component*/
     width: string;
 }
-export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
 export {};

package/es/@next/Select/Select.js

@@ -1,28 +1,33 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Popover } from '../Popover';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
 import { ActivatorTextInput, OptionList } from './components';
-import { ActivatorSelectContext, ActivatorTextInputContext } from './components/Activator/ActivatorContext';
 import { ActivatorSelect } from './components/Activator/ActivatorSelect';
 import { Label } from './components/Label/Label';
 import { ActivatorWrapper, HelpTextContainer } from './SelectStyle';
 export var Select = function Select(_ref) {
   var _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
-    disabled = _ref.disabled,
-    hasError = _ref.hasError,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     helpText = _ref.helpText,
     label = _ref.label,
     onClose = _ref.onClose,
     onRemoveTag = _ref.onRemoveTag,
     onSelect = _ref.onSelect,
-    options = _ref.options,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
     placeholder = _ref.placeholder,
     listHeight = _ref.listHeight,
     prefix = _ref.prefix,
+    _ref$searchable = _ref.searchable,
+    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
     searchableProps = _ref.searchableProps,
-    scrollable = _ref.scrollable,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
     sections = _ref.sections,
     selectedValues = _ref.selectedValues,
     width = _ref.width;
@@ -32,34 +37,38 @@ export var Select = function Select(_ref) {
   var _useState2 = useState(''),
     optionListHeight = _useState2[0],
     setOptionListHeight = _useState2[1];
-  var handleClose = useCallback(function () {
+  var _useState3 = useState(options),
+    menuOptions = _useState3[0],
+    setMenuOptions = _useState3[1];
+  var _useState4 = useState((searchableProps == null ? void 0 : searchableProps.inputValue) || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useState5 = useState({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: true
+    }),
+    searchableSelectState = _useState5[0],
+    setSearchableSelectState = _useState5[1];
+  var _updateSearchableSelectState = function updateSearchableSelectState(newState) {
+    setSearchableSelectState(newState);
+  };
+  var updateInputValue = function updateInputValue(newValue) {
+    setInputValue(newValue);
+  };
+  var updateMenuOptions = function updateMenuOptions(newState) {
+    setMenuOptions(newState);
+  };
+  var handleClose = function handleClose() {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();
-  }, [onClose]);
+  };
   var handleFocus = function handleFocus() {
     setPopoverActive(true);
   };
-  var handleBlur = function handleBlur() {
-    if (popoverActive) {
-      handleClose();
-    }
-  };
   var handleSelectClick = function handleSelectClick() {
     setPopoverActive(!popoverActive);
   };
-  var activatorSelectContextValue = {
-    allowMultiple: allowMultiple,
-    disabled: disabled,
-    hasError: hasError,
-    onSelectClick: handleSelectClick,
-    selectedValues: selectedValues
-  };
-  var activatorTextInputContextValue = {
-    disabled: disabled,
-    hasError: hasError,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  };
   useEffect(function () {
     if (listHeight) {
       setOptionListHeight(listHeight + 24 + "px");
@@ -71,28 +80,38 @@ export var Select = function Select(_ref) {
     }
   }, [listHeight, scrollable]);
   var activator = function activator() {
-    if (searchableProps) {
-      var inputValue = searchableProps.inputValue,
-        _onInputChange = searchableProps.onInputChange;
-      return /*#__PURE__*/React.createElement(ActivatorTextInputContext.Provider, {
-        value: activatorTextInputContextValue
-      }, /*#__PURE__*/React.createElement(ActivatorTextInput, {
-        value: inputValue,
-        onChange: _onInputChange,
+    if (searchable || searchableProps) {
+      return /*#__PURE__*/React.createElement(ActivatorTextInput, {
+        allowMultiple: allowMultiple,
+        disabled: disabled,
+        hasError: hasError,
+        onChange: searchableProps == null ? void 0 : searchableProps.onInputChange,
         placeholder: placeholder != null ? placeholder : 'Search',
-        prefix: prefix,
-        width: width
-      }));
+        width: width,
+        selectedValues: selectedValues,
+        onSelect: onSelect,
+        onFocus: handleFocus,
+        inputValue: inputValue,
+        updateInputValue: updateInputValue,
+        searchableSelectState: searchableSelectState,
+        updateSearchableSelectState: function updateSearchableSelectState(newState) {
+          return _updateSearchableSelectState(newState);
+        },
+        options: options,
+        updateMenuOptions: updateMenuOptions,
+        prefix: prefix
+      });
     }
-    return /*#__PURE__*/React.createElement(ActivatorSelectContext.Provider, {
-      value: activatorSelectContextValue
-    }, /*#__PURE__*/React.createElement(ActivatorSelect, {
+    return /*#__PURE__*/React.createElement(ActivatorSelect, {
+      allowMultiple: allowMultiple,
       disabled: disabled,
+      hasError: hasError,
       placeholder: "Placeholder",
       onRemoveTag: onRemoveTag,
+      onSelectClick: handleSelectClick,
       width: width,
-      values: selectedValues
-    }));
+      selectedValues: selectedValues
+    });
   };
   return /*#__PURE__*/React.createElement(Popover, {
     active: popoverActive,
@@ -107,14 +126,18 @@ export var Select = function Select(_ref) {
     autofocusTarget: "none",
     preventFocusOnClose: true,
     fullWidth: true
-  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+  }, !disabled && /*#__PURE__*/React.createElement(Popover.Pane, {
     height: optionListHeight
   }, /*#__PURE__*/React.createElement(OptionList, {
+    menuOptions: menuOptions,
     allowMultiple: allowMultiple,
     onSelect: onSelect,
-    options: options,
     sections: sections,
     selectedValues: selectedValues,
-    width: width
+    width: width,
+    onMenuClose: handleClose,
+    updateSearchableSelectState: function updateSearchableSelectState(newState) {
+      return _updateSearchableSelectState(newState);
+    }
   })));
 };

package/es/@next/Select/Select.stories.d.ts

@@ -6,6 +6,7 @@ export declare const NonSearchableMultipleSelect: any;
 export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
+export declare const SearchableSingleSelect: any;
 export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;

package/es/@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/es/@next/Select/components/Activator/ActivatorSelect.js

@@ -1,30 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["placeholder", "values", "onClick", "onRemoveTag", "width"];
+var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError"];
 import React, { useRef } from 'react';
 import { Icon } from '../../../Icon';
 import { Typography } from '../../../Typography';
 import { Blue, Neutral } from '../../../utilities/colors';
-import { useActivatorSelect } from './ActivatorContext';
 import { StyledSelect, StyledTag, TagsContainer } from './ActivatorStyle';
 export 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
   var activatorRef = 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 = 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/es/@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/es/@next/Select/components/Activator/ActivatorTextInput.js

@@ -1,32 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onChange", "prefix", "value", "width"];
-import React, { useRef } from 'react';
+var _excluded = ["allowMultiple", "disabled", "hasError", "onChange", "onFocus", "onSelect", "prefix", "selectedValues", "width", "inputValue", "updateInputValue", "options", "updateMenuOptions"];
+import React, { useEffect, useRef, useState } from 'react';
 import { Icon } from '../../../Icon';
-import { useActivatorTextInput } from './ActivatorContext';
+import { SearchableSelectInput } from '../SearchableSelectInput/SearchableSelectInput';
 import { StyledTextInput } from './ActivatorStyle';
 export 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.createElement(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 = _objectWithoutPropertiesLoose(_ref, _excluded);
   var activatorRef = useRef(null);
-  var activatorContext = useActivatorTextInput();
-  var disabled = activatorContext.disabled,
-    onFocus = activatorContext.onFocus,
-    hasError = activatorContext.hasError;
+  var _useState = 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.createElement(StyledTextInput, _extends({}, props, {
+  useEffect(function () {
+    setHasSelectedValues(selectedValues.filter(function (v) {
+      return v != '';
+    }).length > 0);
+  }, [selectedValues]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, allowMultiple ? /*#__PURE__*/React.createElement(StyledTextInput, _extends({}, props, {
     ref: activatorRef,
     prefix: prefix,
-    value: value,
     onChange: function onChange(value) {
       return handleChange({
         value: value
@@ -36,5 +66,19 @@ export var ActivatorTextInput = function ActivatorTextInput(_ref) {
     error: hasError,
     disabled: disabled,
     width: width
-  }));
+  })) : /*#__PURE__*/React.createElement(SearchableSelectInput, _extends({}, 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
+  })));
 };

package/es/@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/es/@next/Select/components/OptionList/OptionList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Menu } from '../../../Menu';
 import { Typography } from '../../../Typography';
 import { Neutral } from '../../../utilities/colors';
@@ -15,27 +15,40 @@ export var NoOptionList = function NoOptionList(_ref) {
 export 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 = useState(false),
+    hasMenuOptions = _useState[0],
+    setHasMenuOptions = _useState[1];
+  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.createElement(OptionListContainer, {
     width: width
-  }, hasOptions ? /*#__PURE__*/React.createElement(Menu, {
+  }, hasMenuOptions ? /*#__PURE__*/React.createElement(Menu, {
     allowMultiple: allowMultiple,
-    options: options,
+    options: menuOptions,
     onClick: onOptionSelect,
     sections: sections,
     selectedValues: selectedValues,

package/es/@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/es/@next/Select/components/SearchableSelectInput/ClearSelected.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Icon } from '../../../Icon';
+import { ClearSelectedContainer } from './SearchableSelectInputStyle';
+export 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.createElement(ClearSelectedContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close-circle-fill",
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: onClearIconClick
+  }));
+};

package/es/@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>>;