etendo-ui-library 1.3.113 → 1.3.115

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

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DeleteIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));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/DeleteIcon.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 DeleteIcon=exports.DeleteIcon=function DeleteIcon(_ref){var style=_ref.style,_ref$fill=_ref.fill,fill=_ref$fill===void 0?'#202452':_ref$fill;var width=(0,_svg_utils.sizeSvg)(style==null?void 0:style.width,32);var height=(0,_svg_utils.sizeSvg)(style==null?void 0:style.height,32);return _react.default.createElement(_reactNativeSvg.default,{width:width,height:height,viewBox:"0 0 16 16",fill:"none",style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:9}},_react.default.createElement(_reactNativeSvg.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M12.4711 3.52859C12.7314 3.78894 12.7314 4.21105 12.4711 4.4714L4.47065 12.4714C4.21029 12.7317 3.78816 12.7317 3.52779 12.4714C3.26743 12.2111 3.26743 11.7889 3.52779 11.5286L11.5282 3.52859C11.7886 3.26824 12.2107 3.26824 12.4711 3.52859Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:13}}),_react.default.createElement(_reactNativeSvg.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M3.52779 3.52859C3.78816 3.26824 4.21029 3.26824 4.47065 3.52859L12.4711 11.5286C12.7314 11.7889 12.7314 12.2111 12.4711 12.4714C12.2107 12.7317 11.7886 12.7317 11.5282 12.4714L3.52779 4.4714C3.26743 4.21105 3.26743 3.78894 3.52779 3.52859Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:28,columnNumber:13}}));};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DeleteIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _svg_utils=require("../../../helpers/svg_utils");var _colors=require("../../../styles/colors");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/assets/images/icons/DeleteIcon.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 DeleteIcon=exports.DeleteIcon=function DeleteIcon(_ref){var style=_ref.style,_ref$fill=_ref.fill,fill=_ref$fill===void 0?_colors.PRIMARY_100:_ref$fill;var width=(0,_svg_utils.sizeSvg)(style==null?void 0:style.width,32);var height=(0,_svg_utils.sizeSvg)(style==null?void 0:style.height,32);return _react.default.createElement(_reactNativeSvg.default,{width:width,height:height,viewBox:"0 0 16 16",fill:"none",style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:9}},_react.default.createElement(_reactNativeSvg.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M12.4711 3.52859C12.7314 3.78894 12.7314 4.21105 12.4711 4.4714L4.47065 12.4714C4.21029 12.7317 3.78816 12.7317 3.52779 12.4714C3.26743 12.2111 3.26743 11.7889 3.52779 11.5286L11.5282 3.52859C11.7886 3.26824 12.2107 3.26824 12.4711 3.52859Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:23,columnNumber:13}}),_react.default.createElement(_reactNativeSvg.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M3.52779 3.52859C3.78816 3.26824 4.21029 3.26824 4.47065 3.52859L12.4711 11.5286C12.7314 11.7889 12.7314 12.2111 12.4711 12.4714C12.2107 12.7317 11.7886 12.7317 11.5282 12.4714L3.52779 4.4714C3.26743 4.21105 3.26743 3.78894 3.52779 3.52859Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:13}}));};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageStyle } from 'react-native';
+export interface SvgImageProps {
+    style?: ImageStyle;
+    fill?: string;
+}
+export declare const DropdownArrowIcon: ({ style, fill }: SvgImageProps) => React.JSX.Element;

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

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DropdownArrowIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _svg_utils=require("../../../helpers/svg_utils");var _colors=require("../../../styles/colors");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/assets/images/icons/DropdownArrowIcon.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 DropdownArrowIcon=exports.DropdownArrowIcon=function DropdownArrowIcon(_ref){var style=_ref.style,_ref$fill=_ref.fill,fill=_ref$fill===void 0?_colors.PRIMARY_100:_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.default,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:17,columnNumber:9}},_react.default.createElement(_reactNativeSvg.Path,{d:"M6 9L12 15L18 9",stroke:fill,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",__self:_this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:13}}));};

package/dist-native/components/inputBase/InputBase.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IInputBase } from './InputBase.types';
-declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onSubmit, isLoading, onBlur, keyboardType, }: IInputBase) => React.JSX.Element;
+declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onPress, onSubmit, isLoading, onBlur, keyboardType, }: IInputBase) => React.JSX.Element;
 export default InputBase;

