etendo-ui-library 1.3.141 → 1.3.142

package/dist-native/assets/images/icons/XIcon.d.ts

@@ -3,5 +3,7 @@ import { ColorValue } from 'react-native';
 export interface SvgImageProps {
     style?: any;
     fill?: ColorValue;
+    width?: number;
+    height?: number;
 }
-export declare const XIcon: ({ style, fill }: SvgImageProps) => React.JSX.Element;
+export declare const XIcon: ({ style, width, height, fill, }: SvgImageProps) => React.JSX.Element;

package/dist-native/assets/images/icons/XIcon.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.XIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=require("react-native-svg");var _colors=require("../../../styles/colors");var _svg_utils=require("../../../helpers/svg_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/assets/images/icons/XIcon.tsx";var XIcon=exports.XIcon=function XIcon(_ref){var style=_ref.style,_ref$fill=_ref.fill,fill=_ref$fill===void 0?_colors.DEFAULT_COLOR_THEME:_ref$fill;var width=(0,_svg_utils.sizeSvg)(style==null?void 0:style.width,24);var height=(0,_svg_utils.sizeSvg)(style==null?void 0:style.height,24);return _react.default.createElement(_reactNativeSvg.Svg,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:5}},_react.default.createElement(_reactNativeSvg.Path,{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.4101 12L18.7101 6.71C19.1001 6.32 19.1001 5.69 18.7101 5.3C18.3201 4.91 17.6901 4.91 17.3001 5.3L12.0101 10.59L6.71006 5.29C6.32006 4.9 5.68006 4.9 5.29006 5.29C4.90006 5.68 4.90006 6.32 5.29006 6.71L10.5801 12L5.29006 17.29C4.90006 17.68 4.90006 18.31 5.29006 18.7C5.68006 19.09 6.31006 19.09 6.70006 18.7L11.9901 13.41L17.2801 18.7C17.6701 19.09 18.3001 19.09 18.6901 18.7C19.0801 18.31 19.0801 17.68 18.6901 17.29L13.4001 12H13.4101Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:17,columnNumber:7}}));};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.XIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=require("react-native-svg");var _colors=require("../../../styles/colors");var _svg_utils=require("../../../helpers/svg_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/assets/images/icons/XIcon.tsx";var XIcon=exports.XIcon=function XIcon(_ref){var style=_ref.style,width=_ref.width,height=_ref.height,_ref$fill=_ref.fill,fill=_ref$fill===void 0?_colors.DEFAULT_COLOR_THEME:_ref$fill;var sizeWidth=(0,_svg_utils.sizeSvg)((style==null?void 0:style.width)||width,24);var sizeHeight=(0,_svg_utils.sizeSvg)((style==null?void 0:style.height)||height,24);return _react.default.createElement(_reactNativeSvg.Svg,{width:sizeWidth,height:sizeHeight,viewBox:"0 0 24 24",fill:"none",__self:_this,__source:{fileName:_jsxFileName,lineNumber:19,columnNumber:5}},_react.default.createElement(_reactNativeSvg.Path,{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.4101 12L18.7101 6.71C19.1001 6.32 19.1001 5.69 18.7101 5.3C18.3201 4.91 17.6901 4.91 17.3001 5.3L12.0101 10.59L6.71006 5.29C6.32006 4.9 5.68006 4.9 5.29006 5.29C4.90006 5.68 4.90006 6.32 5.29006 6.71L10.5801 12L5.29006 17.29C4.90006 17.68 4.90006 18.31 5.29006 18.7C5.68006 19.09 6.31006 19.09 6.70006 18.7L11.9901 13.41L17.2801 18.7C17.6701 19.09 18.3001 19.09 18.6901 18.7C19.0801 18.31 19.0801 17.68 18.6901 17.29L13.4001 12H13.4101Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:7}}));};

