@bigbinary/neetoui-rn 0.0.114 → 0.0.117

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 _reactNative=require("react-native");var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","onSelect","isLoading","isSearchable","labelStyle","containerStyle","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 item=_ref.item,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",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2},multiSelectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:5}}),item==null?void 0:item.label),_react.default.createElement(_.Touchable,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:7}})));};MultiSelectItem.propTypes={item:_propTypes.default.object,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var item=_ref2.item,index=_ref2.index,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return _react.default.createElement(_.Touchable,{key:index,bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:9}}),item==null?void 0:item.label)));};DropdownItem.propTypes={item:_propTypes.default.object,index:_propTypes.default.number,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,onSelect=_ref3.onSelect,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,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 multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return selectedItem.value!==item.value;});onSelect(newValue);};return _react.default.createElement(_.Container,{elevation:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,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:166,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:function onPress(){setShowDropdown(!showDropdown);setSearchQuery("");},__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:7}},_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:9}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:multipleOptionsSelected?1:2,pr:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},containerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:183,columnNumber:11}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:15}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:15}},value==null?void 0:value.map(function(item,index){return _react.default.createElement(MultiSelectItem,{key:index,item:item,index:index,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemTextStyle:multiSelectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:19}});})),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:216,columnNumber:15}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:15}})))),showDropdown&&_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",position:"absolute",left:0,right:0,top:"100%",maxHeight:defaultDropdownItemHeight*6,elevation:5},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:9}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:245,columnNumber:13}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:246,columnNumber:15}})),_react.default.createElement(_reactNative.ScrollView,{nestedScrollEnabled:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:253,columnNumber:11}},options.filter(function(item){var isItemAlreadySelected=Boolean(value.find(function(selectedItem){return selectedItem.value===item.value;}));return!isItemAlreadySelected;}).filter(function(item){if(searchQuery.length===0)return true;return formatStr(item.label).includes(formatStr(searchQuery));}).map(function(item,index){return _react.default.createElement(DropdownItem,{key:index,item:item,index:index,onPress:function onPress(){return onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:17}});}))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired})).isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_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",value:null,onSelect:function onSelect(){},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","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};

package/lib/components/Popover.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,hidePopOver=_ref.hidePopOver;var Icon=item.Icon,label=item.label,_onPress=item.onPress;return _react.default.createElement(TouchableOpacity,{onPress:function onPress(){hidePopOver();_onPress();},flexDirection:"row",p:2,px:3,alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:7}}),_react.default.createElement(_.Typography,{px:2,fontSize:fontSize,fontColor:"font.primary",fontFamily:fontFamily,__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}},label));};PopOverItem.propTypes={item:_propTypes.default.object,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])]),hidePopOver:_propTypes.default.func};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var popoverRef=(0,_react.useRef)();return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({ref:popoverRef,popoverStyle:styles.popoverStyle},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,fontFamily:fontFamily,fontSize:fontSize,hidePopOver:function hidePopOver(){var _popoverRef$current;popoverRef==null?void 0:(_popoverRef$current=popoverRef.current)==null?void 0:_popoverRef$current.setState({isVisible:false});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:11}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,onPress=_ref.onPress,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize;var Icon=item.Icon,label=item.label;return _react.default.createElement(TouchableOpacity,{onPress:onPress,flexDirection:"row",p:2,px:3,alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:7}}),_react.default.createElement(_.Typography,{px:2,fontSize:fontSize,fontColor:"font.primary",fontFamily:fontFamily,__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}},label));};PopOverItem.propTypes={item:_propTypes.default.object,onPress:_propTypes.default.func,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var popoverRef=(0,_react.useRef)();var onPressItemRef=(0,_react.useRef)(function(){});return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({ref:popoverRef,popoverStyle:styles.popoverStyle,onOpenStart:function onOpenStart(){onPressItemRef.current=function(){};},onCloseComplete:function onCloseComplete(){return onPressItemRef.current();}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,fontFamily:fontFamily,fontSize:fontSize,onPress:function onPress(){var _popoverRef$current;popoverRef==null?void 0:(_popoverRef$current=popoverRef.current)==null?void 0:_popoverRef$current.setState({isVisible:false});onPressItemRef.current=item.onPress;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:11}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});

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 _reactNative=require("react-native");var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","onSelect","isLoading","isSearchable","labelStyle","containerStyle","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 item=_ref.item,index=_ref.index,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(_.Touchable,{key:index,bg:isSelectedItem?"background.base":"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,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:31,columnNumber:7}}),item==null?void 0:item.label)));};DropdownItem.propTypes={item:_propTypes.default.object,index:_propTypes.default.number,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$selectedItem;var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemTextStyle=_ref2.selectedItemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);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 theme=(0,_react.useContext)(_native.ThemeContext);var selectedItemIndex=options==null?void 0:options.findIndex(function(item){return(item==null?void 0:item.value)===value;});var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var handleItemSelection=function handleItemSelection(item,index){setShowDropdown(false);onSelect(item,index);};return _react.default.createElement(_.Container,{elevation:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:130,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:131,columnNumber:7}}),label),_react.default.createElement(_.Touchable,{disabled:isLoading,onPress:function onPress(){setShowDropdown(!showDropdown);setSearchQuery("");},__self:_this,__source:{fileName:_jsxFileName,lineNumber:140,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},containerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:11}},(options==null?void 0:(_options$selectedItem=options[selectedItemIndex])==null?void 0:_options$selectedItem.label)||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",position:"absolute",left:0,right:0,top:"100%",maxHeight:defaultDropdownItemHeight*6,shadowOpacity:0.25,shadowRadius:3.84,"shadow-color":"#000",shadowOffset:{width:0,height:2},elevation:5},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:9}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:15}})),_react.default.createElement(_reactNative.ScrollView,{nestedScrollEnabled:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:11}},options.filter(function(item){if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(item.label).includes(formatStr(searchQuery));}).map(function(item,index){return _react.default.createElement(DropdownItem,{key:index,item:item,index:index,isSelectedItem:(item==null?void 0:item.value)===value,defaultDropdownItemHeight:defaultDropdownItemHeight,onPress:function onPress(){return handleItemSelection(item,index);},itemContainerStyle:itemContainerStyle,selectedItemContainerStyle:selectedItemContainerStyle,itemTextStyle:itemTextStyle,selectedItemTextStyle:selectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:17}});}))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired})).isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.string,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_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",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","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};