package/dist-native/components/inputBase/InputBase.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _containers=require("../containers");var _button=require("../button");var _CornerDownRightIcon=require("../../assets/images/icons/CornerDownRightIcon");var _InputBase=require("./InputBase.styles");var _colors=require("../../styles/colors");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/InputBase.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 InputBase=function InputBase(_ref){var value=_ref.value,placeholder=_ref.placeholder,title=_ref.title,helperText=_ref.helperText,isDisabled=_ref.isDisabled,isError=_ref.isError,onChangeText=_ref.onChangeText,icon=_ref.icon,rightButtons=_ref.rightButtons,onSubmit=_ref.onSubmit,isLoading=_ref.isLoading,onBlur=_ref.onBlur,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?"default":_ref$keyboardType;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),buttons=_useState4[0],setButtons=_useState4[1];var onFocusChange=function onFocusChange(){setIsFocused(true);};var onBlurChange=function onBlurChange(){setIsFocused(false);onBlur==null?void 0:onBlur();};function determineTextColor(isError,isDisabled){if(isDisabled){return _colors.NEUTRAL_500;}return isError?_colors.DANGER_700:_colors.NEUTRAL_800;}var borderWidth=isFocused?1.5:1;var paddingVertical=13-(borderWidth-1);var paddingHorizontal=12-(borderWidth-1);var borderStyle=function borderStyle(){if(!value&&!isFocused){return _InputBase.styles.containerPlaceholder;}if(isDisabled){return _InputBase.styles.containerIsDisabled;}if(isError){return _InputBase.styles.containerIsError;}};var iconColorStyle=function iconColorStyle(){if(!value){return _InputBase.styles.iconPlaceholder.color;}if(isDisabled){return _InputBase.styles.iconIsDisabled.color;}if(isFocused){return _InputBase.styles.iconIsFocus.color;}if(isError){return _InputBase.styles.iconIsError.color;}};var textColorStyle=function textColorStyle(){if(!value){return _InputBase.styles.textPlaceholder;}if(isDisabled){return _InputBase.styles.textIsDisabled;}if(isFocused){return _InputBase.styles.textIsFocus;}if(isError&&!isFocused){return _InputBase.styles.textIsError;}};var textInputStyle=[_InputBase.styles.textInput,textColorStyle()];if(_reactNative.Platform.OS==='web'){textInputStyle.push({outlineWidth:0});}(0,_react.useEffect)(function(){setButtons([].concat((0,_toConsumableArray2.default)(rightButtons!=null?rightButtons:[]),[onSubmit!==undefined&&_react.default.createElement(_button.Button,{paddingHorizontal:6,typeStyle:"white",onPress:onSubmit,iconLeft:_react.default.createElement(_CornerDownRightIcon.CornerDownRightIcon,{style:_InputBase.styles.iconSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:21}}),disabled:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:9}})]));},[onSubmit,isLoading,rightButtons]);return _react.default.createElement(_react.default.Fragment,null,!!title&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.title,{color:determineTextColor(isError,isDisabled)}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:9}},title),_react.default.createElement(_reactNative.View,{style:[_InputBase.styles.container,borderStyle(),{borderWidth:borderWidth,paddingVertical:paddingVertical,paddingHorizontal:paddingHorizontal}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:7}},!!icon&&_react.default.createElement(_reactNative.TouchableOpacity,{disabled:!icon.onPress||isDisabled,onPress:function onPress(){if(icon.onPress){icon.onPress();}},style:{marginRight:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:138,columnNumber:11}},_react.default.cloneElement(icon.icon,{style:icon.icon.props.style||_InputBase.styles.iconRight,fill:iconColorStyle()})),_react.default.createElement(_reactNative.TextInput,{value:value,onChangeText:onChangeText,placeholder:placeholder,editable:!isDisabled,onFocus:onFocusChange,onBlur:onBlurChange,style:textInputStyle,onSubmitEditing:onSubmit||function(){},keyboardType:keyboardType,__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:9}}),!!buttons&&_react.default.createElement(_containers.ButtonContainer,{style:_InputBase.styles.buttonContainer,buttons:buttons,__self:_this,__source:{fileName:_jsxFileName,lineNumber:164,columnNumber:11}})),!!helperText&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.helperText,{color:determineTextColor(isError,isDisabled)}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:9}},helperText));};var _default=exports.default=InputBase;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _containers=require("../containers");var _button=require("../button");var _CornerDownRightIcon=require("../../assets/images/icons/CornerDownRightIcon");var _InputBase=require("./InputBase.styles");var _colors=require("../../styles/colors");var _table_utils=require("../../helpers/table_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/InputBase.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 InputBase=function InputBase(_ref){var value=_ref.value,placeholder=_ref.placeholder,title=_ref.title,helperText=_ref.helperText,isDisabled=_ref.isDisabled,isError=_ref.isError,onChangeText=_ref.onChangeText,icon=_ref.icon,rightButtons=_ref.rightButtons,onPress=_ref.onPress,onSubmit=_ref.onSubmit,isLoading=_ref.isLoading,onBlur=_ref.onBlur,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?"default":_ref$keyboardType;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),buttons=_useState4[0],setButtons=_useState4[1];var onFocusChange=function onFocusChange(){setIsFocused(true);};var onBlurChange=function onBlurChange(){setIsFocused(false);onBlur==null?void 0:onBlur();};function determineTextColor(isError,isDisabled){if(isDisabled){return _colors.NEUTRAL_500;}return isError?_colors.DANGER_700:_colors.NEUTRAL_800;}var borderWidth=isFocused?1.5:1;var paddingVertical=13-(borderWidth-1);var paddingHorizontal=12-(borderWidth-1);var isEditable=onPress?false:!isDisabled;var borderStyle=function borderStyle(){if(!value&&!isFocused){return _InputBase.styles.containerPlaceholder;}if(isDisabled){return _InputBase.styles.containerIsDisabled;}if(isError){return _InputBase.styles.containerIsError;}};var iconColorStyle=function iconColorStyle(){if(!value){return _InputBase.styles.iconPlaceholder.color;}if(isDisabled){return _InputBase.styles.iconIsDisabled.color;}if(isFocused){return _InputBase.styles.iconIsFocus.color;}if(isError){return _InputBase.styles.iconIsError.color;}};var textColorStyle=function textColorStyle(){if(!value){return _InputBase.styles.textPlaceholder;}if(isDisabled){return _InputBase.styles.textIsDisabled;}if(isFocused){return _InputBase.styles.textIsFocus;}if(isError&&!isFocused){return _InputBase.styles.textIsError;}};var textInputStyle=[_InputBase.styles.textInput,textColorStyle()];if(_reactNative.Platform.OS==='web'){textInputStyle.push({outlineWidth:0});}(0,_react.useEffect)(function(){setButtons([].concat((0,_toConsumableArray2.default)(rightButtons!=null?rightButtons:[]),[onSubmit!==undefined&&_react.default.createElement(_button.Button,{paddingHorizontal:6,typeStyle:"white",onPress:onSubmit,iconLeft:_react.default.createElement(_CornerDownRightIcon.CornerDownRightIcon,{style:_InputBase.styles.iconSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:21}}),disabled:isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:112,columnNumber:9}})]));},[onSubmit,isLoading,rightButtons]);return _react.default.createElement(_react.default.Fragment,null,!!title&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.title,{color:determineTextColor(isError,isDisabled)}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:9}},title),_react.default.createElement(_reactNative.View,{style:[_InputBase.styles.container,borderStyle(),{borderWidth:borderWidth,paddingVertical:paddingVertical,paddingHorizontal:paddingHorizontal}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:130,columnNumber:7}},!!icon&&_react.default.createElement(_reactNative.TouchableOpacity,{disabled:!icon.onPress||isDisabled,onPress:function onPress(){if(icon.onPress){icon.onPress();}},style:_InputBase.styles.icon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:11}},icon),_react.default.createElement(_reactNative.TouchableOpacity,{style:textInputStyle,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{value:value,onPressIn:onPress,onChangeText:onChangeText,placeholder:placeholder,editable:isEditable,onFocus:onFocusChange,onBlur:onBlurChange,style:[textInputStyle,onPress&&(0,_table_utils.cursorPointer)()],onSubmitEditing:onSubmit||function(){},keyboardType:keyboardType,__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:11}})),!!buttons&&_react.default.createElement(_containers.ButtonContainer,{style:_InputBase.styles.buttonContainer,buttons:buttons,__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:11}})),!!helperText&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.helperText,{color:determineTextColor(isError,isDisabled)}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:9}},helperText));};var _default=exports.default=InputBase;

package/dist-native/components/inputBase/InputBase.styles.d.ts

@@ -87,4 +87,7 @@ export declare const styles: {
         gap: number;
         marginLeft: number;
     };
+    icon: {
+        marginRight: number;
+    };
 };

