@bigbinary/neetoui-rn 0.0.118 → 0.0.121

package/lib/components/MultiSelect.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MultiSelect=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","multiSelectedItemContainerStyle","multiSelectedItemTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js";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 MultiSelectItem=function MultiSelectItem(_ref){var label=_ref.label,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemTextStyle=_ref.multiSelectedItemTextStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.base",bg:"background.grey100",borderRadius:2,flexDirection:"row",alignItems:"center",justifyContent:"space-between",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2,maxWidth:"90%"},multiSelectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:7}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,selectedValue=_ref3.selectedValue,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemTextStyle=_ref3.multiSelectedItemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*6;var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease})};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease}};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease})};}}";_f.__workletHash=10836038512691;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (172:42)";_f.__optimalization=2;return _f;}());var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");setShowDropdown(!showDropdown);toggleAnimation();};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return valueExtractor(selectedItem)!==valueExtractor(item);});onSelect(newValue);deletedValue(item);};var handleSelection=function handleSelection(item){onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));selectedValue(item);};return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:208,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",flexDirection:"row",justifyContent:"space-between",alignItems:"center",p:multipleOptionsSelected?1:2,pr:2,maxHeight:120},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:234,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:239,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:240,columnNumber:15}},value==null?void 0:value.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(MultiSelectItem,{key:index,label:optionLabel,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemTextStyle:multiSelectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:264,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:269,columnNumber:13}}))),_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:277,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:278,columnNumber:9}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:11}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,columnNumber:15}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:288,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:295,columnNumber:13}},options.filter(function(item,index){var optionValue=valueExtractor(item,index);var isItemAlreadySelected=Boolean(value==null?void 0:value.find(function(selectedItem){return valueExtractor(selectedItem)===optionValue;}));return!isItemAlreadySelected;}).filter(function(item,index){var optionLabel=labelExtractor(item,index);if(searchQuery.length===0)return true;return formatStr(optionLabel).includes(formatStr(searchQuery));}).map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,onPress:function onPress(){return handleSelection(item);},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:317,columnNumber:21}});}))))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,selectedValue:_propTypes.default.func,deletedValue:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object};MultiSelect.defaultProps={label:null,placeholder:"Select Option",labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},selectedValue:function selectedValue(){},deletedValue:function deletedValue(){},isLoading:false,isSearchable:false};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MultiSelect=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","showCreateOption","showCreateOptionLoader","createOptionLabel","onPressCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemLabelStyle","multiSelectedItemContainerStyle","multiSelectedItemLabelStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsLabelStyle","createSearchedOptionContainerStyle","createSearchedOptionLabelStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js";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 MultiSelectItem=function MultiSelectItem(_ref){var label=_ref.label,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref.multiSelectedItemLabelStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.base",bg:"background.grey100",borderRadius:2,flexDirection:"row",alignItems:"center",justifyContent:"space-between",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2,maxWidth:"90%"},multiSelectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:7}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,emptyOptionsPlaceholder=_ref3.emptyOptionsPlaceholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,selectedValue=_ref3.selectedValue,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,showCreateOption=_ref3.showCreateOption,showCreateOptionLoader=_ref3.showCreateOptionLoader,createOptionLabel=_ref3.createOptionLabel,onPressCreateOption=_ref3.onPressCreateOption,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,itemLabelStyle=_ref3.itemLabelStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref3.multiSelectedItemLabelStyle,searchInputContainerStyle=_ref3.searchInputContainerStyle,searchInputStyle=_ref3.searchInputStyle,emptyOptionsContainerStyle=_ref3.emptyOptionsContainerStyle,emptyOptionsLabelStyle=_ref3.emptyOptionsLabelStyle,createSearchedOptionContainerStyle=_ref3.createSearchedOptionContainerStyle,createSearchedOptionLabelStyle=_ref3.createSearchedOptionLabelStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var filteredOptions=options.filter(function(item,index){var optionValue=valueExtractor(item,index);var isItemAlreadySelected=Boolean(value==null?void 0:value.find(function(selectedItem){return valueExtractor(selectedItem)===optionValue;}));return!isItemAlreadySelected;}).filter(function(item,index){var optionLabel=labelExtractor(item,index);if(searchQuery.length===0)return true;return formatStr(optionLabel).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=40;var emptySearchedOptionsHeight=40;var searchInputHeight=35;var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (219:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (211:42)";return _f;}(),[]);var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){dropdownAnimatedHeight.value=0;}};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return valueExtractor(selectedItem)!==valueExtractor(item);});onSelect(newValue);deletedValue(item);};var handleSelection=function handleSelection(item){onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));selectedValue(item);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:261,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",flexDirection:"row",justifyContent:"space-between",alignItems:"center",p:multipleOptionsSelected?1:2,pr:2,maxHeight:120},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:274,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:292,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:293,columnNumber:15}},value==null?void 0:value.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(MultiSelectItem,{key:index,label:optionLabel,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemLabelStyle:multiSelectedItemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:302,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:317,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:322,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:331,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:332,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:341,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:342,columnNumber:19}}))),isOptionsEmpty&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:356,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},emptyOptionsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:362,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),isSearchedOptionsEmpty&&showCreateOption&&_react.default.createElement(_.Touchable,(0,_extends2.default)({height:emptySearchedOptionsHeight,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchQuery);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:374,columnNumber:17}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:382,columnNumber:21}}):_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:387,columnNumber:21}}),createOptionLabel||"Create "+searchQuery+" option")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:399,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:400,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:402,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,onPress:function onPress(){return handleSelection(item);},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemLabelStyle:itemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:406,columnNumber:21}});}))))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,selectedValue:_propTypes.default.func,deletedValue:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,createSearchedOptionLabelStyle:_propTypes.default.object};MultiSelect.defaultProps={label:null,placeholder:"Select Option",emptyOptionsPlaceholder:null,labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},selectedValue:function selectedValue(){},deletedValue:function deletedValue(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){}};