package/lib/contexts/index.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ProviderContext=void 0;var _react=_interopRequireDefault(require("react"));var ProviderContext=_react.default.createContext(null);exports.ProviderContext=ProviderContext;

package/package.json

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

package/src/components/MultiSelect.js

@@ -1,18 +1,24 @@
 import React, { useState, useContext } from "react";
 import Icon from "react-native-remix-icon";
 import PropTypes from "prop-types";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
 import {
   ActivityIndicator,
-  ScrollView,
-  View,
   TouchableWithoutFeedback,
+  Keyboard,
 } from "react-native";
 import { ThemeContext } from "styled-components/native";
+import { ScrollView } from "react-native-gesture-handler";
 
 import { Container, Input, Touchable, Typography, Card } from "@components";
 
 const MultiSelectItem = ({
-  item,
+  label,
   onUnselect,
   multiSelectedItemContainerStyle,
   multiSelectedItemTextStyle,
@@ -24,6 +30,7 @@ const MultiSelectItem = ({
     borderRadius={2}
     flexDirection="row"
     alignItems="center"
+    justifyContent="space-between"
     p={1}
     m={1}
     {...multiSelectedItemContainerStyle}
@@ -32,33 +39,33 @@ const MultiSelectItem = ({
       fontFamily="inter400"
       fontSize="s"
       mr={2}
+      maxWidth="90%"
       {...multiSelectedItemTextStyle}
     >
-      {item?.label}
+      {label}
     </Typography>
-    <Touchable onPress={onUnselect}>
+    <TouchableWithoutFeedback onPress={onUnselect}>
       <Icon name="ri-close-line" size="20" color="grey" />
-    </Touchable>
+    </TouchableWithoutFeedback>
   </Container>
 );
 
 MultiSelectItem.propTypes = {
-  item: PropTypes.object,
+  label: PropTypes.string,
   onUnselect: PropTypes.func,
   multiSelectedItemContainerStyle: PropTypes.object,
   multiSelectedItemTextStyle: PropTypes.object,
 };
 
 const DropdownItem = ({
-  item,
-  index,
+  label,
   onPress,
   defaultDropdownItemHeight,
   itemContainerStyle,
   itemTextStyle,
 }) => {
   return (
-    <Touchable key={index} bg="background.white" onPress={onPress}>
+    <Touchable bg="background.white" onPress={onPress}>
       <Container
         height={defaultDropdownItemHeight}
         p={2}
@@ -70,7 +77,7 @@ const DropdownItem = ({
           color="font.grey"
           {...itemTextStyle}
         >
-          {item?.label}
+          {label}
         </Typography>
       </Container>
     </Touchable>
@@ -78,8 +85,7 @@ const DropdownItem = ({
 };
 
 DropdownItem.propTypes = {
-  item: PropTypes.object,
-  index: PropTypes.number,
+  label: PropTypes.string,
   onPress: PropTypes.func,
   defaultDropdownItemHeight: PropTypes.number,
   itemContainerStyle: PropTypes.object,
@@ -94,7 +100,9 @@ DropdownItem.propTypes = {
  *   <img src="screenshots/multiSelect/multiSelect.png" />
  * </div>
  *
- *  ## Usage
+ * ## Usage
+ *
+ * ### Import and use MultiSelect component.
  *
  * ```js
  * import * as React, { useState } from 'react';
@@ -115,18 +123,15 @@ DropdownItem.propTypes = {
  *  const [selectedOptions, setSelectedOptions] = useState([])
  *
  *  return (
- *    <Container>
- *      <MultiSelect
- *        label="Select"
- *        options={OPTIONS}
- *        value={selectedOptions}
- *        onSelect={setSelectedOptions}
- *      />
- *    </Container>
+ *    <MultiSelect
+ *      label="Select"
+ *      options={OPTIONS}
+ *      value={selectedOptions}
+ *      onSelect={setSelectedOptions}
+ *    />
  *  );
  * }
  * ```
- *
  */
 
 export const MultiSelect = ({
@@ -134,11 +139,16 @@ export const MultiSelect = ({
   label,
   value,
   placeholder,
+  labelExtractor,
+  valueExtractor,
   onSelect,
+  selectedValue,
+  deletedValue,
   isLoading,
   isSearchable,
   labelStyle,
   containerStyle,
+  inputContainerStyle,
   dropdownContainerStyle,
   itemContainerStyle,
   itemTextStyle,
@@ -149,20 +159,52 @@ export const MultiSelect = ({
   const theme = useContext(ThemeContext);
   const [showDropdown, setShowDropdown] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
+  const dropdownAnimatedHeight = useSharedValue(0);
 
   const multipleOptionsSelected = value?.length > 0;
   const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
+  const dropdownHeight =
+    dropdownContainerStyle?.height ||
+    dropdownContainerStyle?.maxHeight ||
+    defaultDropdownItemHeight * 6;
   const formatStr = str => str?.toLowerCase()?.trim();
 
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      height: withTiming(dropdownAnimatedHeight.value, {
+        duration: 100,
+        easing: Easing.ease,
+      }),
+    };
+  });
+
+  const toggleAnimation = () => {
+    dropdownAnimatedHeight.value =
+      dropdownAnimatedHeight.value === 0 ? dropdownHeight : 0;
+  };
+
+  const handleOpenDropdown = () => {
+    Keyboard.dismiss();
+    setSearchQuery("");
+    setShowDropdown(!showDropdown);
+    toggleAnimation();
+  };
+
   const handleUnselection = item => {
     const newValue = value.filter(
-      selectedItem => selectedItem.value !== item.value
+      selectedItem => valueExtractor(selectedItem) !== valueExtractor(item)
     );
     onSelect(newValue);
+    deletedValue(item);
+  };
+
+  const handleSelection = item => {
+    onSelect([...value, item]);
+    selectedValue(item);
   };
 
   return (
-    <Container elevation={0}>
+    <Container {...containerStyle}>
       <Typography
         fontFamily="inter400"
         mb={1}
@@ -174,108 +216,118 @@ export const MultiSelect = ({
       </Typography>
       <TouchableWithoutFeedback
         disabled={isLoading}
-        onPress={() => {
-          setShowDropdown(!showDropdown);
-          setSearchQuery("");
-        }}
+        onPress={handleOpenDropdown}
       >
-        <View>
-          <Container
-            borderWidth={1}
-            borderColor="border.grey400"
-            p={multipleOptionsSelected ? 1 : 2}
-            pr={2}
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-            {...containerStyle}
-            {...rest}
-          >
-            {!multipleOptionsSelected && (
-              <Typography fontFamily="inter400" fontSize="s" color="font.grey">
-                {!multipleOptionsSelected && placeholder}
-              </Typography>
-            )}
-            {multipleOptionsSelected && (
-              <Container flexWrap="wrap" flexDirection="row" maxWidth="85%">
-                {value?.map((item, index) => (
-                  <MultiSelectItem
-                    key={index}
-                    item={item}
-                    index={index}
-                    onUnselect={() => handleUnselection(item)}
-                    multiSelectedItemContainerStyle={
-                      multiSelectedItemContainerStyle
-                    }
-                    multiSelectedItemTextStyle={multiSelectedItemTextStyle}
-                  />
-                ))}
-              </Container>
-            )}
-            {isLoading ? (
-              <ActivityIndicator
-                size="small"
-                color={theme.colors.background.base}
-              />
-            ) : (
-              <Icon
-                name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
-                size="20"
-                color="grey"
-              />
-            )}
-          </Container>
-        </View>
-      </TouchableWithoutFeedback>
-
-      {showDropdown && (
-        <Card
-          bg="background.white"
+        <Container
           borderWidth={1}
           borderColor="border.grey400"
-          position="absolute"
-          left={0}
-          right={0}
-          top="100%"
-          maxHeight={defaultDropdownItemHeight * 6}
-          elevation={5}
-          {...dropdownContainerStyle}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          p={multipleOptionsSelected ? 1 : 2}
+          pr={2}
+          maxHeight={120}
+          {...inputContainerStyle}
+          {...rest}
         >
-          {isSearchable && (
-            <Container p={1}>
-              <Input
-                placeholder="Search"
-                onChangeText={setSearchQuery}
-                fontSize="s"
-              />
-            </Container>
+          {!multipleOptionsSelected && (
+            <Typography fontFamily="inter400" fontSize="s" color="font.grey">
+              {!multipleOptionsSelected && placeholder}
+            </Typography>
           )}
-          <ScrollView nestedScrollEnabled={true}>
-            {options
-              .filter(item => {
-                const isItemAlreadySelected = Boolean(
-                  value.find(selectedItem => selectedItem.value === item.value)
-                );
-                return !isItemAlreadySelected;
-              })
-              .filter(item => {
-                if (searchQuery.length === 0) return true;
-                return formatStr(item.label).includes(formatStr(searchQuery));
-              })
-              .map((item, index) => (
-                <DropdownItem
-                  key={index}
-                  item={item}
-                  index={index}
-                  onPress={() => onSelect([...value, item])}
-                  itemContainerStyle={itemContainerStyle}
-                  defaultDropdownItemHeight={defaultDropdownItemHeight}
-                  itemTextStyle={itemTextStyle}
+          {multipleOptionsSelected && (
+            <ScrollView showsVerticalScrollIndicator={false}>
+              <Container
+                flexWrap="wrap"
+                flexDirection="row"
+                maxWidth="85%"
+                onStartShouldSetResponder={() => true}
+              >
+                {value?.map((item, index) => {
+                  const optionLabel = labelExtractor(item, index);
+                  return (
+                    <MultiSelectItem
+                      key={index}
+                      label={optionLabel}
+                      onUnselect={() => handleUnselection(item)}
+                      multiSelectedItemContainerStyle={
+                        multiSelectedItemContainerStyle
+                      }
+                      multiSelectedItemTextStyle={multiSelectedItemTextStyle}
+                    />
+                  );
+                })}
+              </Container>
+            </ScrollView>
+          )}
+          {isLoading ? (
+            <ActivityIndicator
+              size="small"
+              color={theme.colors.background.base}
+            />
+          ) : (
+            <Icon
+              name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
+              size="20"
+              color="grey"
+            />
+          )}
+        </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"
                 />
-              ))}
-          </ScrollView>
-        </Card>
-      )}
+              </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) => {
+                  const optionLabel = labelExtractor(item, index);
+                  return (
+                    <DropdownItem
+                      key={index}
+                      label={optionLabel}
+                      onPress={() => handleSelection(item)}
+                      itemContainerStyle={itemContainerStyle}
+                      defaultDropdownItemHeight={defaultDropdownItemHeight}
+                      itemTextStyle={itemTextStyle}
+                    />
+                  );
+                })}
+            </ScrollView>
+          </Card>
+        </Animated.View>
+      </Container>
     </Container>
   );
 };
@@ -290,22 +342,38 @@ MultiSelect.propTypes = {
    */
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
+      label: PropTypes.string,
+      value: PropTypes.string,
     })
   ).isRequired,
   /**
    * The text to be displayed if no option is selected.
    */
   placeholder: PropTypes.string,
+  /**
+   * Use custom key as label.
+   */
+  labelExtractor: PropTypes.func,
+  /**
+   * Use custom key as value.
+   */
+  valueExtractor: PropTypes.func,
   /**
    * The selected value to show for the Select input.
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   /**
-   * Callback function when an option is selected, receives the select option object.
+   * Callback function when an option is selected, receives an array of object of options selected.
    */
   onSelect: PropTypes.func,
+  /**
+   * Callback function when an option is selected, receives the selected option object.
+   */
+  selectedValue: PropTypes.func,
+  /**
+   * Callback function when an option is selected, receives the deleted option object.
+   */
+  deletedValue: PropTypes.func,
   /**
    * Used to show if the dropdown is loading state, while loading Select input will be disabled.
    */
@@ -319,9 +387,13 @@ MultiSelect.propTypes = {
    */
   labelStyle: PropTypes.object,
   /**
-   * To customise Select input container styles.
+   * To customise outermost container style.
    */
   containerStyle: PropTypes.object,
+  /**
+   * To customise Select input container styles.
+   */
+  inputContainerStyle: PropTypes.object,
   /**
    * To customise dropdown container styles.
    */
@@ -347,8 +419,12 @@ MultiSelect.propTypes = {
 MultiSelect.defaultProps = {
   label: null,
   placeholder: "Select Option",
+  labelExtractor: option => option?.label,
+  valueExtractor: option => option?.value,
   value: null,
   onSelect: () => {},
+  selectedValue: () => {},
+  deletedValue: () => {},
   isLoading: false,
   isSearchable: false,
 };

package/src/components/Popover.js

@@ -15,14 +15,12 @@ export const TouchableOpacity = styled.TouchableOpacity`
   ${layout}
 `;
 
-const PopOverItem = ({ item, fontFamily, fontSize, hidePopOver }) => {
-  const { Icon, label, onPress } = item;
+const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
+  const { Icon, label } = item;
+
   return (
     <TouchableOpacity
-      onPress={() => {
-        hidePopOver();
-        onPress();
-      }}
+      onPress={onPress}
       flexDirection="row"
       p={2}
       px={3}
@@ -43,12 +41,12 @@ const PopOverItem = ({ item, fontFamily, fontSize, hidePopOver }) => {
 
 PopOverItem.propTypes = {
   item: PropTypes.object,
+  onPress: PropTypes.func,
   fontFamily: PropTypes.string,
   fontSize: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
   ]),
-  hidePopOver: PropTypes.func,
 };
 
 /**
@@ -140,10 +138,16 @@ export const Popover = ({
   ...rest
 }) => {
   const popoverRef = useRef();
+  const onPressItemRef = useRef(() => {});
+
   return (
     <OriginalPopover
       ref={popoverRef}
       popoverStyle={styles.popoverStyle}
+      onOpenStart={() => {
+        onPressItemRef.current = () => {};
+      }}
+      onCloseComplete={() => onPressItemRef.current()}
       {...rest}
     >
       {data?.map((item, index) => {
@@ -153,8 +157,9 @@ export const Popover = ({
             item={item}
             fontFamily={fontFamily}
             fontSize={fontSize}
-            hidePopOver={() => {
+            onPress={() => {
               popoverRef?.current?.setState({ isVisible: false });
+              onPressItemRef.current = item.onPress;
             }}
           />
         );

package/src/components/Select.js

@@ -1,14 +1,24 @@
 import React, { useState, useContext } from "react";
 import Icon from "react-native-remix-icon";
 import PropTypes from "prop-types";
-import { ActivityIndicator, ScrollView } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import {
+  ActivityIndicator,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from "react-native";
 import { ThemeContext } from "styled-components/native";
+import { ScrollView } from "react-native-gesture-handler";
 
-import { Container, Input, Touchable, Typography } from "@components";
+import { Card, Container, Input, Typography } from "@components";
 
 const DropdownItem = ({
-  item,
-  index,
+  label,
   isSelectedItem,
   defaultDropdownItemHeight,
   onPress,
@@ -17,12 +27,9 @@ const DropdownItem = ({
   itemTextStyle,
   selectedItemTextStyle,
 }) => (
-  <Touchable
-    key={index}
-    bg={isSelectedItem ? "background.base" : "background.white"}
-    onPress={onPress}
-  >
+  <TouchableWithoutFeedback onPress={onPress}>
     <Container
+      bg={isSelectedItem ? "background.base" : "background.white"}
       height={defaultDropdownItemHeight}
       p={2}
       {...itemContainerStyle}
@@ -35,15 +42,14 @@ const DropdownItem = ({
         {...itemTextStyle}
         {...(isSelectedItem && selectedItemTextStyle)}
       >
-        {item?.label}
+        {label}
       </Typography>
     </Container>
-  </Touchable>
+  </TouchableWithoutFeedback>
 );
 
 DropdownItem.propTypes = {
-  item: PropTypes.object,
-  index: PropTypes.number,
+  label: PropTypes.string.isRequired,
   isSelectedItem: PropTypes.bool,
   defaultDropdownItemHeight: PropTypes.number,
   onPress: PropTypes.func,
@@ -62,7 +68,9 @@ DropdownItem.propTypes = {
  *   <img src="screenshots/select/select2.png" />
  * </div>
  *
- *  ## Usage
+ * ## Usage
+ *
+ * ### Import and use Select component.
  *
  * ```js
  * import * as React, { useState } from 'react';
@@ -83,18 +91,15 @@ DropdownItem.propTypes = {
  *  const [selectedOption, setSelectedOption] = useState(null)
  *
  *  return (
- *    <Container>
- *      <Select
- *        label="Select"
- *        data={OPTIONS}
- *        value={selectedOption?.value}
- *        onSelect={setSelectedOption}
- *      />
- *    </Container>
+ *    <Select
+ *      label="Select"
+ *      options={OPTIONS}
+ *      value={selectedOption}
+ *      onSelect={setSelectedOption}
+ *    />
  *  );
  * }
  * ```
- *
  */
 
 export const Select = ({
@@ -102,11 +107,14 @@ export const Select = ({
   label,
   value,
   placeholder,
+  labelExtractor,
+  valueExtractor,
   onSelect,
   isLoading,
   isSearchable,
   labelStyle,
   containerStyle,
+  inputContainerStyle,
   dropdownContainerStyle,
   itemContainerStyle,
   itemTextStyle,
@@ -114,20 +122,49 @@ export const Select = ({
   selectedItemTextStyle,
   ...rest
 }) => {
+  const theme = useContext(ThemeContext);
   const [showDropdown, setShowDropdown] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
-  const theme = useContext(ThemeContext);
-  const selectedItemIndex = options?.findIndex(item => item?.value === value);
+  const dropdownAnimatedHeight = useSharedValue(0);
+
   const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
+  const dropdownHeight =
+    dropdownContainerStyle?.height ||
+    dropdownContainerStyle?.maxHeight ||
+    defaultDropdownItemHeight * 6;
+  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,
+      }),
+    };
+  });
+
+  const toggleAnimation = () => {
+    dropdownAnimatedHeight.value =
+      dropdownAnimatedHeight.value === 0 ? dropdownHeight : 0;
+  };
+
+  const handleOpenDropdown = () => {
+    Keyboard.dismiss();
+    setSearchQuery("");
+    setShowDropdown(!showDropdown);
+    toggleAnimation();
+  };
+
   const handleItemSelection = (item, index) => {
     setShowDropdown(false);
+    toggleAnimation();
     onSelect(item, index);
   };
 
   return (
-    <Container elevation={0}>
+    <Container {...containerStyle}>
       <Typography
         fontFamily="inter400"
         mb={1}
@@ -137,12 +174,9 @@ export const Select = ({
       >
         {label}
       </Typography>
-      <Touchable
+      <TouchableWithoutFeedback
         disabled={isLoading}
-        onPress={() => {
-          setShowDropdown(!showDropdown);
-          setSearchQuery("");
-        }}
+        onPress={handleOpenDropdown}
       >
         <Container
           borderWidth={1}
@@ -151,11 +185,11 @@ export const Select = ({
           flexDirection="row"
           justifyContent="space-between"
           alignItems="center"
-          {...containerStyle}
+          {...inputContainerStyle}
           {...rest}
         >
           <Typography fontFamily="inter400" fontSize="s" color="font.grey">
-            {options?.[selectedItemIndex]?.label || placeholder}
+            {selectedOptionLabel || placeholder}
           </Typography>
           {isLoading ? (
             <ActivityIndicator
@@ -170,59 +204,55 @@ export const Select = ({
             />
           )}
         </Container>
-      </Touchable>
-      {showDropdown && (
-        <Container
-          bg="background.white"
-          borderWidth={1}
-          borderColor="border.grey400"
-          position="absolute"
-          left={0}
-          right={0}
-          top="100%"
-          maxHeight={defaultDropdownItemHeight * 6}
-          shadowOpacity={0.25}
-          shadowRadius={3.84}
-          shadow-color="#000"
-          shadowOffset={{
-            width: 0,
-            height: 2,
-          }}
-          elevation={5}
-          {...dropdownContainerStyle}
-        >
-          {isSearchable && (
-            <Container p={1}>
-              <Input
-                placeholder="Search"
-                onChangeText={setSearchQuery}
-                fontSize="s"
-              />
-            </Container>
-          )}
-          <ScrollView nestedScrollEnabled={true}>
-            {options
-              .filter(item => {
-                if (searchQuery?.length === 0) return true;
-                return formatStr(item.label).includes(formatStr(searchQuery));
-              })
-              .map((item, index) => (
-                <DropdownItem
-                  key={index}
-                  item={item}
-                  index={index}
-                  isSelectedItem={item?.value === value}
-                  defaultDropdownItemHeight={defaultDropdownItemHeight}
-                  onPress={() => handleItemSelection(item, index)}
-                  itemContainerStyle={itemContainerStyle}
-                  selectedItemContainerStyle={selectedItemContainerStyle}
-                  itemTextStyle={itemTextStyle}
-                  selectedItemTextStyle={selectedItemTextStyle}
+      </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"
                 />
-              ))}
-          </ScrollView>
-        </Container>
-      )}
+              </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) => {
+                  const optionLabel = labelExtractor(item, index);
+                  const optionValue = valueExtractor(item, index);
+                  const isSelectedItem =
+                    selectedOptionValue && selectedOptionValue === optionValue;
+                  return (
+                    <DropdownItem
+                      key={index}
+                      label={optionLabel}
+                      isSelectedItem={isSelectedItem}
+                      defaultDropdownItemHeight={defaultDropdownItemHeight}
+                      onPress={() => handleItemSelection(item, index)}
+                      itemContainerStyle={itemContainerStyle}
+                      selectedItemContainerStyle={selectedItemContainerStyle}
+                      itemTextStyle={itemTextStyle}
+                      selectedItemTextStyle={selectedItemTextStyle}
+                    />
+                  );
+                })}
+            </ScrollView>
+          </Card>
+        </Animated.View>
+      </Container>
     </Container>
   );
 };
@@ -237,18 +267,26 @@ Select.propTypes = {
    */
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
+      label: PropTypes.string,
+      value: PropTypes.string,
     })
   ).isRequired,
   /**
    * The text to be displayed if no option is selected.
    */
   placeholder: PropTypes.string,
+  /**
+   * Use custom key as label.
+   */
+  labelExtractor: PropTypes.func,
+  /**
+   * Use custom key as value.
+   */
+  valueExtractor: PropTypes.func,
   /**
    * The selected value to show for the Select input.
    */
-  value: PropTypes.string,
+  value: PropTypes.object,
   /**
    * Callback function when an option is selected, receives the select option object.
    */
@@ -266,9 +304,13 @@ Select.propTypes = {
    */
   labelStyle: PropTypes.object,
   /**
-   * To customise Select input container styles.
+   * To customise outermost container style.
    */
   containerStyle: PropTypes.object,
+  /**
+   * To customise Select input container styles.
+   */
+  inputContainerStyle: PropTypes.object,
   /**
    * To customise dropdown container styles.
    */
@@ -294,6 +336,8 @@ Select.propTypes = {
 Select.defaultProps = {
   label: null,
   placeholder: "Select Option",
+  labelExtractor: option => option?.label,
+  valueExtractor: option => option?.value,
   value: null,
   onSelect: () => {},
   isLoading: false,

package/src/contexts/index.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ProviderContext = React.createContext(null);