package/dist-native/components/inputBase/dropdown-input/DropdownInput.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _InputBase=_interopRequireDefault(require("../InputBase"));var _DropdownInput=require("./DropdownInput.styles");var _DropdownInput2=require("./DropdownInput.constants");var _table_utils=require("../../../helpers/table_utils");var _functions_utils=require("../../../helpers/functions_utils");var _colors=require("../../../styles/colors");var _DropdownArrowIcon=require("../../../assets/images/icons/DropdownArrowIcon");var _icons=require("../../../assets/images/icons");var _excluded=["title","onSelect","fetchData","displayKey","pageSize","staticData","helperText","isDisabled","maxVisibleOptions","noResultsText","searchPlaceholder","placeholder"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/dropdown-input/DropdownInput.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DropdownInput=function DropdownInput(_ref){var title=_ref.title,onSelect=_ref.onSelect,fetchData=_ref.fetchData,displayKey=_ref.displayKey,_ref$pageSize=_ref.pageSize,pageSize=_ref$pageSize===void 0?10:_ref$pageSize,_ref$staticData=_ref.staticData,staticData=_ref$staticData===void 0?[]:_ref$staticData,_ref$helperText=_ref.helperText,helperText=_ref$helperText===void 0?'':_ref$helperText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$maxVisibleOption=_ref.maxVisibleOptions,maxVisibleOptions=_ref$maxVisibleOption===void 0?5:_ref$maxVisibleOption,_ref$noResultsText=_ref.noResultsText,noResultsText=_ref$noResultsText===void 0?'No results':_ref$noResultsText,_ref$searchPlaceholde=_ref.searchPlaceholder,searchPlaceholder=_ref$searchPlaceholde===void 0?'Search':_ref$searchPlaceholde,_ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?'Select an Option':_ref$placeholder,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dropdownRef=(0,_react.useRef)(null);var flatListRef=(0,_react.useRef)(null);var searchInputRef=(0,_react.useRef)(null);var inputContainerRef=(0,_react.useRef)(null);var _useState=(0,_react.useState)(1),_useState2=(0,_slicedToArray2.default)(_useState,2),page=_useState2[0],setPage=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),hasMore=_useState4[0],setHasMore=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),loading=_useState6[0],setLoading=_useState6[1];var _useState7=(0,_react.useState)([]),_useState8=(0,_slicedToArray2.default)(_useState7,2),options=_useState8[0],setOptions=_useState8[1];var _useState9=(0,_react.useState)(new Set()),_useState10=(0,_slicedToArray2.default)(_useState9,2),loadedPages=_useState10[0],setLoadedPages=_useState10[1];var _useState11=(0,_react.useState)(''),_useState12=(0,_slicedToArray2.default)(_useState11,2),searchQuery=_useState12[0],setSearchQuery=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),loadingMore=_useState14[0],setLoadingMore=_useState14[1];var _useState15=(0,_react.useState)([]),_useState16=(0,_slicedToArray2.default)(_useState15,2),searchOptions=_useState16[0],setSearchOptions=_useState16[1];var _useState17=(0,_react.useState)(false),_useState18=(0,_slicedToArray2.default)(_useState17,2),dropdownVisible=_useState18[0],setDropdownVisible=_useState18[1];var _useState19=(0,_react.useState)({x:0,y:0,width:0}),_useState20=(0,_slicedToArray2.default)(_useState19,2),inputPosition=_useState20[0],setInputPosition=_useState20[1];var _useState21=(0,_react.useState)(undefined),_useState22=(0,_slicedToArray2.default)(_useState21,2),selectedOption=_useState22[0],setSelectedOption=_useState22[1];var renderSearchInput=function renderSearchInput(searchQuery,onChange,searchPlaceholder){return _react.default.createElement(_reactNative.View,{ref:searchInputRef,style:[_DropdownInput.styles.searchInput,_DropdownInput.styles.searchInputWrapper],__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:7}},_react.default.createElement(_reactNative.TextInput,{style:[_DropdownInput.styles.searchTextInput,(0,_table_utils.disableOutline)()],onChangeText:onChange,value:searchQuery,placeholder:searchPlaceholder,placeholderTextColor:_colors.NEUTRAL_600,underlineColorAndroid:"transparent",onTouchStart:function onTouchStart(event){return event.stopPropagation();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:9}}),(searchQuery==null?void 0:searchQuery.length)>0&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(event){event.stopPropagation();clearSearch();},disabled:isDisabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}},_react.default.createElement(_icons.ClearIcon,{fill:_colors.PRIMARY_100,width:12,height:12,style:[_DropdownInput.styles.cancelIcon,isDisabled?{opacity:0.5}:{opacity:1}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:13}})));};var renderHighlightedText=function renderHighlightedText(fullText,highlightText){if(!highlightText.trim()){return _react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:78,columnNumber:14}},fullText);}var parts=fullText.split(new RegExp("("+highlightText+")",'gi'));return _react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:7}},parts.map(function(part,index){return part.toLowerCase()===highlightText.toLowerCase()?_react.default.createElement(_reactNative.Text,{key:index,style:_DropdownInput.styles.highlightedText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:13}},part):part;}));};var renderDropdownContent=function renderDropdownContent(){var currentOptions=(searchQuery==null?void 0:searchQuery.length)>0?searchOptions:options;var currentOptionsLength=currentOptions==null?void 0:currentOptions.length;return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:"fade",visible:dropdownVisible,onRequestClose:toggleDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:101,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{style:{flex:1},onPress:function onPress(event){var _searchInputRef$curre,_dropdownRef$current;var isSearchArea=(0,_functions_utils.isWebPlatform)()&&!!searchInputRef.current&&(searchInputRef==null?void 0:(_searchInputRef$curre=searchInputRef.current)==null?void 0:_searchInputRef$curre.contains(event.target));var isDropdownArea=(0,_functions_utils.isWebPlatform)()&&!!dropdownRef.current&&(dropdownRef==null?void 0:(_dropdownRef$current=dropdownRef.current)==null?void 0:_dropdownRef$current.contains(event.target));if(!(0,_functions_utils.isWebPlatform)()){setDropdownVisible(false);}if((0,_functions_utils.isWebPlatform)()&&!isSearchArea&&!isDropdownArea){setDropdownVisible(false);}},activeOpacity:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'center'},__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:[{position:'absolute',top:inputPosition.y,left:inputPosition.x,width:inputPosition.width,backgroundColor:'white',borderRadius:8,overflow:'hidden'},_DropdownInput.styles.dropdown],onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:13}},(staticData==null?void 0:staticData.length)===0&&(fetchData==null?void 0:fetchData.search)&&renderSearchInput(searchQuery,handleSearchQueryChange,searchPlaceholder),loading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_colors.PRIMARY_100,style:{marginVertical:4},__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:17}}):currentOptionsLength>0?_react.default.createElement(_reactNative.FlatList,{ref:flatListRef,style:{height:getDropdownHeight(currentOptionsLength,maxVisibleOptions)},data:currentOptions,renderItem:function renderItem(_ref2){var item=_ref2.item;return renderDropdownOption(item);},keyExtractor:function keyExtractor(item,index){return item.value+"-"+index;},onEndReached:handleEndReached,getItemLayout:function getItemLayout(_,index){return{length:_DropdownInput2.OPTION_HEIGHT,offset:_DropdownInput2.OPTION_HEIGHT*index,index:index};},ListFooterComponent:renderFooter,__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:19}}):_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.noResultsText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:19}},noResultsText)))));};var renderSelectedOption=function renderSelectedOption(){if(!selectedOption)return null;return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.selectedOptionContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:7}},_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:9}},selectedOption),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:deselectOption,__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:9}},_react.default.createElement(_icons.ClearIcon,{fill:_colors.NEUTRAL_600,width:12,height:12,style:[_DropdownInput.styles.cancelIcon,isDisabled?{opacity:0.5}:{opacity:1}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:11}})));};var renderDropdownOption=function renderDropdownOption(option){var isSelected=option[displayKey]===selectedOption;return _react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){return handleSelect(option);},style:[_DropdownInput.styles.option,isSelected?_DropdownInput.styles.selectedOption:null],__self:_this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:7}},_react.default.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:9}},isSelected?renderSelectedOption&&renderSelectedOption():renderHighlightedText&&renderHighlightedText(option[displayKey],searchQuery)));};var loadOptions=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(){var isNewSearch=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;if(loading||loadingMore)return;var currentPage=isNewSearch?1:page+1;if(!isNewSearch&&loadedPages.has(currentPage)){return;}if(isNewSearch){setLoading(true);setHasMore(true);setPage(1);setOptions(staticData);setLoadedPages(new Set([1]));}else{setLoadingMore(true);setPage(currentPage);setLoadedPages(new Set(loadedPages).add(currentPage));}try{var fetchedOptions=[];if((searchQuery==null?void 0:searchQuery.trim().length)>0&&fetchData!=null&&fetchData.search){fetchedOptions=yield fetchData.search(searchQuery,currentPage,pageSize);}else if(fetchData!=null&&fetchData.normal){fetchedOptions=yield fetchData.normal(currentPage,pageSize);}var newOptions=isNewSearch?(0,_toConsumableArray2.default)(fetchedOptions):[].concat((0,_toConsumableArray2.default)(options),(0,_toConsumableArray2.default)(fetchedOptions));if(staticData!=null&&staticData.length){newOptions=staticData;}setOptions(newOptions);setHasMore(fetchedOptions.length===pageSize);}catch(error){console.error(error);}finally{setLoading(false);setLoadingMore(false);}});return function loadOptions(){return _ref3.apply(this,arguments);};}();var measureInputPosition=function measureInputPosition(){inputContainerRef.current.measure(function(x,y,width,height,pageX,pageY){setInputPosition({x:pageX,y:pageY+height,width:width});});};var renderFooter=function renderFooter(){if(!loadingMore)return null;return _react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_colors.PRIMARY_100,style:{marginVertical:4},__self:_this,__source:{fileName:_jsxFileName,lineNumber:238,columnNumber:7}});};var clearSearch=function clearSearch(){setSearchQuery('');setSearchOptions([]);setLoadingMore(false);setHasMore(true);};var adjustDropdownPosition=(0,_react.useCallback)(function(){inputContainerRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var estimatedDropdownHeight=getDropdownHeight(options.length,maxVisibleOptions);var spaceAbove=pageY;var spaceBelow=windowHeight-pageY-height;var extraOffsetTop=title?-20:-28;if(estimatedDropdownHeight<spaceBelow){setInputPosition({x:pageX,y:pageY+height,width:width});}else if(estimatedDropdownHeight<spaceAbove){setInputPosition({x:pageX,y:pageY-estimatedDropdownHeight-_DropdownInput2.OPTION_HEIGHT+extraOffsetTop,width:width});}else{var preferTop=spaceAbove>spaceBelow;var newY=preferTop?pageY-estimatedDropdownHeight-_DropdownInput2.OPTION_HEIGHT+extraOffsetTop:pageY+height;setInputPosition({x:pageX,y:newY,width:width});}});},[options.length,maxVisibleOptions,title,dropdownVisible]);var getDropdownHeight=function getDropdownHeight(optionsLength,maxVisibleOptions){var numberOfOptions=Math.min(optionsLength,maxVisibleOptions);return numberOfOptions*_DropdownInput2.OPTION_HEIGHT;};var deselectOption=function deselectOption(){setSelectedOption('');onSelect==null?void 0:onSelect('');};var handleSelect=function handleSelect(option){onSelect==null?void 0:onSelect(option);setSearchQuery('');setDropdownVisible(false);setSelectedOption(option[displayKey]);setHasMore(true);};var scrollToSelectedOption=(0,_react.useCallback)(function(){if(selectedOption!==undefined){var selectedIndex=options.findIndex(function(option){return option[displayKey]===selectedOption;});if(selectedIndex>=0&&flatListRef.current){flatListRef.current.scrollToIndex({animated:false,index:selectedIndex});}}},[selectedOption,options,displayKey]);var toggleDropdown=function toggleDropdown(){setDropdownVisible(function(prev){return!prev;});if(!dropdownVisible&&options.length===0){setLoading(true);loadOptions(true);}};var handleSearchQueryChange=function handleSearchQueryChange(text){setSearchQuery(text);if(text.trim()===''){setSearchOptions([]);setHasMore(true);setPage(1);}else{setLoading(true);fetchData==null?void 0:fetchData.search==null?void 0:fetchData.search(text,1,pageSize).then(function(fetchedOptions){var uniqueOptions=filterDuplicateOptions(fetchedOptions);setSearchOptions(uniqueOptions);setHasMore(uniqueOptions.length===pageSize);setPage(1);setLoading(false);}).catch(function(error){console.error(error);setSearchOptions([]);setLoading(false);});}};var filterDuplicateOptions=function filterDuplicateOptions(fetchedOptions){var unique=new Map();fetchedOptions.forEach(function(option){if(!unique.has(option[displayKey])){unique.set(option[displayKey],option);}});return Array.from(unique.values());};var handleEndReached=function handleEndReached(){if(hasMore&&!loading&&!loadingMore){loadOptions();}};(0,_react.useEffect)(function(){var handleScroll=function handleScroll(){if(dropdownVisible){measureInputPosition();}};if((0,_functions_utils.isWebPlatform)()){window.addEventListener('scroll',handleScroll,{passive:true});return function(){window.removeEventListener('scroll',handleScroll);};}},[dropdownVisible]);(0,_react.useEffect)(function(){if(dropdownVisible&&options.length>0){var timer=setTimeout(function(){scrollToSelectedOption();},50);return function(){return clearTimeout(timer);};}},[dropdownVisible,selectedOption]);(0,_react.useEffect)(function(){measureInputPosition();},[dropdownVisible]);(0,_react.useEffect)(function(){if(options.length>0){adjustDropdownPosition();}},[options,adjustDropdownPosition]);return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.wrapper,ref:dropdownRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:399,columnNumber:5}},_react.default.createElement(_reactNative.View,{ref:inputContainerRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:400,columnNumber:7}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:selectedOption,onChangeText:onSelect,isDisabled:isDisabled,rightButtons:[_react.default.createElement(_reactNative.TouchableOpacity,{disabled:isDisabled,key:"dropdownToggle",style:[dropdownVisible&&_DropdownInput.styles.iconOpen,{paddingHorizontal:8}],onPress:function onPress(event){event.stopPropagation();toggleDropdown();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:407,columnNumber:13}},_react.default.createElement(_DropdownArrowIcon.DropdownArrowIcon,{style:[_DropdownInput.styles.icon,isDisabled?{opacity:0.5}:{opacity:1}],fill:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:408,columnNumber:15}}))],placeholder:placeholder,onPress:toggleDropdown,title:title,helperText:helperText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:401,columnNumber:9}}))),dropdownVisible&&renderDropdownContent());};var _default=exports.default=DropdownInput;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _InputBase=_interopRequireDefault(require("../InputBase"));var _DropdownInput=require("./DropdownInput.styles");var _DropdownInput2=require("./DropdownInput.constants");var _table_utils=require("../../../helpers/table_utils");var _functions_utils=require("../../../helpers/functions_utils");var _colors=require("../../../styles/colors");var _DropdownArrowIcon=require("../../../assets/images/icons/DropdownArrowIcon");var _icons=require("../../../assets/images/icons");var _excluded=["title","onSelect","fetchData","displayKey","pageSize","staticData","helperText","isDisabled","maxVisibleOptions","noResultsText","searchPlaceholder","placeholder"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/dropdown-input/DropdownInput.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DropdownInput=function DropdownInput(_ref){var title=_ref.title,onSelect=_ref.onSelect,fetchData=_ref.fetchData,displayKey=_ref.displayKey,_ref$pageSize=_ref.pageSize,pageSize=_ref$pageSize===void 0?10:_ref$pageSize,_ref$staticData=_ref.staticData,staticData=_ref$staticData===void 0?[]:_ref$staticData,_ref$helperText=_ref.helperText,helperText=_ref$helperText===void 0?'':_ref$helperText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$maxVisibleOption=_ref.maxVisibleOptions,maxVisibleOptions=_ref$maxVisibleOption===void 0?5:_ref$maxVisibleOption,_ref$noResultsText=_ref.noResultsText,noResultsText=_ref$noResultsText===void 0?'No results':_ref$noResultsText,_ref$searchPlaceholde=_ref.searchPlaceholder,searchPlaceholder=_ref$searchPlaceholde===void 0?'Search':_ref$searchPlaceholde,_ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?'Select an Option':_ref$placeholder,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dropdownRef=(0,_react.useRef)(null);var flatListRef=(0,_react.useRef)(null);var searchInputRef=(0,_react.useRef)(null);var inputContainerRef=(0,_react.useRef)(null);var _useState=(0,_react.useState)(1),_useState2=(0,_slicedToArray2.default)(_useState,2),page=_useState2[0],setPage=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),hasMore=_useState4[0],setHasMore=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),loading=_useState6[0],setLoading=_useState6[1];var _useState7=(0,_react.useState)([]),_useState8=(0,_slicedToArray2.default)(_useState7,2),options=_useState8[0],setOptions=_useState8[1];var _useState9=(0,_react.useState)(new Set()),_useState10=(0,_slicedToArray2.default)(_useState9,2),loadedPages=_useState10[0],setLoadedPages=_useState10[1];var _useState11=(0,_react.useState)(''),_useState12=(0,_slicedToArray2.default)(_useState11,2),searchQuery=_useState12[0],setSearchQuery=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),loadingMore=_useState14[0],setLoadingMore=_useState14[1];var _useState15=(0,_react.useState)(false),_useState16=(0,_slicedToArray2.default)(_useState15,2),isDropdownUp=_useState16[0],setIsDropdownUp=_useState16[1];var _useState17=(0,_react.useState)([]),_useState18=(0,_slicedToArray2.default)(_useState17,2),searchOptions=_useState18[0],setSearchOptions=_useState18[1];var _useState19=(0,_react.useState)(false),_useState20=(0,_slicedToArray2.default)(_useState19,2),dropdownVisible=_useState20[0],setDropdownVisible=_useState20[1];var _useState21=(0,_react.useState)({x:0,y:0,width:0}),_useState22=(0,_slicedToArray2.default)(_useState21,2),inputPosition=_useState22[0],setInputPosition=_useState22[1];var _useState23=(0,_react.useState)(undefined),_useState24=(0,_slicedToArray2.default)(_useState23,2),selectedOption=_useState24[0],setSelectedOption=_useState24[1];var renderSearchInput=function renderSearchInput(searchQuery,onChange,searchPlaceholder){return _react.default.createElement(_reactNative.View,{ref:searchInputRef,style:[_DropdownInput.styles.searchInput,_DropdownInput.styles.searchInputWrapper],__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:7}},_react.default.createElement(_reactNative.TextInput,{style:[_DropdownInput.styles.searchTextInput,(0,_table_utils.disableOutline)()],onChangeText:onChange,value:searchQuery,placeholder:searchPlaceholder,placeholderTextColor:_colors.NEUTRAL_600,underlineColorAndroid:"transparent",onTouchStart:function onTouchStart(event){return event.stopPropagation();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:9}}),(searchQuery==null?void 0:searchQuery.length)>0&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(event){event.stopPropagation();clearSearch();},disabled:isDisabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:11}},_react.default.createElement(_icons.XIcon,{fill:_colors.PRIMARY_100,width:20,height:20,style:[_DropdownInput.styles.cancelIcon,isDisabled?{opacity:0.5}:{opacity:1}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:13}})));};var renderHighlightedText=function renderHighlightedText(fullText,highlightText){if(!highlightText.trim()){return _react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:14}},fullText);}var parts=fullText.split(new RegExp("("+highlightText+")",'gi'));return _react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:7}},parts.map(function(part,index){return part.toLowerCase()===highlightText.toLowerCase()?_react.default.createElement(_reactNative.Text,{key:index,style:_DropdownInput.styles.highlightedText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:13}},part):part;}));};var renderDropdownContent=function renderDropdownContent(){var currentOptions=(searchQuery==null?void 0:searchQuery.length)>0?searchOptions:options;var currentOptionsLength=currentOptions==null?void 0:currentOptions.length;var containerHeight=_DropdownInput2.OPTION_HEIGHT*maxVisibleOptions;return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:"fade",visible:dropdownVisible,onRequestClose:toggleDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:103,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{style:{flex:1},onPress:function onPress(event){var _searchInputRef$curre,_dropdownRef$current;var isSearchArea=(0,_functions_utils.isWebPlatform)()&&!!searchInputRef.current&&(searchInputRef==null?void 0:(_searchInputRef$curre=searchInputRef.current)==null?void 0:_searchInputRef$curre.contains(event.target));var isDropdownArea=(0,_functions_utils.isWebPlatform)()&&!!dropdownRef.current&&(dropdownRef==null?void 0:(_dropdownRef$current=dropdownRef.current)==null?void 0:_dropdownRef$current.contains(event.target));if(!(0,_functions_utils.isWebPlatform)()){setDropdownVisible(false);}if((0,_functions_utils.isWebPlatform)()&&!isSearchArea&&!isDropdownArea){setDropdownVisible(false);}},activeOpacity:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'center'},__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:[{position:'absolute',top:inputPosition.y,left:inputPosition.x,width:inputPosition.width,backgroundColor:'white',borderRadius:8,overflow:'hidden'},_DropdownInput.styles.dropdown],onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:13}},(staticData==null?void 0:staticData.length)===0&&(fetchData==null?void 0:fetchData.search)&&renderSearchInput(searchQuery,handleSearchQueryChange,searchPlaceholder),loading?_react.default.createElement(_reactNative.View,{style:{height:isDropdownUp?containerHeight:'auto'},__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:17}},_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_colors.PRIMARY_100,style:{marginVertical:4},__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:19}})):currentOptionsLength>0?_react.default.createElement(_reactNative.FlatList,{ref:flatListRef,style:{height:isDropdownUp?containerHeight:getDropdownHeight(currentOptionsLength,maxVisibleOptions)},data:currentOptions,renderItem:function renderItem(_ref2){var item=_ref2.item;return renderDropdownOption(item);},keyExtractor:function keyExtractor(item,index){return item.value+"-"+index;},onEndReached:handleEndReached,getItemLayout:function getItemLayout(_,index){return{length:_DropdownInput2.OPTION_HEIGHT,offset:_DropdownInput2.OPTION_HEIGHT*index,index:index};},ListFooterComponent:renderFooter,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:17}}):_react.default.createElement(_reactNative.View,{style:{height:isDropdownUp?containerHeight:'auto'},__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.noResultsText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:19}},noResultsText))))));};var renderSelectedOption=function renderSelectedOption(){if(!selectedOption)return null;return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.selectedOptionContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:7}},_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:9}},selectedOption),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:deselectOption,__self:_this,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:9}},_react.default.createElement(_icons.XIcon,{fill:_colors.NEUTRAL_600,width:20,height:20,style:[_DropdownInput.styles.cancelIcon,isDisabled?{opacity:0.5}:{opacity:1}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:11}})));};var renderDropdownOption=function renderDropdownOption(option){var isSelected=option[displayKey]===selectedOption;return _react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){return handleSelect(option);},style:[_DropdownInput.styles.option,isSelected?_DropdownInput.styles.selectedOption:null],__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:7}},_react.default.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:180,columnNumber:9}},isSelected?renderSelectedOption&&renderSelectedOption():renderHighlightedText&&renderHighlightedText(option[displayKey],searchQuery)));};var loadOptions=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(){var isNewSearch=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;if(loading||loadingMore)return;var currentPage=isNewSearch?1:page+1;if(!isNewSearch&&loadedPages.has(currentPage)){return;}if(isNewSearch){setLoading(true);setHasMore(true);setPage(1);setOptions(staticData);setLoadedPages(new Set([1]));}else{setLoadingMore(true);setPage(currentPage);setLoadedPages(new Set(loadedPages).add(currentPage));}try{var fetchedOptions=[];if((searchQuery==null?void 0:searchQuery.trim().length)>0&&fetchData!=null&&fetchData.search){fetchedOptions=yield fetchData.search(searchQuery,currentPage,pageSize);}else if(fetchData!=null&&fetchData.normal){fetchedOptions=yield fetchData.normal(currentPage,pageSize);}var newOptions=isNewSearch?(0,_toConsumableArray2.default)(fetchedOptions):[].concat((0,_toConsumableArray2.default)(options),(0,_toConsumableArray2.default)(fetchedOptions));if(staticData!=null&&staticData.length){newOptions=staticData;}setOptions(newOptions);setHasMore(fetchedOptions.length===pageSize);}catch(error){console.error(error);}finally{setLoading(false);setLoadingMore(false);}});return function loadOptions(){return _ref3.apply(this,arguments);};}();var measureInputPosition=function measureInputPosition(){inputContainerRef.current.measure(function(x,y,width,height,pageX,pageY){setInputPosition({x:pageX,y:pageY+height,width:width});});};var renderFooter=function renderFooter(){if(!loadingMore)return null;return _react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_colors.PRIMARY_100,style:{marginVertical:4},__self:_this,__source:{fileName:_jsxFileName,lineNumber:242,columnNumber:7}});};var clearSearch=function clearSearch(){setSearchQuery('');setSearchOptions([]);setLoadingMore(false);setHasMore(true);};var adjustDropdownPosition=(0,_react.useCallback)(function(){inputContainerRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var spaceBelow=windowHeight-pageY-height;var dropdownHeight=getDropdownHeight(options.length,maxVisibleOptions);var isDropdownUp=dropdownHeight>spaceBelow;var extraOffsetTop=title?-4:-28;var extraOffsetBottom=helperText?-22:0;if(isDropdownUp){setInputPosition({x:pageX,y:pageY-dropdownHeight-_DropdownInput2.OPTION_HEIGHT+extraOffsetTop,width:width});setIsDropdownUp(true);}else{setInputPosition({x:pageX,y:pageY+height+extraOffsetBottom,width:width});setIsDropdownUp(false);}});},[options.length,maxVisibleOptions,title,dropdownVisible]);var getDropdownHeight=function getDropdownHeight(optionsLength,maxVisibleOptions){var isDropdownUp=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;if(isDropdownUp){return maxVisibleOptions*_DropdownInput2.OPTION_HEIGHT;}else{var numberOfOptions=Math.min(optionsLength,maxVisibleOptions);return numberOfOptions*_DropdownInput2.OPTION_HEIGHT;}};var deselectOption=function deselectOption(){setSelectedOption('');onSelect==null?void 0:onSelect('');};var handleSelect=function handleSelect(option){onSelect==null?void 0:onSelect(option);setSearchQuery('');setDropdownVisible(false);setSelectedOption(option[displayKey]);setHasMore(true);};var scrollToSelectedOption=(0,_react.useCallback)(function(){if(selectedOption!==undefined){var selectedIndex=options.findIndex(function(option){return option[displayKey]===selectedOption;});if(selectedIndex>=0&&flatListRef.current){flatListRef.current.scrollToIndex({animated:false,index:selectedIndex});}}},[selectedOption,options,displayKey]);var toggleDropdown=function toggleDropdown(){setDropdownVisible(function(prev){return!prev;});if(!dropdownVisible&&options.length===0){setLoading(true);loadOptions(true);}};var handleSearchQueryChange=function handleSearchQueryChange(text){setSearchQuery(text);if(text.trim()===''){setSearchOptions([]);setHasMore(true);setPage(1);}else{setLoading(true);fetchData==null?void 0:fetchData.search==null?void 0:fetchData.search(text,1,pageSize).then(function(fetchedOptions){var uniqueOptions=filterDuplicateOptions(fetchedOptions);setSearchOptions(uniqueOptions);setHasMore(uniqueOptions.length===pageSize);setPage(1);setLoading(false);}).catch(function(error){console.error(error);setSearchOptions([]);setLoading(false);});}};var filterDuplicateOptions=function filterDuplicateOptions(fetchedOptions){var unique=new Map();fetchedOptions.forEach(function(option){if(!unique.has(option[displayKey])){unique.set(option[displayKey],option);}});return Array.from(unique.values());};var handleEndReached=function handleEndReached(){if(hasMore&&!loading&&!loadingMore){loadOptions();}};(0,_react.useEffect)(function(){var handleScroll=function handleScroll(){if(dropdownVisible){measureInputPosition();}};if((0,_functions_utils.isWebPlatform)()){window.addEventListener('scroll',handleScroll,{passive:true});return function(){window.removeEventListener('scroll',handleScroll);};}},[dropdownVisible]);(0,_react.useEffect)(function(){if(dropdownVisible&&options.length>0){var timer=setTimeout(function(){scrollToSelectedOption();},50);return function(){return clearTimeout(timer);};}},[dropdownVisible,selectedOption]);(0,_react.useEffect)(function(){measureInputPosition();},[dropdownVisible]);(0,_react.useEffect)(function(){if(options.length>0){adjustDropdownPosition();}},[options,adjustDropdownPosition]);return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.wrapper,ref:dropdownRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:405,columnNumber:5}},_react.default.createElement(_reactNative.View,{ref:inputContainerRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:406,columnNumber:7}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:selectedOption,onChangeText:onSelect,isDisabled:isDisabled,rightButtons:[_react.default.createElement(_reactNative.TouchableOpacity,{disabled:isDisabled,key:"dropdownToggle",style:[dropdownVisible&&_DropdownInput.styles.iconOpen,{paddingHorizontal:8}],onPress:function onPress(event){event.stopPropagation();toggleDropdown();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:413,columnNumber:13}},_react.default.createElement(_DropdownArrowIcon.DropdownArrowIcon,{style:[_DropdownInput.styles.icon,isDisabled?{opacity:0.5}:{opacity:1}],fill:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:414,columnNumber:15}}))],placeholder:placeholder,onPress:toggleDropdown,title:title,helperText:helperText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:407,columnNumber:9}}))),dropdownVisible&&renderDropdownContent());};var _default=exports.default=DropdownInput;