package/dist-native/components/inputBase/InputBase.styles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({title:{fontSize:16,fontWeight:'600',lineHeight:24,letterSpacing:-0.16,color:_colors.NEUTRAL_800},container:{backgroundColor:_colors.NEUTRAL_50,height:48,borderRadius:8,borderColor:_colors.PRIMARY_100,overflow:'hidden',justifyContent:'center',alignItems:'center',flexDirection:'row'},containerIsError:{borderColor:_colors.DANGER_600},containerIsDisabled:{borderColor:_colors.NEUTRAL_400},containerPlaceholder:{borderColor:_colors.NEUTRAL_400},iconPlaceholder:{color:_colors.NEUTRAL_800},iconIsDisabled:{color:_colors.NEUTRAL_500},iconIsError:{color:_colors.NEUTRAL_800},iconIsFocus:{color:_colors.NEUTRAL_1000},textPlaceholder:{color:_colors.NEUTRAL_500},textIsError:{color:_colors.DANGER_700},textIsFocus:{color:_colors.NEUTRAL_800},textIsDisabled:{color:_colors.NEUTRAL_500},textInput:{paddingHorizontal:0,height:48,backgroundColor:_colors.NEUTRAL_50,fontSize:16,fontStyle:'normal',fontWeight:'500',lineHeight:22,letterSpacing:-0.16,color:_colors.PRIMARY_100,flex:1},helperText:{fontSize:14,fontWeight:'500',lineHeight:22,letterSpacing:-0.14},iconLeft:{width:24,height:24,marginRight:8},iconRight:{width:24,height:24,marginLeft:8},iconSize:{width:24,height:24},buttonContainer:{flexDirection:'row',paddingVertical:0,gap:0,marginLeft:5}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({title:{fontSize:16,fontWeight:'600',lineHeight:24,letterSpacing:-0.16,color:_colors.NEUTRAL_800},container:{backgroundColor:_colors.NEUTRAL_50,height:48,borderRadius:8,borderColor:_colors.PRIMARY_100,overflow:'hidden',justifyContent:'center',alignItems:'center',flexDirection:'row'},containerIsError:{borderColor:_colors.DANGER_600},containerIsDisabled:{borderColor:_colors.NEUTRAL_400},containerPlaceholder:{borderColor:_colors.NEUTRAL_400},iconPlaceholder:{color:_colors.NEUTRAL_800},iconIsDisabled:{color:_colors.NEUTRAL_500},iconIsError:{color:_colors.NEUTRAL_800},iconIsFocus:{color:_colors.NEUTRAL_1000},textPlaceholder:{color:_colors.NEUTRAL_500},textIsError:{color:_colors.DANGER_700},textIsFocus:{color:_colors.NEUTRAL_800},textIsDisabled:{color:_colors.NEUTRAL_500},textInput:{paddingHorizontal:0,height:48,backgroundColor:_colors.NEUTRAL_50,fontSize:16,fontStyle:'normal',fontWeight:'500',lineHeight:22,letterSpacing:-0.16,color:_colors.PRIMARY_100,flex:1},helperText:{fontSize:14,fontWeight:'500',lineHeight:22,letterSpacing:-0.14},iconLeft:{width:24,height:24,marginRight:8},iconRight:{width:24,height:24,marginLeft:8},iconSize:{width:24,height:24},buttonContainer:{flexDirection:'row',paddingVertical:0,gap:0,marginLeft:5},icon:{marginRight:8}});

package/dist-native/components/inputBase/InputBase.types.d.ts

@@ -5,7 +5,7 @@ export interface IInputButtons {
 }
 export interface IInputBase {
     helperText?: string;
-    icon?: IInputButtons;
+    icon?: any;
     isDisabled?: boolean;
     isError?: boolean;
     isLoading?: boolean;
@@ -16,5 +16,6 @@ export interface IInputBase {
     rightButtons?: ReactNode[];
     title?: string;
     value?: string;
+    onPress?: () => void;
     keyboardType?: 'default' | 'numeric' | 'email-address' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'number-pad' | 'phone-pad' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | 'visible-password';
 }

package/dist-native/components/inputBase/dropdown-input/DropdownInput.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const OPTION_HEIGHT = 40;
+export declare const DEBOUNCE_DELAY = 1000;

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.OPTION_HEIGHT=exports.DEBOUNCE_DELAY=void 0;var OPTION_HEIGHT=exports.OPTION_HEIGHT=40;var DEBOUNCE_DELAY=exports.DEBOUNCE_DELAY=1000;

package/dist-native/components/inputBase/dropdown-input/DropdownInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IDropdownInput } from './DropdownInput.types';
+declare const DropdownInput: React.FC<IDropdownInput>;
+export default DropdownInput;

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

@@ -0,0 +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 _icons=require("../../../assets/images/icons");var _functions_utils=require("../../../helpers/functions_utils");var _colors=require("../../../styles/colors");var _DropdownArrowIcon=require("../../../assets/images/icons/DropdownArrowIcon");var _DropdownInput2=require("./DropdownInput.constants");var _table_utils=require("../../../helpers/table_utils");var _excluded=["onSelect","fetchData","displayKey","staticData","initialPage","fetchDataBySearch","pageSize","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 onSelect=_ref.onSelect,fetchData=_ref.fetchData,displayKey=_ref.displayKey,_ref$staticData=_ref.staticData,staticData=_ref$staticData===void 0?[]:_ref$staticData,_ref$initialPage=_ref.initialPage,initialPage=_ref$initialPage===void 0?0:_ref$initialPage,fetchDataBySearch=_ref.fetchDataBySearch,_ref$pageSize=_ref.pageSize,size=_ref$pageSize===void 0?10:_ref$pageSize,_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 _useState=(0,_react.useState)(0),_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)(''),_useState10=(0,_slicedToArray2.default)(_useState9,2),searchQuery=_useState10[0],setSearchQuery=_useState10[1];var _useState11=(0,_react.useState)(null),_useState12=(0,_slicedToArray2.default)(_useState11,2),timerId=_useState12[0],setTimerId=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),dropdownVisible=_useState14[0],setDropdownVisible=_useState14[1];var _useState15=(0,_react.useState)(undefined),_useState16=(0,_slicedToArray2.default)(_useState15,2),selectedOption=_useState16[0],setSelectedOption=_useState16[1];var renderSearchInput=function renderSearchInput(searchQuery,onChange,clearSearchInput,searchPlaceholder){return _react.default.createElement(_reactNative.View,{style:[_DropdownInput.styles.searchInput,_DropdownInput.styles.searchInputWrapper],__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:13}},_react.default.createElement(_reactNative.TextInput,{style:[{width:"100%"},(0,_table_utils.disableOutline)()],onChangeText:onChange,value:searchQuery,placeholder:searchPlaceholder,placeholderTextColor:_colors.NEUTRAL_600,underlineColorAndroid:"transparent",__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:17}}),searchQuery.length>0&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:clearSearchInput,__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:21}},_react.default.createElement(_icons.CancelIcon,{fill:_colors.PRIMARY_100,style:_DropdownInput.styles.cancelIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:25}})));};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:71,columnNumber:20}},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:76,columnNumber:13}},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:79,columnNumber:25}},part):part;}));};var renderDropdownContent=function renderDropdownContent(){return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.dropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:9}},fetchDataBySearch&&renderSearchInput(searchQuery,handleSearchQueryChange,clearSearchInput,searchPlaceholder),loading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_colors.PRIMARY_100,style:{marginVertical:4},__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:17}}):options.length>0?_react.default.createElement(_reactNative.FlatList,{style:{height:getDropdownHeight(options.length,maxVisibleOptions)},data:options,renderItem:function renderItem(_ref2){var item=_ref2.item;return renderDropdownOption(item);},keyExtractor:function keyExtractor(item,index){return item.value+"-"+index;},onEndReached:handleEndReached,onEndReachedThreshold:0.75,__self:_this,__source:{fileName:_jsxFileName,lineNumber:101,columnNumber:17}}):_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.noResultsText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:17}},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:120,columnNumber:13}},_react.default.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:121,columnNumber:17}},selectedOption),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:deselectOption,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:17}},_react.default.createElement(_icons.CancelIcon,{fill:_colors.NEUTRAL_600,style:_DropdownInput.styles.cancelIcon,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:21}})));};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:133,columnNumber:13}},_react.default.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:140,columnNumber:17}},isSelected?renderSelectedOption&&renderSelectedOption():renderHighlightedText&&renderHighlightedText(option[displayKey],searchQuery)));};var loadOptions=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(){var reset=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;if(!hasMore&&!reset)return;setLoading(true);var fetchedOptions=[];if(fetchDataBySearch&&searchQuery.length>0||reset||page===initialPage){if(fetchDataBySearch&&searchQuery.length>0){fetchedOptions=yield fetchDataBySearch(searchQuery);}else if(fetchData){fetchedOptions=yield fetchData(page,size);if(fetchedOptions.length<size){setHasMore(false);}}}var combinedOptions=[].concat((0,_toConsumableArray2.default)(staticData),(0,_toConsumableArray2.default)(fetchedOptions.filter(function(option){return!staticData.map(function(o){return JSON.stringify(o);}).includes(JSON.stringify(option));})));var newOptions=searchQuery.length>0?combinedOptions:[].concat((0,_toConsumableArray2.default)(options),(0,_toConsumableArray2.default)(combinedOptions.filter(function(option){return!options.map(function(o){return JSON.stringify(o);}).includes(JSON.stringify(option));})));if(selectedOption&&searchQuery.length===0&&!reset){var selectedOptionIndex=newOptions.findIndex(function(option){return option[displayKey]===selectedOption;});if(selectedOptionIndex!==-1){var selectedOptionItem=newOptions.splice(selectedOptionIndex,1)[0];newOptions=[selectedOptionItem].concat((0,_toConsumableArray2.default)(newOptions));}}setOptions(newOptions);setLoading(false);});return function loadOptions(){return _ref3.apply(this,arguments);};}();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);setDropdownVisible(false);setSelectedOption(option[displayKey]);};var toggleDropdown=function toggleDropdown(){if(dropdownVisible){setDropdownVisible(false);}else{setDropdownVisible(true);setHasMore(true);setSearchQuery('');setPage(initialPage);}};var handleSearchQueryChange=function(){var _ref4=(0,_asyncToGenerator2.default)(function*(text){setSearchQuery(text);setPage(initialPage);setHasMore(true);});return function handleSearchQueryChange(_x){return _ref4.apply(this,arguments);};}();var handleEndReached=function handleEndReached(){if(loading||!hasMore)return;setPage(function(prev){return prev+1;});};var clearSearchInput=function clearSearchInput(){setSearchQuery('');setPage(initialPage);setHasMore(true);};var handleClickOutside=function handleClickOutside(event){if(dropdownRef.current&&dropdownRef.current&&!dropdownRef.current.contains(event.target)&&!dropdownRef.current.contains(event.target)){setDropdownVisible(false);}};(0,_react.useEffect)(function(){return function(){if(timerId){clearTimeout(timerId);}};},[]);(0,_react.useEffect)(function(){if(options.length>0&&searchQuery.length===0){return;}},[dropdownVisible,searchQuery,options.length]);(0,_react.useEffect)(function(){if(searchQuery.length>0){if(timerId)clearTimeout(timerId);var newTimerId=setTimeout(function(){loadOptions(true);},_DropdownInput2.DEBOUNCE_DELAY);setTimerId(newTimerId);}else if(searchQuery.length===0){loadOptions(false);}},[searchQuery]);(0,_react.useEffect)(function(){if((0,_functions_utils.isWebPlatform)()){if(dropdownVisible){document.addEventListener("mousedown",handleClickOutside);}return function(){document.removeEventListener("mousedown",handleClickOutside);};}},[dropdownVisible]);return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.wrapper,ref:dropdownRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:9}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{value:selectedOption,onChangeText:onSelect,rightButtons:[_react.default.createElement(_reactNative.TouchableOpacity,{key:"dropdownToggle",style:dropdownVisible&&_DropdownInput.styles.iconOpen,onPress:function onPress(event){event.stopPropagation();toggleDropdown();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:285,columnNumber:21}},_react.default.createElement(_DropdownArrowIcon.DropdownArrowIcon,{style:_DropdownInput.styles.icon,fill:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:286,columnNumber:25}}))],placeholder:placeholder,onPress:toggleDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:280,columnNumber:13}})),dropdownVisible&&renderDropdownContent());};var _default=exports.default=DropdownInput;

package/dist-native/components/inputBase/dropdown-input/DropdownInput.styles.d.ts

@@ -0,0 +1,78 @@
+export declare const styles: {
+    wrapper: {
+        position: "relative";
+    };
+    icon: {
+        width: number;
+        height: number;
+    };
+    iconOpen: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+    searchInput: {
+        padding: number;
+        borderBottomWidth: number;
+        fontWeight: "500";
+        borderColor: string;
+        width: "100%";
+        paddingRight: number;
+        marginBottom: number | null;
+    };
+    dropdown: {
+        position: "absolute";
+        width: "100%";
+        backgroundColor: string;
+        top: "100%";
+        left: number;
+        marginTop: number;
+        padding: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        gap: number;
+    };
+    option: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    selectedOption: {
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    optionText: {
+        fontSize: number;
+    };
+    highlightedText: {
+        fontWeight: "bold";
+    };
+    searchInputWrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        width: "100%";
+        justifyContent: "space-between";
+    };
+    cancelIcon: {
+        width: number;
+        height: number;
+    };
+    selectedOptionContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        width: "100%";
+    };
+    fullScreen: {
+        position: "absolute";
+        left: number;
+        top: number;
+        backgroundColor: string;
+        zIndex: number;
+    };
+    noResultsText: {
+        textAlign: "center";
+        paddingVertical: number;
+        fontWeight: "600";
+    };
+};

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../../styles/colors");var _functions_utils=require("../../../helpers/functions_utils");var styles=exports.styles=_reactNative.StyleSheet.create({wrapper:{position:'relative'},icon:{width:24,height:24},iconOpen:{transform:[{rotate:'180deg'}]},searchInput:{padding:8,borderBottomWidth:1,fontWeight:'500',borderColor:_colors.NEUTRAL_300,width:"100%",paddingRight:20,marginBottom:!(0,_functions_utils.isWebPlatform)()?8:null},dropdown:{position:'absolute',width:'100%',backgroundColor:'white',top:'100%',left:0,marginTop:6,padding:6,borderWidth:1.5,borderColor:_colors.NEUTRAL_300,borderRadius:8,gap:8},option:{paddingHorizontal:8,paddingVertical:12},selectedOption:{backgroundColor:_colors.TERTIARY_70,borderRadius:8},optionText:{fontSize:14},highlightedText:{fontWeight:'bold'},searchInputWrapper:{flexDirection:'row',alignItems:'center',width:"100%",justifyContent:'space-between'},cancelIcon:{width:12,height:12},selectedOptionContainer:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:"100%"},fullScreen:{position:'absolute',left:0,top:0,backgroundColor:"red",zIndex:2},noResultsText:{textAlign:'center',paddingVertical:4,fontWeight:'600'}});

package/dist-native/components/inputBase/dropdown-input/DropdownInput.types.d.ts

@@ -0,0 +1,13 @@
+import { IInputBase } from "../InputBase.types";
+export interface IDropdownInput extends IInputBase {
+    displayKey: keyof any;
+    fetchData?: (size: number, page: number) => Promise<any[]>;
+    fetchDataBySearch?: (searchQuery: string) => void;
+    initialPage?: number;
+    maxVisibleOptions?: number;
+    noResultsText?: string;
+    onSelect?: (option: any) => void;
+    pageSize?: number;
+    searchPlaceholder?: string;
+    staticData?: any[];
+}

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});