package/lib/components/Select.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","selectedItemContainerStyle","selectedItemTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js";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 DropdownItem=function DropdownItem(_ref){var label=_ref.label,isSelectedItem=_ref.isSelectedItem,defaultDropdownItemHeight=_ref.defaultDropdownItemHeight,onPress=_ref.onPress,itemContainerStyle=_ref.itemContainerStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,itemTextStyle=_ref.itemTextStyle,selectedItemTextStyle=_ref.selectedItemTextStyle;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:isSelectedItem?"background.base":"background.white",height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:isSelectedItem?"font.white":"font.grey"},itemTextStyle,isSelectedItem&&selectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:7}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string.isRequired,isSelectedItem:_propTypes.default.bool,defaultDropdownItemHeight:_propTypes.default.number,onPress:_propTypes.default.func,itemContainerStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object};var Select=function Select(_ref2){var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,labelExtractor=_ref2.labelExtractor,valueExtractor=_ref2.valueExtractor,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,inputContainerStyle=_ref2.inputContainerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemTextStyle=_ref2.selectedItemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*6;var selectedOptionLabel=labelExtractor(value||{});var selectedOptionValue=valueExtractor(value||{});var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease})};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease}};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease})};}}";_f.__workletHash=10836038512691;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (139:42)";_f.__optimalization=2;return _f;}());var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");setShowDropdown(!showDropdown);toggleAnimation();};var handleItemSelection=function handleItemSelection(item,index){setShowDropdown(false);toggleAnimation();onSelect(item,index);};return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:181,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:13}}))),_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:208,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:9}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:11}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:15}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:219,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:226,columnNumber:13}},options.filter(function(item,index){var label=labelExtractor(item,index);if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(label).includes(formatStr(searchQuery));}).map(function(item,index){var optionLabel=labelExtractor(item,index);var optionValue=valueExtractor(item,index);var isSelectedItem=selectedOptionValue&&selectedOptionValue===optionValue;return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,isSelectedItem:isSelectedItem,defaultDropdownItemHeight:defaultDropdownItemHeight,onPress:function onPress(){return handleItemSelection(item,index);},itemContainerStyle:itemContainerStyle,selectedItemContainerStyle:selectedItemContainerStyle,itemTextStyle:itemTextStyle,selectedItemTextStyle:selectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:239,columnNumber:21}});}))))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.object,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object};Select.defaultProps={label:null,placeholder:"Select Option",labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},isLoading:false,isSearchable:false};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","showCreateOption","showCreateOptionLoader","createOptionLabel","onPressCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemLabelStyle","selectedItemContainerStyle","selectedItemLabelStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsLabelStyle","createSearchedOptionContainerStyle","createSearchedOptionLabelStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js";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 DropdownItem=function DropdownItem(_ref){var label=_ref.label,isSelectedItem=_ref.isSelectedItem,defaultDropdownItemHeight=_ref.defaultDropdownItemHeight,onPress=_ref.onPress,itemContainerStyle=_ref.itemContainerStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,itemLabelStyle=_ref.itemLabelStyle,selectedItemLabelStyle=_ref.selectedItemLabelStyle;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:isSelectedItem?"background.base":"background.white",height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:isSelectedItem?"font.white":"font.grey"},itemLabelStyle,isSelectedItem&&selectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:7}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string.isRequired,isSelectedItem:_propTypes.default.bool,defaultDropdownItemHeight:_propTypes.default.number,onPress:_propTypes.default.func,itemContainerStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,selectedItemLabelStyle:_propTypes.default.object};var Select=function Select(_ref2){var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,emptyOptionsPlaceholder=_ref2.emptyOptionsPlaceholder,labelExtractor=_ref2.labelExtractor,valueExtractor=_ref2.valueExtractor,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,showCreateOption=_ref2.showCreateOption,showCreateOptionLoader=_ref2.showCreateOptionLoader,createOptionLabel=_ref2.createOptionLabel,onPressCreateOption=_ref2.onPressCreateOption,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,inputContainerStyle=_ref2.inputContainerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemLabelStyle=_ref2.selectedItemLabelStyle,searchInputContainerStyle=_ref2.searchInputContainerStyle,searchInputStyle=_ref2.searchInputStyle,emptyOptionsContainerStyle=_ref2.emptyOptionsContainerStyle,emptyOptionsLabelStyle=_ref2.emptyOptionsLabelStyle,createSearchedOptionContainerStyle=_ref2.createSearchedOptionContainerStyle,createSearchedOptionLabelStyle=_ref2.createSearchedOptionLabelStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var filteredOptions=options.filter(function(item,index){var label=labelExtractor(item,index);if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(label).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=40;var emptySearchedOptionsHeight=40;var searchInputHeight=35;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var selectedOptionLabel=labelExtractor(value||{});var selectedOptionValue=valueExtractor(value||{});var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (176:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (168:42)";return _f;}(),[]);var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){toggleAnimation();}};var handleItemSelection=function handleItemSelection(item,index){toggleAnimation();onSelect(item,index);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:214,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:215,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:228,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:238,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:242,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:256,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:19}}))),isOptionsEmpty&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},emptyOptionsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),isSearchedOptionsEmpty&&showCreateOption&&_react.default.createElement(_.Touchable,(0,_extends2.default)({height:emptySearchedOptionsHeight,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchQuery);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:298,columnNumber:17}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:21}}):_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:311,columnNumber:21}}),createOptionLabel||"Create "+searchQuery+" option")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:323,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:324,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:326,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);var optionValue=valueExtractor(item,index);var isSelectedItem=selectedOptionValue&&selectedOptionValue===optionValue;return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,isSelectedItem:isSelectedItem,defaultDropdownItemHeight:defaultDropdownItemHeight,onPress:function onPress(){return handleItemSelection(item,index);},itemContainerStyle:itemContainerStyle,selectedItemContainerStyle:selectedItemContainerStyle,itemLabelStyle:itemLabelStyle,selectedItemLabelStyle:selectedItemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:21}});}))))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.object,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,selectedItemLabelStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,createSearchedOptionLabelStyle:_propTypes.default.object};Select.defaultProps={label:null,placeholder:"Select Option",emptyOptionsPlaceholder:null,labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.118",
+  "version": "0.0.121",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/MultiSelect.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import Icon from "react-native-remix-icon";
 import PropTypes from "prop-types";
 import Animated, {
@@ -6,6 +6,7 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
   Easing,
+  runOnJS,
 } from "react-native-reanimated";
 import {
   ActivityIndicator,
@@ -21,7 +22,7 @@ const MultiSelectItem = ({
   label,
   onUnselect,
   multiSelectedItemContainerStyle,
-  multiSelectedItemTextStyle,
+  multiSelectedItemLabelStyle,
 }) => (
   <Container
     borderWidth={1}
@@ -40,7 +41,7 @@ const MultiSelectItem = ({
       fontSize="s"
       mr={2}
       maxWidth="90%"
-      {...multiSelectedItemTextStyle}
+      {...multiSelectedItemLabelStyle}
     >
       {label}
     </Typography>
@@ -54,7 +55,7 @@ MultiSelectItem.propTypes = {
   label: PropTypes.string,
   onUnselect: PropTypes.func,
   multiSelectedItemContainerStyle: PropTypes.object,
-  multiSelectedItemTextStyle: PropTypes.object,
+  multiSelectedItemLabelStyle: PropTypes.object,
 };
 
 const DropdownItem = ({
@@ -62,7 +63,7 @@ const DropdownItem = ({
   onPress,
   defaultDropdownItemHeight,
   itemContainerStyle,
-  itemTextStyle,
+  itemLabelStyle,
 }) => {
   return (
     <Touchable bg="background.white" onPress={onPress}>
@@ -75,7 +76,7 @@ const DropdownItem = ({
           fontFamily="inter400"
           fontSize="s"
           color="font.grey"
-          {...itemTextStyle}
+          {...itemLabelStyle}
         >
           {label}
         </Typography>
@@ -89,7 +90,7 @@ DropdownItem.propTypes = {
   onPress: PropTypes.func,
   defaultDropdownItemHeight: PropTypes.number,
   itemContainerStyle: PropTypes.object,
-  itemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
 };
 
 /**
@@ -139,6 +140,7 @@ export const MultiSelect = ({
   label,
   value,
   placeholder,
+  emptyOptionsPlaceholder,
   labelExtractor,
   valueExtractor,
   onSelect,
@@ -146,14 +148,24 @@ export const MultiSelect = ({
   deletedValue,
   isLoading,
   isSearchable,
+  showCreateOption,
+  showCreateOptionLoader,
+  createOptionLabel,
+  onPressCreateOption,
   labelStyle,
   containerStyle,
   inputContainerStyle,
   dropdownContainerStyle,
   itemContainerStyle,
-  itemTextStyle,
+  itemLabelStyle,
   multiSelectedItemContainerStyle,
-  multiSelectedItemTextStyle,
+  multiSelectedItemLabelStyle,
+  searchInputContainerStyle,
+  searchInputStyle,
+  emptyOptionsContainerStyle,
+  emptyOptionsLabelStyle,
+  createSearchedOptionContainerStyle,
+  createSearchedOptionLabelStyle,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -161,33 +173,67 @@ export const MultiSelect = ({
   const [searchQuery, setSearchQuery] = useState("");
   const dropdownAnimatedHeight = useSharedValue(0);
 
+  const formatStr = str => str?.toLowerCase()?.trim();
+  const filteredOptions = options
+    .filter((item, index) => {
+      const optionValue = valueExtractor(item, index);
+      const isItemAlreadySelected = Boolean(
+        value?.find(
+          selectedItem => valueExtractor(selectedItem) === optionValue
+        )
+      );
+      return !isItemAlreadySelected;
+    })
+    .filter((item, index) => {
+      const optionLabel = labelExtractor(item, index);
+      if (searchQuery.length === 0) return true;
+      return formatStr(optionLabel).includes(formatStr(searchQuery));
+    });
+
+  const isOptionsEmpty = !options || options?.length === 0;
+  const isSearchedOptionsEmpty =
+    searchQuery.length > 0 && filteredOptions.length === 0;
+  const emptyOptionsPlaceholderHeight = 40;
+  const emptySearchedOptionsHeight = 40;
+  const searchInputHeight = 35;
   const multipleOptionsSelected = value?.length > 0;
   const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
   const dropdownHeight =
     dropdownContainerStyle?.height ||
     dropdownContainerStyle?.maxHeight ||
-    defaultDropdownItemHeight * 6;
-  const formatStr = str => str?.toLowerCase()?.trim();
+    defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
+      (isSearchable ? searchInputHeight + 10 : 0) +
+      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0) +
+      (isSearchedOptionsEmpty && showCreateOption
+        ? emptySearchedOptionsHeight
+        : 0);
 
   const animatedStyles = useAnimatedStyle(() => {
     return {
-      height: withTiming(dropdownAnimatedHeight.value, {
-        duration: 100,
-        easing: Easing.ease,
-      }),
+      height: withTiming(
+        dropdownAnimatedHeight.value,
+        {
+          duration: 100,
+          easing: Easing.ease,
+        },
+        () => {
+          if (dropdownAnimatedHeight.value === 0) {
+            runOnJS(setShowDropdown)(false);
+          }
+        }
+      ),
     };
-  });
-
-  const toggleAnimation = () => {
-    dropdownAnimatedHeight.value =
-      dropdownAnimatedHeight.value === 0 ? dropdownHeight : 0;
-  };
+  }, []);
 
   const handleOpenDropdown = () => {
     Keyboard.dismiss();
     setSearchQuery("");
-    setShowDropdown(!showDropdown);
-    toggleAnimation();
+    if (!showDropdown) {
+      setShowDropdown(true);
+    }
+    if (showDropdown) {
+      dropdownAnimatedHeight.value = 0;
+    }
   };
 
   const handleUnselection = item => {
@@ -203,6 +249,13 @@ export const MultiSelect = ({
     selectedValue(item);
   };
 
+  useEffect(() => {
+    if (showDropdown) {
+      dropdownAnimatedHeight.value = dropdownHeight;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showDropdown, dropdownHeight]);
+
   return (
     <Container {...containerStyle}>
       <Typography
@@ -253,7 +306,7 @@ export const MultiSelect = ({
                       multiSelectedItemContainerStyle={
                         multiSelectedItemContainerStyle
                       }
-                      multiSelectedItemTextStyle={multiSelectedItemTextStyle}
+                      multiSelectedItemLabelStyle={multiSelectedItemLabelStyle}
                     />
                   );
                 })}
@@ -274,44 +327,80 @@ export const MultiSelect = ({
           )}
         </Container>
       </TouchableWithoutFeedback>
-      <Container overflow="hidden">
-        <Animated.View style={animatedStyles}>
-          <Card
-            bg="background.white"
-            borderWidth={1}
-            borderColor="border.grey400"
-            maxHeight={dropdownHeight}
-            {...dropdownContainerStyle}
-          >
-            {isSearchable && (
-              <Container p={1}>
-                <Input
-                  placeholder="Search"
-                  onChangeText={setSearchQuery}
-                  fontSize="s"
-                />
+      {showDropdown && (
+        <Container overflow="hidden">
+          <Animated.View style={animatedStyles}>
+            <Card
+              bg="background.white"
+              borderWidth={1}
+              borderColor="border.grey400"
+              maxHeight={dropdownHeight}
+              {...dropdownContainerStyle}
+            >
+              {isSearchable && (
+                <Container p={1} {...searchInputContainerStyle}>
+                  <Input
+                    placeholder="Search"
+                    onChangeText={setSearchQuery}
+                    fontSize="s"
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    containerStyles={{
+                      height: searchInputHeight,
+                      justifyContent: "center",
+                    }}
+                    {...searchInputStyle}
+                  />
+                </Container>
+              )}
+              {isOptionsEmpty && (
+                <Container
+                  height={emptyOptionsPlaceholderHeight}
+                  justifyContent="center"
+                  alignItems="center"
+                  {...emptyOptionsContainerStyle}
+                >
+                  <Typography
+                    fontFamily="inter400"
+                    fontSize="s"
+                    color="font.grey"
+                    {...emptyOptionsLabelStyle}
+                  >
+                    {emptyOptionsPlaceholder || "No Options"}
+                  </Typography>
+                </Container>
+              )}
+
+              {isSearchedOptionsEmpty && showCreateOption && (
+                <Touchable
+                  height={emptySearchedOptionsHeight}
+                  justifyContent="center"
+                  alignItems="center"
+                  onPress={() => onPressCreateOption(searchQuery)}
+                  {...createSearchedOptionContainerStyle}
+                >
+                  {showCreateOptionLoader ? (
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.background.base}
+                    />
+                  ) : (
+                    <Typography
+                      fontFamily="inter400"
+                      fontSize="s"
+                      color="font.grey"
+                      {...createSearchedOptionLabelStyle}
+                    >
+                      {createOptionLabel || `Create ${searchQuery} option`}
+                    </Typography>
+                  )}
+                </Touchable>
+              )}
+              {/* Animation not working without this hidden input */}
+              <Container height={0}>
+                <Input />
               </Container>
-            )}
-            <ScrollView>
-              {options
-                .filter((item, index) => {
-                  const optionValue = valueExtractor(item, index);
-                  const isItemAlreadySelected = Boolean(
-                    value?.find(
-                      selectedItem =>
-                        valueExtractor(selectedItem) === optionValue
-                    )
-                  );
-                  return !isItemAlreadySelected;
-                })
-                .filter((item, index) => {
-                  const optionLabel = labelExtractor(item, index);
-                  if (searchQuery.length === 0) return true;
-                  return formatStr(optionLabel).includes(
-                    formatStr(searchQuery)
-                  );
-                })
-                .map((item, index) => {
+              <ScrollView>
+                {filteredOptions.map((item, index) => {
                   const optionLabel = labelExtractor(item, index);
                   return (
                     <DropdownItem
@@ -320,14 +409,15 @@ export const MultiSelect = ({
                       onPress={() => handleSelection(item)}
                       itemContainerStyle={itemContainerStyle}
                       defaultDropdownItemHeight={defaultDropdownItemHeight}
-                      itemTextStyle={itemTextStyle}
+                      itemLabelStyle={itemLabelStyle}
                     />
                   );
                 })}
-            </ScrollView>
-          </Card>
-        </Animated.View>
-      </Container>
+              </ScrollView>
+            </Card>
+          </Animated.View>
+        </Container>
+      )}
     </Container>
   );
 };
@@ -350,6 +440,10 @@ MultiSelect.propTypes = {
    * The text to be displayed if no option is selected.
    */
   placeholder: PropTypes.string,
+  /**
+   * The text to be displayed if no options are provided.
+   */
+  emptyOptionsPlaceholder: PropTypes.string,
   /**
    * Use custom key as label.
    */
@@ -382,6 +476,22 @@ MultiSelect.propTypes = {
    * Toggle Search bar within the options dropdown to search through the options.
    */
   isSearchable: PropTypes.bool,
+  /**
+   * Show option to create the searched label if not present in the options list
+   */
+  showCreateOption: PropTypes.bool,
+  /**
+   * Show loader while creating a searched option not present in the options list
+   */
+  showCreateOptionLoader: PropTypes.bool,
+  /**
+   * Custom label for creating searched option not present in the options list
+   */
+  createOptionLabel: PropTypes.string,
+  /**
+   * Callback when create searched option is pressed
+   */
+  onPressCreateOption: PropTypes.func,
   /**
    * To customise floating label styles.
    */
@@ -405,7 +515,7 @@ MultiSelect.propTypes = {
   /**
    * To customise dropdown item text styles.
    */
-  itemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
   /**
    * To customise item container styles for multi selected items.
    */
@@ -413,12 +523,37 @@ MultiSelect.propTypes = {
   /**
    * To customise item text styles for multi selected item.
    */
-  multiSelectedItemTextStyle: PropTypes.object,
+  multiSelectedItemLabelStyle: PropTypes.object,
+  /**
+   * To customise search input containerr style.
+   */
+  searchInputContainerStyle: PropTypes.object,
+  /**
+   * To customise search input style.
+   */
+  searchInputStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder container style.
+   */
+  emptyOptionsContainerStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder text style.
+   */
+  emptyOptionsLabelStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder container style.
+   */
+  createSearchedOptionContainerStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder text style.
+   */
+  createSearchedOptionLabelStyle: PropTypes.object,
 };
 
 MultiSelect.defaultProps = {
   label: null,
   placeholder: "Select Option",
+  emptyOptionsPlaceholder: null,
   labelExtractor: option => option?.label,
   valueExtractor: option => option?.value,
   value: null,
@@ -427,4 +562,8 @@ MultiSelect.defaultProps = {
   deletedValue: () => {},
   isLoading: false,
   isSearchable: false,
+  showCreateOption: false,
+  showCreateOptionLoader: false,
+  createOptionLabel: null,
+  onPressCreateOption: () => {},
 };

package/src/components/Select.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import Icon from "react-native-remix-icon";
 import PropTypes from "prop-types";
 import Animated, {
@@ -6,6 +6,7 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
   Easing,
+  runOnJS,
 } from "react-native-reanimated";
 import {
   ActivityIndicator,
@@ -15,7 +16,7 @@ import {
 import { ThemeContext } from "styled-components/native";
 import { ScrollView } from "react-native-gesture-handler";
 
-import { Card, Container, Input, Typography } from "@components";
+import { Card, Container, Input, Touchable, Typography } from "@components";
 
 const DropdownItem = ({
   label,
@@ -24,8 +25,8 @@ const DropdownItem = ({
   onPress,
   itemContainerStyle,
   selectedItemContainerStyle,
-  itemTextStyle,
-  selectedItemTextStyle,
+  itemLabelStyle,
+  selectedItemLabelStyle,
 }) => (
   <TouchableWithoutFeedback onPress={onPress}>
     <Container
@@ -39,8 +40,8 @@ const DropdownItem = ({
         fontFamily="inter400"
         fontSize="s"
         color={isSelectedItem ? "font.white" : "font.grey"}
-        {...itemTextStyle}
-        {...(isSelectedItem && selectedItemTextStyle)}
+        {...itemLabelStyle}
+        {...(isSelectedItem && selectedItemLabelStyle)}
       >
         {label}
       </Typography>
@@ -55,8 +56,8 @@ DropdownItem.propTypes = {
   onPress: PropTypes.func,
   itemContainerStyle: PropTypes.object,
   selectedItemContainerStyle: PropTypes.object,
-  itemTextStyle: PropTypes.object,
-  selectedItemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
+  selectedItemLabelStyle: PropTypes.object,
 };
 
 /**
@@ -107,19 +108,30 @@ export const Select = ({
   label,
   value,
   placeholder,
+  emptyOptionsPlaceholder,
   labelExtractor,
   valueExtractor,
   onSelect,
   isLoading,
   isSearchable,
+  showCreateOption,
+  showCreateOptionLoader,
+  createOptionLabel,
+  onPressCreateOption,
   labelStyle,
   containerStyle,
   inputContainerStyle,
   dropdownContainerStyle,
   itemContainerStyle,
-  itemTextStyle,
+  itemLabelStyle,
   selectedItemContainerStyle,
-  selectedItemTextStyle,
+  selectedItemLabelStyle,
+  searchInputContainerStyle,
+  searchInputStyle,
+  emptyOptionsContainerStyle,
+  emptyOptionsLabelStyle,
+  createSearchedOptionContainerStyle,
+  createSearchedOptionLabelStyle,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -127,23 +139,48 @@ export const Select = ({
   const [searchQuery, setSearchQuery] = useState("");
   const dropdownAnimatedHeight = useSharedValue(0);
 
+  const formatStr = str => str?.toLowerCase()?.trim();
+  const filteredOptions = options.filter((item, index) => {
+    const label = labelExtractor(item, index);
+    if (searchQuery?.length === 0) return true;
+    return formatStr(label).includes(formatStr(searchQuery));
+  });
+
+  const isOptionsEmpty = !options || options?.length === 0;
+  const isSearchedOptionsEmpty =
+    searchQuery.length > 0 && filteredOptions.length === 0;
+  const emptyOptionsPlaceholderHeight = 40;
+  const emptySearchedOptionsHeight = 40;
+  const searchInputHeight = 35;
   const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
   const dropdownHeight =
     dropdownContainerStyle?.height ||
     dropdownContainerStyle?.maxHeight ||
-    defaultDropdownItemHeight * 6;
+    defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
+      (isSearchable ? searchInputHeight + 10 : 0) +
+      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0) +
+      (isSearchedOptionsEmpty && showCreateOption
+        ? emptySearchedOptionsHeight
+        : 0);
   const selectedOptionLabel = labelExtractor(value || {});
   const selectedOptionValue = valueExtractor(value || {});
-  const formatStr = str => str?.toLowerCase()?.trim();
 
   const animatedStyles = useAnimatedStyle(() => {
     return {
-      height: withTiming(dropdownAnimatedHeight.value, {
-        duration: 100,
-        easing: Easing.ease,
-      }),
+      height: withTiming(
+        dropdownAnimatedHeight.value,
+        {
+          duration: 100,
+          easing: Easing.ease,
+        },
+        () => {
+          if (dropdownAnimatedHeight.value === 0) {
+            runOnJS(setShowDropdown)(false);
+          }
+        }
+      ),
     };
-  });
+  }, []);
 
   const toggleAnimation = () => {
     dropdownAnimatedHeight.value =
@@ -153,16 +190,26 @@ export const Select = ({
   const handleOpenDropdown = () => {
     Keyboard.dismiss();
     setSearchQuery("");
-    setShowDropdown(!showDropdown);
-    toggleAnimation();
+    if (!showDropdown) {
+      setShowDropdown(true);
+    }
+    if (showDropdown) {
+      toggleAnimation();
+    }
   };
 
   const handleItemSelection = (item, index) => {
-    setShowDropdown(false);
     toggleAnimation();
     onSelect(item, index);
   };
 
+  useEffect(() => {
+    if (showDropdown) {
+      dropdownAnimatedHeight.value = dropdownHeight;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showDropdown, dropdownHeight]);
+
   return (
     <Container {...containerStyle}>
       <Typography
@@ -205,32 +252,79 @@ export const Select = ({
           )}
         </Container>
       </TouchableWithoutFeedback>
-      <Container overflow="hidden">
-        <Animated.View style={animatedStyles}>
-          <Card
-            bg="background.white"
-            borderWidth={1}
-            borderColor="border.grey400"
-            maxHeight={dropdownHeight}
-            {...dropdownContainerStyle}
-          >
-            {isSearchable && (
-              <Container p={1}>
-                <Input
-                  placeholder="Search"
-                  onChangeText={setSearchQuery}
-                  fontSize="s"
-                />
+      {showDropdown && (
+        <Container overflow="hidden">
+          <Animated.View style={animatedStyles}>
+            <Card
+              bg="background.white"
+              borderWidth={1}
+              borderColor="border.grey400"
+              maxHeight={dropdownHeight}
+              {...dropdownContainerStyle}
+            >
+              {isSearchable && (
+                <Container p={1} {...searchInputContainerStyle}>
+                  <Input
+                    placeholder="Search"
+                    onChangeText={setSearchQuery}
+                    fontSize="s"
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    containerStyles={{
+                      height: searchInputHeight,
+                      justifyContent: "center",
+                    }}
+                    {...searchInputStyle}
+                  />
+                </Container>
+              )}
+              {isOptionsEmpty && (
+                <Container
+                  height={emptyOptionsPlaceholderHeight}
+                  justifyContent="center"
+                  alignItems="center"
+                  {...emptyOptionsContainerStyle}
+                >
+                  <Typography
+                    fontFamily="inter400"
+                    fontSize="s"
+                    color="font.grey"
+                    {...emptyOptionsLabelStyle}
+                  >
+                    {emptyOptionsPlaceholder || "No Options"}
+                  </Typography>
+                </Container>
+              )}
+              {isSearchedOptionsEmpty && showCreateOption && (
+                <Touchable
+                  height={emptySearchedOptionsHeight}
+                  justifyContent="center"
+                  alignItems="center"
+                  onPress={() => onPressCreateOption(searchQuery)}
+                  {...createSearchedOptionContainerStyle}
+                >
+                  {showCreateOptionLoader ? (
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.background.base}
+                    />
+                  ) : (
+                    <Typography
+                      fontFamily="inter400"
+                      fontSize="s"
+                      color="font.grey"
+                      {...createSearchedOptionLabelStyle}
+                    >
+                      {createOptionLabel || `Create ${searchQuery} option`}
+                    </Typography>
+                  )}
+                </Touchable>
+              )}
+              {/* Animation not working without this hidden input */}
+              <Container height={0}>
+                <Input />
               </Container>
-            )}
-            <ScrollView>
-              {options
-                .filter((item, index) => {
-                  const label = labelExtractor(item, index);
-                  if (searchQuery?.length === 0) return true;
-                  return formatStr(label).includes(formatStr(searchQuery));
-                })
-                .map((item, index) => {
+              <ScrollView>
+                {filteredOptions.map((item, index) => {
                   const optionLabel = labelExtractor(item, index);
                   const optionValue = valueExtractor(item, index);
                   const isSelectedItem =
@@ -244,15 +338,16 @@ export const Select = ({
                       onPress={() => handleItemSelection(item, index)}
                       itemContainerStyle={itemContainerStyle}
                       selectedItemContainerStyle={selectedItemContainerStyle}
-                      itemTextStyle={itemTextStyle}
-                      selectedItemTextStyle={selectedItemTextStyle}
+                      itemLabelStyle={itemLabelStyle}
+                      selectedItemLabelStyle={selectedItemLabelStyle}
                     />
                   );
                 })}
-            </ScrollView>
-          </Card>
-        </Animated.View>
-      </Container>
+              </ScrollView>
+            </Card>
+          </Animated.View>
+        </Container>
+      )}
     </Container>
   );
 };
@@ -275,6 +370,10 @@ Select.propTypes = {
    * The text to be displayed if no option is selected.
    */
   placeholder: PropTypes.string,
+  /**
+   * The text to be displayed if no options are provided.
+   */
+  emptyOptionsPlaceholder: PropTypes.string,
   /**
    * Use custom key as label.
    */
@@ -299,6 +398,22 @@ Select.propTypes = {
    * Toggle Search bar within the options dropdown to search through the options.
    */
   isSearchable: PropTypes.bool,
+  /**
+   * Show option to create the searched label if not present in the options list
+   */
+  showCreateOption: PropTypes.bool,
+  /**
+   * Show loader while creating a searched option not present in the options list
+   */
+  showCreateOptionLoader: PropTypes.bool,
+  /**
+   * Custom label for creating searched option not present in the options list
+   */
+  createOptionLabel: PropTypes.string,
+  /**
+   * Callback when create searched option is pressed
+   */
+  onPressCreateOption: PropTypes.func,
   /**
    * To customise floating label styles.
    */
@@ -322,7 +437,7 @@ Select.propTypes = {
   /**
    * To customise dropdown item text styles.
    */
-  itemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
   /**
    * To customise dropdown item container styles for selected item.
    */
@@ -330,16 +445,45 @@ Select.propTypes = {
   /**
    * To customise dropdown item text styles for selected item.
    */
-  selectedItemTextStyle: PropTypes.object,
+  selectedItemLabelStyle: PropTypes.object,
+  /**
+   * To customise search input containerr style.
+   */
+  searchInputContainerStyle: PropTypes.object,
+  /**
+   * To customise search input style.
+   */
+  searchInputStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder container style.
+   */
+  emptyOptionsContainerStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder text style.
+   */
+  emptyOptionsLabelStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder container style.
+   */
+  createSearchedOptionContainerStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder text style.
+   */
+  createSearchedOptionLabelStyle: PropTypes.object,
 };
 
 Select.defaultProps = {
   label: null,
   placeholder: "Select Option",
+  emptyOptionsPlaceholder: null,
   labelExtractor: option => option?.label,
   valueExtractor: option => option?.value,
   value: null,
   onSelect: () => {},
   isLoading: false,
   isSearchable: false,
+  showCreateOption: false,
+  showCreateOptionLoader: false,
+  createOptionLabel: null,
+  onPressCreateOption: () => {},
 };