package/dist-web/assets/images/icons/XIcon.d.ts

@@ -3,5 +3,7 @@ import { ColorValue } from 'react-native';
 export interface SvgImageProps {
     style?: any;
     fill?: ColorValue;
+    width?: number;
+    height?: number;
 }
-export declare const XIcon: ({ style, fill }: SvgImageProps) => React.JSX.Element;
+export declare const XIcon: ({ style, width, height, fill, }: SvgImageProps) => React.JSX.Element;

package/dist-web/assets/images/icons/XIcon.js

@@ -4,13 +4,15 @@ import { DEFAULT_COLOR_THEME } from "../../../styles/colors";
 import { sizeSvg } from "../../../helpers/svg_utils";
 export var XIcon = function XIcon(_ref) {
   var style = _ref.style,
+    width = _ref.width,
+    height = _ref.height,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? DEFAULT_COLOR_THEME : _ref$fill;
-  var width = sizeSvg(style === null || style === void 0 ? void 0 : style.width, 24);
-  var height = sizeSvg(style === null || style === void 0 ? void 0 : style.height, 24);
+  var sizeWidth = sizeSvg((style === null || style === void 0 ? void 0 : style.width) || width, 24);
+  var sizeHeight = sizeSvg((style === null || style === void 0 ? void 0 : style.height) || height, 24);
   return /*#__PURE__*/React.createElement(Svg, {
-    width: width,
-    height: height,
+    width: sizeWidth,
+    height: sizeHeight,
     viewBox: "0 0 24 24",
     fill: "none"
   }, /*#__PURE__*/React.createElement(Path, {

package/dist-web/components/inputBase/dropdown-input/DropdownInput.js

@@ -25,7 +25,7 @@ import { disableOutline } from "../../../helpers/table_utils";
 import { isWebPlatform } from "../../../helpers/functions_utils";
 import { NEUTRAL_600, PRIMARY_100 } from "../../../styles/colors";
 import { DropdownArrowIcon } from "../../../assets/images/icons/DropdownArrowIcon";
-import { ClearIcon } from "../../../assets/images/icons";
+import { XIcon } from "../../../assets/images/icons";
 var DropdownInput = function DropdownInput(_ref) {
   var title = _ref.title,
     onSelect = _ref.onSelect,
@@ -83,26 +83,30 @@ var DropdownInput = function DropdownInput(_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     loadingMore = _useState14[0],
     setLoadingMore = _useState14[1];
-  var _useState15 = useState([]),
+  var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    searchOptions = _useState16[0],
-    setSearchOptions = _useState16[1];
-  var _useState17 = useState(false),
+    isDropdownUp = _useState16[0],
+    setIsDropdownUp = _useState16[1];
+  var _useState17 = useState([]),
     _useState18 = _slicedToArray(_useState17, 2),
-    dropdownVisible = _useState18[0],
-    setDropdownVisible = _useState18[1];
-  var _useState19 = useState({
+    searchOptions = _useState18[0],
+    setSearchOptions = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    dropdownVisible = _useState20[0],
+    setDropdownVisible = _useState20[1];
+  var _useState21 = useState({
       x: 0,
       y: 0,
       width: 0
     }),
-    _useState20 = _slicedToArray(_useState19, 2),
-    inputPosition = _useState20[0],
-    setInputPosition = _useState20[1];
-  var _useState21 = useState(undefined),
     _useState22 = _slicedToArray(_useState21, 2),
-    selectedOption = _useState22[0],
-    setSelectedOption = _useState22[1];
+    inputPosition = _useState22[0],
+    setInputPosition = _useState22[1];
+  var _useState23 = useState(undefined),
+    _useState24 = _slicedToArray(_useState23, 2),
+    selectedOption = _useState24[0],
+    setSelectedOption = _useState24[1];
 
   /* UI Rendering Functions */
   // Renders a searchable input field with a clear button for the dropdown
@@ -126,10 +130,10 @@ var DropdownInput = function DropdownInput(_ref) {
         clearSearch();
       },
       disabled: isDisabled
-    }, /*#__PURE__*/React.createElement(ClearIcon, {
+    }, /*#__PURE__*/React.createElement(XIcon, {
       fill: PRIMARY_100,
-      width: 12,
-      height: 12,
+      width: 20,
+      height: 20,
       style: [styles.cancelIcon, isDisabled ? {
         opacity: 0.5
       } : {
@@ -160,6 +164,7 @@ var DropdownInput = function DropdownInput(_ref) {
   var renderDropdownContent = function renderDropdownContent() {
     var currentOptions = (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.length) > 0 ? searchOptions : options;
     var currentOptionsLength = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.length;
+    var containerHeight = OPTION_HEIGHT * maxVisibleOptions;
     return /*#__PURE__*/React.createElement(Modal, {
       transparent: true,
       animationType: "fade",
@@ -200,16 +205,20 @@ var DropdownInput = function DropdownInput(_ref) {
       onStartShouldSetResponder: function onStartShouldSetResponder() {
         return true;
       }
-    }, (staticData === null || staticData === void 0 ? void 0 : staticData.length) === 0 && (fetchData === null || fetchData === void 0 ? void 0 : fetchData.search) && renderSearchInput(searchQuery, handleSearchQueryChange, searchPlaceholder), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    }, (staticData === null || staticData === void 0 ? void 0 : staticData.length) === 0 && (fetchData === null || fetchData === void 0 ? void 0 : fetchData.search) && renderSearchInput(searchQuery, handleSearchQueryChange, searchPlaceholder), loading ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: isDropdownUp ? containerHeight : 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(ActivityIndicator, {
       size: "small",
       color: PRIMARY_100,
       style: {
         marginVertical: 4
       }
-    }) : currentOptionsLength > 0 ? /*#__PURE__*/React.createElement(FlatList, {
+    })) : currentOptionsLength > 0 ? /*#__PURE__*/React.createElement(FlatList, {
       ref: flatListRef,
       style: {
-        height: getDropdownHeight(currentOptionsLength, maxVisibleOptions)
+        height: isDropdownUp ? containerHeight : getDropdownHeight(currentOptionsLength, maxVisibleOptions)
       },
       data: currentOptions,
       renderItem: function renderItem(_ref2) {
@@ -228,9 +237,13 @@ var DropdownInput = function DropdownInput(_ref) {
         };
       },
       ListFooterComponent: renderFooter
-    }) : /*#__PURE__*/React.createElement(Text, {
+    }) : /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: isDropdownUp ? containerHeight : 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
       style: styles.noResultsText
-    }, noResultsText)))));
+    }, noResultsText))))));
   };
 
   // Renders the currently selected option with an option to deselect