package/dist-native/helpers/table_utils.d.ts

@@ -13,4 +13,5 @@ export declare const paintOddRows: (index: number) => {
 export declare const isTablet: () => boolean;
 export declare const isDeviceTablet: boolean;
 export declare const disableOutline: () => ViewStyle | undefined;
+export declare const cursorPointer: () => ViewStyle | undefined;
 export declare const findPrimaryId: (col: ColumnsMetadata[], data: any) => string;

package/dist-native/helpers/table_utils.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.removeHeaderBorder=exports.paintOddRows=exports.isWeb=exports.isTablet=exports.isOdd=exports.isDeviceTablet=exports.findPrimaryId=exports.disableOutline=void 0;var _colors=require("../styles/colors");var _reactNative=require("react-native");var width=_reactNative.Dimensions.get('screen').width;var height=_reactNative.Dimensions.get('screen').height;var isWeb=exports.isWeb=_reactNative.Platform.OS==='web';var removeHeaderBorder=exports.removeHeaderBorder=function removeHeaderBorder(header){return!header&&{borderTopWidth:0,borderTopLeftRadius:0,borderTopRightRadius:0};};var isOdd=exports.isOdd=function isOdd(index){return index%2!==0;};var paintOddRows=exports.paintOddRows=function paintOddRows(index){return isOdd(index)?{backgroundColor:_colors.QUATERNARY_10}:{backgroundColor:_colors.NEUTRAL_0};};var isTablet=exports.isTablet=function isTablet(){var pixelDensity=_reactNative.PixelRatio.get();var adjustedWidth=width*pixelDensity;var adjustedHeight=height*pixelDensity;if(pixelDensity<1.75&&(adjustedWidth>=1000||adjustedHeight>=1000)){return true;}else{return pixelDensity===2&&(adjustedWidth>=1920||adjustedHeight>=1920);}};var isDeviceTablet=exports.isDeviceTablet=isTablet();var disableOutline=exports.disableOutline=function disableOutline(){if(isWeb){return{outline:'none'};}};var findPrimaryId=exports.findPrimaryId=function findPrimaryId(col,data){var primary='';for(var element of col){if(element.primary===true){if(element.key){primary=data[element.key];break;}}}return primary;};
+Object.defineProperty(exports,"__esModule",{value:true});exports.removeHeaderBorder=exports.paintOddRows=exports.isWeb=exports.isTablet=exports.isOdd=exports.isDeviceTablet=exports.findPrimaryId=exports.disableOutline=exports.cursorPointer=void 0;var _colors=require("../styles/colors");var _reactNative=require("react-native");var width=_reactNative.Dimensions.get('screen').width;var height=_reactNative.Dimensions.get('screen').height;var isWeb=exports.isWeb=_reactNative.Platform.OS==='web';var removeHeaderBorder=exports.removeHeaderBorder=function removeHeaderBorder(header){return!header&&{borderTopWidth:0,borderTopLeftRadius:0,borderTopRightRadius:0};};var isOdd=exports.isOdd=function isOdd(index){return index%2!==0;};var paintOddRows=exports.paintOddRows=function paintOddRows(index){return isOdd(index)?{backgroundColor:_colors.QUATERNARY_10}:{backgroundColor:_colors.NEUTRAL_0};};var isTablet=exports.isTablet=function isTablet(){var pixelDensity=_reactNative.PixelRatio.get();var adjustedWidth=width*pixelDensity;var adjustedHeight=height*pixelDensity;if(pixelDensity<1.75&&(adjustedWidth>=1000||adjustedHeight>=1000)){return true;}else{return pixelDensity===2&&(adjustedWidth>=1920||adjustedHeight>=1920);}};var isDeviceTablet=exports.isDeviceTablet=isTablet();var disableOutline=exports.disableOutline=function disableOutline(){if(isWeb){return{outline:'none'};}};var cursorPointer=exports.cursorPointer=function cursorPointer(){if(isWeb){return{cursor:'pointer'};}};var findPrimaryId=exports.findPrimaryId=function findPrimaryId(col,data){var primary='';for(var element of col){if(element.primary===true){if(element.key){primary=data[element.key];break;}}}return primary;};

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import Svg, { Path } from "react-native-svg-web";
 import { sizeSvg } from "../../../helpers/svg_utils";
+import { PRIMARY_100 } from "../../../styles/colors";
 export var DeleteIcon = function DeleteIcon(_ref) {
   var style = _ref.style,
     _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#202452' : _ref$fill;
+    fill = _ref$fill === void 0 ? PRIMARY_100 : _ref$fill;
   var width = sizeSvg(style === null || style === void 0 ? void 0 : style.width, 32);
   var height = sizeSvg(style === null || style === void 0 ? void 0 : style.height, 32);
   return /*#__PURE__*/React.createElement(Svg, {

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageStyle } from 'react-native';
+export interface SvgImageProps {
+    style?: ImageStyle;
+    fill?: string;
+}
+export declare const DropdownArrowIcon: ({ style, fill }: SvgImageProps) => React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Svg, { Path } from "react-native-svg-web";
+import { sizeSvg } from "../../../helpers/svg_utils";
+import { PRIMARY_100 } from "../../../styles/colors";
+export var DropdownArrowIcon = function DropdownArrowIcon(_ref) {
+  var style = _ref.style,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? PRIMARY_100 : _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);
+  return /*#__PURE__*/React.createElement(Svg, {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: style
+  }, /*#__PURE__*/React.createElement(Path, {
+    d: "M6 9L12 15L18 9",
+    stroke: fill,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist-web/components/inputBase/InputBase.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IInputBase } from './InputBase.types';
-declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onSubmit, isLoading, onBlur, keyboardType, }: IInputBase) => React.JSX.Element;
+declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onPress, onSubmit, isLoading, onBlur, keyboardType, }: IInputBase) => React.JSX.Element;
 export default InputBase;

package/dist-web/components/inputBase/InputBase.js

@@ -15,6 +15,7 @@ import { Button } from "../button";
 import { CornerDownRightIcon } from "../../assets/images/icons/CornerDownRightIcon";
 import { styles } from "./InputBase.styles";
 import { DANGER_700, NEUTRAL_500, NEUTRAL_800 } from "../../styles/colors";
+import { cursorPointer } from "../../helpers/table_utils";
 var InputBase = function InputBase(_ref) {
   var value = _ref.value,
     placeholder = _ref.placeholder,
@@ -25,6 +26,7 @@ var InputBase = function InputBase(_ref) {
     onChangeText = _ref.onChangeText,
     icon = _ref.icon,
     rightButtons = _ref.rightButtons,
+    onPress = _ref.onPress,
     onSubmit = _ref.onSubmit,
     isLoading = _ref.isLoading,
     onBlur = _ref.onBlur,
@@ -54,6 +56,7 @@ var InputBase = function InputBase(_ref) {
   var borderWidth = isFocused ? 1.5 : 1;
   var paddingVertical = 13 - (borderWidth - 1);
   var paddingHorizontal = 12 - (borderWidth - 1);
+  var isEditable = onPress ? false : !isDisabled;
   var borderStyle = function borderStyle() {
     if (!value && !isFocused) {
       return styles.containerPlaceholder;
@@ -129,23 +132,22 @@ var InputBase = function InputBase(_ref) {
         icon.onPress();
       }
     },
-    style: {
-      marginRight: 5
-    }
-  }, /*#__PURE__*/React.cloneElement(icon.icon, {
-    style: icon.icon.props.style || styles.iconRight,
-    fill: iconColorStyle()
-  })), /*#__PURE__*/React.createElement(TextInput, {
+    style: styles.icon
+  }, icon), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: textInputStyle,
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(TextInput, {
     value: value,
+    onPressIn: onPress,
     onChangeText: onChangeText,
     placeholder: placeholder,
-    editable: !isDisabled,
+    editable: isEditable,
     onFocus: onFocusChange,
     onBlur: onBlurChange,
-    style: textInputStyle,
+    style: [textInputStyle, onPress && cursorPointer()],
     onSubmitEditing: onSubmit || function () {},
     keyboardType: keyboardType
-  }), !!buttons && /*#__PURE__*/React.createElement(ButtonContainer, {
+  })), !!buttons && /*#__PURE__*/React.createElement(ButtonContainer, {
     style: styles.buttonContainer,
     buttons: buttons
   })), !!helperText && /*#__PURE__*/React.createElement(Text, {

package/dist-web/components/inputBase/InputBase.styles.d.ts

@@ -87,4 +87,7 @@ export declare const styles: {
         gap: number;
         marginLeft: number;
     };
+    icon: {
+        marginRight: number;
+    };
 };

package/dist-web/components/inputBase/InputBase.styles.js

@@ -88,5 +88,8 @@ export var styles = StyleSheet.create({
     paddingVertical: 0,
     gap: 0,
     marginLeft: 5
+  },
+  icon: {
+    marginRight: 8
   }
 });

package/dist-web/components/inputBase/InputBase.types.d.ts

@@ -5,7 +5,7 @@ export interface IInputButtons {
 }
 export interface IInputBase {
     helperText?: string;
-    icon?: IInputButtons;
+    icon?: any;
     isDisabled?: boolean;
     isError?: boolean;
     isLoading?: boolean;
@@ -16,5 +16,6 @@ export interface IInputBase {
     rightButtons?: ReactNode[];
     title?: string;
     value?: string;
+    onPress?: () => void;
     keyboardType?: 'default' | 'numeric' | 'email-address' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'number-pad' | 'phone-pad' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | 'visible-password';
 }

package/dist-web/components/inputBase/dropdown-input/DropdownInput.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const OPTION_HEIGHT = 40;
+export declare const DEBOUNCE_DELAY = 1000;

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

@@ -0,0 +1,3 @@
+/* Constants */
+export var OPTION_HEIGHT = 40;
+export var DEBOUNCE_DELAY = 1000;

package/dist-web/components/inputBase/dropdown-input/DropdownInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IDropdownInput } from './DropdownInput.types';
+declare const DropdownInput: React.FC<IDropdownInput>;
+export default DropdownInput;

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

@@ -0,0 +1,394 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onSelect", "fetchData", "displayKey", "staticData", "initialPage", "fetchDataBySearch", "pageSize", "maxVisibleOptions", "noResultsText", "searchPlaceholder", "placeholder"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Text, TouchableOpacity, FlatList, ActivityIndicator, TextInput } from "react-native-web";
+import InputBase from "../InputBase";
+import { styles } from "./DropdownInput.styles";
+import { CancelIcon } from "../../../assets/images/icons";
+import { isWebPlatform } from "../../../helpers/functions_utils";
+import { NEUTRAL_600, PRIMARY_100 } from "../../../styles/colors";
+import { DropdownArrowIcon } from "../../../assets/images/icons/DropdownArrowIcon";
+import { DEBOUNCE_DELAY, OPTION_HEIGHT } from "./DropdownInput.constants";
+import { disableOutline } from "../../../helpers/table_utils";
+var DropdownInput = function DropdownInput(_ref) {
+  var onSelect = _ref.onSelect,
+    fetchData = _ref.fetchData,
+    displayKey = _ref.displayKey,
+    _ref$staticData = _ref.staticData,
+    staticData = _ref$staticData === void 0 ? [] : _ref$staticData,
+    _ref$initialPage = _ref.initialPage,
+    initialPage = _ref$initialPage === void 0 ? 0 : _ref$initialPage,
+    fetchDataBySearch = _ref.fetchDataBySearch,
+    _ref$pageSize = _ref.pageSize,
+    size = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+    _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 = _objectWithoutProperties(_ref, _excluded);
+  /* References */
+  var dropdownRef = useRef(null);
+
+  /* States */
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    page = _useState2[0],
+    setPage = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasMore = _useState4[0],
+    setHasMore = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    options = _useState8[0],
+    setOptions = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchQuery = _useState10[0],
+    setSearchQuery = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    timerId = _useState12[0],
+    setTimerId = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dropdownVisible = _useState14[0],
+    setDropdownVisible = _useState14[1];
+  var _useState15 = useState(undefined),
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedOption = _useState16[0],
+    setSelectedOption = _useState16[1];
+
+  /* UI Rendering Functions */
+  // Renders a searchable input field with a clear button for the dropdown
+  var renderSearchInput = function renderSearchInput(searchQuery, onChange, clearSearchInput, searchPlaceholder) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.searchInput, styles.searchInputWrapper]
+    }, /*#__PURE__*/React.createElement(TextInput, {
+      style: [{
+        width: "100%"
+      }, disableOutline()],
+      onChangeText: onChange,
+      value: searchQuery,
+      placeholder: searchPlaceholder,
+      placeholderTextColor: NEUTRAL_600,
+      underlineColorAndroid: "transparent"
+    }), searchQuery.length > 0 && /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: clearSearchInput
+    }, /*#__PURE__*/React.createElement(CancelIcon, {
+      fill: PRIMARY_100,
+      style: styles.cancelIcon
+    })));
+  };
+
+  // Renders text with certain parts highlighted based on the search query
+  var renderHighlightedText = function renderHighlightedText(fullText, highlightText) {
+    if (!highlightText.trim()) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: styles.optionText
+      }, fullText);
+    }
+    var parts = fullText.split(new RegExp("(".concat(highlightText, ")"), 'gi'));
+    return /*#__PURE__*/React.createElement(Text, {
+      style: styles.optionText
+    }, parts.map(function (part, index) {
+      return part.toLowerCase() === highlightText.toLowerCase() ? /*#__PURE__*/React.createElement(Text, {
+        key: index,
+        style: styles.highlightedText
+      }, part) : part;
+    }));
+  };
+
+  // Renders the dropdown's main content, including search input, loading indicator, and options list
+  var renderDropdownContent = function renderDropdownContent() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.dropdown
+    }, fetchDataBySearch && renderSearchInput(searchQuery, handleSearchQueryChange, clearSearchInput, searchPlaceholder), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+      size: "small",
+      color: PRIMARY_100,
+      style: {
+        marginVertical: 4
+      }
+    }) : options.length > 0 ? /*#__PURE__*/React.createElement(FlatList, {
+      style: {
+        height: getDropdownHeight(options.length, maxVisibleOptions)
+      },
+      data: options,
+      renderItem: function renderItem(_ref2) {
+        var item = _ref2.item;
+        return renderDropdownOption(item);
+      },
+      keyExtractor: function keyExtractor(item, index) {
+        return "".concat(item.value, "-").concat(index);
+      },
+      onEndReached: handleEndReached,
+      onEndReachedThreshold: 0.75
+    }) : /*#__PURE__*/React.createElement(Text, {
+      style: styles.noResultsText
+    }, noResultsText));
+  };
+
+  // Renders the currently selected option with an option to deselect
+  var renderSelectedOption = function renderSelectedOption() {
+    if (!selectedOption) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.selectedOptionContainer
+    }, /*#__PURE__*/React.createElement(Text, null, selectedOption), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: deselectOption
+    }, /*#__PURE__*/React.createElement(CancelIcon, {
+      fill: NEUTRAL_600,
+      style: styles.cancelIcon
+    })));
+  };
+
+  // Renders each dropdown option, highlighting the selected one
+  var renderDropdownOption = function renderDropdownOption(option) {
+    var isSelected = option[displayKey] === selectedOption;
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: function onPress() {
+        return handleSelect(option);
+      },
+      style: [styles.option, isSelected ? styles.selectedOption : null]
+    }, /*#__PURE__*/React.createElement(Text, null, isSelected ? renderSelectedOption && renderSelectedOption() : renderHighlightedText && renderHighlightedText(option[displayKey], searchQuery)));
+  };
+
+  /* Functions */
+  // Loads options for the dropdown menu. It fetches data based on the current search query or pagination
+  var loadOptions = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var reset,
+        fetchedOptions,
+        combinedOptions,
+        newOptions,
+        selectedOptionIndex,
+        selectedOptionItem,
+        _args = arguments;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            reset = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+            if (!(!hasMore && !reset)) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            setLoading(true);
+            fetchedOptions = [];
+            if (!(fetchDataBySearch && searchQuery.length > 0 || reset || page === initialPage)) {
+              _context.next = 17;
+              break;
+            }
+            if (!(fetchDataBySearch && searchQuery.length > 0)) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 9;
+            return fetchDataBySearch(searchQuery);
+          case 9:
+            fetchedOptions = _context.sent;
+            _context.next = 17;
+            break;
+          case 12:
+            if (!fetchData) {
+              _context.next = 17;
+              break;
+            }
+            _context.next = 15;
+            return fetchData(page, size);
+          case 15:
+            fetchedOptions = _context.sent;
+            if (fetchedOptions.length < size) {
+              setHasMore(false);
+            }
+          case 17:
+            combinedOptions = [].concat(_toConsumableArray(staticData), _toConsumableArray(fetchedOptions.filter(function (option) {
+              return !staticData.map(function (o) {
+                return JSON.stringify(o);
+              }).includes(JSON.stringify(option));
+            })));
+            newOptions = searchQuery.length > 0 ? combinedOptions : [].concat(_toConsumableArray(options), _toConsumableArray(combinedOptions.filter(function (option) {
+              return !options.map(function (o) {
+                return JSON.stringify(o);
+              }).includes(JSON.stringify(option));
+            })));
+            if (selectedOption && searchQuery.length === 0 && !reset) {
+              selectedOptionIndex = newOptions.findIndex(function (option) {
+                return option[displayKey] === selectedOption;
+              });
+              if (selectedOptionIndex !== -1) {
+                selectedOptionItem = newOptions.splice(selectedOptionIndex, 1)[0];
+                newOptions = [selectedOptionItem].concat(_toConsumableArray(newOptions));
+              }
+            }
+            setOptions(newOptions);
+            setLoading(false);
+          case 22:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadOptions() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  // 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;
+  };
+
+  // Deselects the currently selected option and triggers the onSelect callback with an empty value
+  var deselectOption = function deselectOption() {
+    setSelectedOption('');
+    onSelect === null || onSelect === void 0 || onSelect('');
+  };
+
+  // Handles the selection of an option, updates the selectedOption state, hides the dropdown, and triggers the onSelect callback
+  var handleSelect = function handleSelect(option) {
+    onSelect === null || onSelect === void 0 || onSelect(option);
+    setDropdownVisible(false);
+    setSelectedOption(option[displayKey]);
+  };
+
+  // Toggles the visibility of the dropdown. If opening, it resets the search query, page, options list, and hasMore state
+  var toggleDropdown = function toggleDropdown() {
+    if (dropdownVisible) {
+      setDropdownVisible(false);
+    } else {
+      setDropdownVisible(true);
+      setHasMore(true);
+      setSearchQuery('');
+      setPage(initialPage);
+    }
+  };
+
+  // Handles changes to the search query by updating the searchQuery state, resetting the page, and indicating more items can be loaded
+  var handleSearchQueryChange = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(text) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setSearchQuery(text);
+            setPage(initialPage);
+            setHasMore(true);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleSearchQueryChange(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  // Handles the event when the end of the dropdown list is reached, increments the page if more items can be loaded
+  var handleEndReached = function handleEndReached() {
+    if (loading || !hasMore) return;
+    setPage(function (prev) {
+      return prev + 1;
+    });
+  };
+
+  // Clears the search input, resets the page to the initial value, and sets hasMore to true to indicate more items can be loaded.
+  var clearSearchInput = function clearSearchInput() {
+    setSearchQuery('');
+    setPage(initialPage);
+    setHasMore(true);
+  };
+
+  // Function to close the dropdown if the click was outside
+  var handleClickOutside = function handleClickOutside(event) {
+    if (dropdownRef.current && dropdownRef.current && !dropdownRef.current.contains(event.target) && !dropdownRef.current.contains(event.target)) {
+      setDropdownVisible(false);
+    }
+  };
+
+  /* Side Effects */
+  // Clears the timer when the component is unmounted to prevent memory leaks
+  useEffect(function () {
+    return function () {
+      if (timerId) {
+        clearTimeout(timerId);
+      }
+    };
+  }, []);
+
+  // Triggers loading of options based on the search query or dropdown visibility
+  useEffect(function () {
+    if (options.length > 0 && searchQuery.length === 0) {
+      return;
+    }
+  }, [dropdownVisible, searchQuery, options.length]);
+  useEffect(function () {
+    if (searchQuery.length > 0) {
+      if (timerId) clearTimeout(timerId);
+      var newTimerId = setTimeout(function () {
+        loadOptions(true);
+      }, DEBOUNCE_DELAY);
+      setTimerId(newTimerId);
+    } else if (searchQuery.length === 0) {
+      loadOptions(false);
+    }
+  }, [searchQuery]);
+
+  // Effect to close the dropdown when clicking outside the component if it is open
+  useEffect(function () {
+    if (isWebPlatform()) {
+      if (dropdownVisible) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      return function () {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [dropdownVisible]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.wrapper,
+    ref: dropdownRef
+  }, /*#__PURE__*/React.createElement(InputBase, _extends({}, inputBaseProps, {
+    value: selectedOption,
+    onChangeText: onSelect,
+    rightButtons: [/*#__PURE__*/React.createElement(TouchableOpacity, {
+      key: "dropdownToggle",
+      style: dropdownVisible && styles.iconOpen,
+      onPress: function onPress(event) {
+        event.stopPropagation();
+        toggleDropdown();
+      }
+    }, /*#__PURE__*/React.createElement(DropdownArrowIcon, {
+      style: styles.icon,
+      fill: PRIMARY_100
+    }))],
+    placeholder: placeholder,
+    onPress: toggleDropdown
+  })), dropdownVisible && renderDropdownContent());
+};
+export default DropdownInput;

package/dist-web/components/inputBase/dropdown-input/DropdownInput.styles.d.ts

@@ -0,0 +1,78 @@
+export declare const styles: {
+    wrapper: {
+        position: "relative";
+    };
+    icon: {
+        width: number;
+        height: number;
+    };
+    iconOpen: {
+        transform: {
+            rotate: string;
+        }[];
+    };
+    searchInput: {
+        padding: number;
+        borderBottomWidth: number;
+        fontWeight: "500";
+        borderColor: string;
+        width: "100%";
+        paddingRight: number;
+        marginBottom: number | null;
+    };
+    dropdown: {
+        position: "absolute";
+        width: "100%";
+        backgroundColor: string;
+        top: "100%";
+        left: number;
+        marginTop: number;
+        padding: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        gap: number;
+    };
+    option: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    selectedOption: {
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    optionText: {
+        fontSize: number;
+    };
+    highlightedText: {
+        fontWeight: "bold";
+    };
+    searchInputWrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        width: "100%";
+        justifyContent: "space-between";
+    };
+    cancelIcon: {
+        width: number;
+        height: number;
+    };
+    selectedOptionContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        width: "100%";
+    };
+    fullScreen: {
+        position: "absolute";
+        left: number;
+        top: number;
+        backgroundColor: string;
+        zIndex: number;
+    };
+    noResultsText: {
+        textAlign: "center";
+        paddingVertical: number;
+        fontWeight: "600";
+    };
+};

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

@@ -0,0 +1,81 @@
+import { StyleSheet } from "react-native-web";
+import { NEUTRAL_300, TERTIARY_70 } from "../../../styles/colors";
+import { isWebPlatform } from "../../../helpers/functions_utils";
+export var styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative'
+  },
+  icon: {
+    width: 24,
+    height: 24
+  },
+  iconOpen: {
+    transform: [{
+      rotate: '180deg'
+    }]
+  },
+  searchInput: {
+    padding: 8,
+    borderBottomWidth: 1,
+    fontWeight: '500',
+    borderColor: NEUTRAL_300,
+    width: "100%",
+    paddingRight: 20,
+    marginBottom: !isWebPlatform() ? 8 : null
+  },
+  dropdown: {
+    position: 'absolute',
+    width: '100%',
+    backgroundColor: 'white',
+    top: '100%',
+    left: 0,
+    marginTop: 6,
+    padding: 6,
+    borderWidth: 1.5,
+    borderColor: NEUTRAL_300,
+    borderRadius: 8,
+    gap: 8
+  },
+  option: {
+    paddingHorizontal: 8,
+    paddingVertical: 12
+  },
+  selectedOption: {
+    backgroundColor: TERTIARY_70,
+    borderRadius: 8
+  },
+  optionText: {
+    fontSize: 14
+  },
+  highlightedText: {
+    fontWeight: 'bold'
+  },
+  searchInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: "100%",
+    justifyContent: 'space-between'
+  },
+  cancelIcon: {
+    width: 12,
+    height: 12
+  },
+  selectedOptionContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: "100%"
+  },
+  fullScreen: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    backgroundColor: "red",
+    zIndex: 2
+  },
+  noResultsText: {
+    textAlign: 'center',
+    paddingVertical: 4,
+    fontWeight: '600'
+  }
+});