@@ -243,10 +256,10 @@ var DropdownInput = function DropdownInput(_ref) {
       ellipsizeMode: "tail"
     }, selectedOption), /*#__PURE__*/React.createElement(TouchableOpacity, {
       onPress: deselectOption
-    }, /*#__PURE__*/React.createElement(ClearIcon, {
+    }, /*#__PURE__*/React.createElement(XIcon, {
       fill: NEUTRAL_600,
-      width: 12,
-      height: 12,
+      width: 20,
+      height: 20,
       style: [styles.cancelIcon, isDisabled ? {
         opacity: 0.5
       } : {
@@ -388,38 +401,38 @@ var DropdownInput = function DropdownInput(_ref) {
   var adjustDropdownPosition = useCallback(function () {
     inputContainerRef.current.measure(function (x, y, width, height, pageX, pageY) {
       var windowHeight = Dimensions.get('window').height;
-      var estimatedDropdownHeight = getDropdownHeight(options.length, maxVisibleOptions);
-      var spaceAbove = pageY;
       var spaceBelow = windowHeight - pageY - height;
-      var extraOffsetTop = title ? -20 : -28;
-      if (estimatedDropdownHeight < spaceBelow) {
+      var dropdownHeight = getDropdownHeight(options.length, maxVisibleOptions);
+      var isDropdownUp = dropdownHeight > spaceBelow;
+      var extraOffsetTop = title ? -4 : -28;
+      var extraOffsetBottom = helperText ? -22 : 0;
+      if (isDropdownUp) {
         setInputPosition({
           x: pageX,
-          y: pageY + height,
-          width: width
-        });
-      } else if (estimatedDropdownHeight < spaceAbove) {
-        setInputPosition({
-          x: pageX,
-          y: pageY - estimatedDropdownHeight - OPTION_HEIGHT + extraOffsetTop,
+          y: pageY - dropdownHeight - OPTION_HEIGHT + extraOffsetTop,
           width: width
         });
+        setIsDropdownUp(true);
       } else {
-        var preferTop = spaceAbove > spaceBelow;
-        var newY = preferTop ? pageY - estimatedDropdownHeight - OPTION_HEIGHT + extraOffsetTop : pageY + height;
         setInputPosition({
           x: pageX,
-          y: newY,
+          y: pageY + height + extraOffsetBottom,
           width: width
         });
+        setIsDropdownUp(false);
       }
     });
   }, [options.length, maxVisibleOptions, title, dropdownVisible]);
 
   // Calculates the dropdown's height based on the number of options and the maximum number of visible options
   var getDropdownHeight = function getDropdownHeight(optionsLength, maxVisibleOptions) {
-    var numberOfOptions = Math.min(optionsLength, maxVisibleOptions);
-    return numberOfOptions * OPTION_HEIGHT;
+    var isDropdownUp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isDropdownUp) {
+      return maxVisibleOptions * OPTION_HEIGHT;
+    } else {
+      var numberOfOptions = Math.min(optionsLength, maxVisibleOptions);
+      return numberOfOptions * OPTION_HEIGHT;
+    }
   };
 
   // Deselects the currently selected option and triggers the onSelect callback with an empty value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.3.141",
+  "version": "1.3.142",
   "private": false,
   "scripts": {
     "android": "react-native run-android",