package/dist-web/components/inputBase/dropdown-input/DropdownInput.types.d.ts

@@ -0,0 +1,13 @@
+import { IInputBase } from "../InputBase.types";
+export interface IDropdownInput extends IInputBase {
+    displayKey: keyof any;
+    fetchData?: (size: number, page: number) => Promise<any[]>;
+    fetchDataBySearch?: (searchQuery: string) => void;
+    initialPage?: number;
+    maxVisibleOptions?: number;
+    noResultsText?: string;
+    onSelect?: (option: any) => void;
+    pageSize?: number;
+    searchPlaceholder?: string;
+    staticData?: any[];
+}

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

@@ -0,0 +1 @@
+export {};

package/dist-web/helpers/table_utils.d.ts

@@ -13,4 +13,5 @@ export declare const paintOddRows: (index: number) => {
 export declare const isTablet: () => boolean;
 export declare const isDeviceTablet: boolean;
 export declare const disableOutline: () => ViewStyle | undefined;
+export declare const cursorPointer: () => ViewStyle | undefined;
 export declare const findPrimaryId: (col: ColumnsMetadata[], data: any) => string;

package/dist-web/helpers/table_utils.js

@@ -44,6 +44,13 @@ export var disableOutline = function disableOutline() {
     };
   }
 };
+export var cursorPointer = function cursorPointer() {
+  if (isWeb) {
+    return {
+      cursor: 'pointer'
+    };
+  }
+};
 export var findPrimaryId = function findPrimaryId(col, data) {
   var primary = '';
   var _iterator = _createForOfIteratorHelper(col),

package/package.json

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