etendo-ui-library 1.3.14 → 1.3.16

package/dist-native/components/datepicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: ({ value, styleField, onChangeText, backgroundColor, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: ({ value, styleField, onChangeText, language, dateFormat, disabled, showCalendar, backgroundColor, }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/dist-native/components/datepicker/DatePicker.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 _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _icons=require("../../assets/images/icons");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.styles");var _DatePicker2=require("./DatePicker.translations");var _DatePicker3=require("./DatePicker.utils");var _button=require("../button");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/datepicker/DatePicker.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 DatePicker=function DatePicker(_ref){var value=_ref.value,styleField=_ref.styleField,onChangeText=_ref.onChangeText,backgroundColor=_ref.backgroundColor,_ref$dateFormat=_ref.dateFormat,dateFormat=_ref$dateFormat===void 0?'MM/DD/YYYY':_ref$dateFormat,_ref$language=_ref.language,language=_ref$language===void 0?'en-US':_ref$language,_ref$showCalendar=_ref.showCalendar,showCalendar=_ref$showCalendar===void 0?true:_ref$showCalendar,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled;var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),hoveredDay=_useState2[0],setHoveredDay=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),isDateValid=_useState4[0],setIsDateValid=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isMonthSelection=_useState6[0],setIsMonthSelection=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isPickerShow=_useState8[0],setIsPickerShow=_useState8[1];var _useState9=(0,_react.useState)(new Date()),_useState10=(0,_slicedToArray2.default)(_useState9,2),selectedDate=_useState10[0],setSelectedDate=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),isInputFocused=_useState12[0],setIsInputFocused=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),isYearSelection=_useState14[0],setIsYearSelection=_useState14[1];var _useState15=(0,_react.useState)('downwards'),_useState16=(0,_slicedToArray2.default)(_useState15,2),calendarDirection=_useState16[0],setCalendarDirection=_useState16[1];var _useState17=(0,_react.useState)(new Date().getMonth()),_useState18=(0,_slicedToArray2.default)(_useState17,2),currentMonth=_useState18[0],setCurrentMonth=_useState18[1];var _useState19=(0,_react.useState)(new Date().getFullYear()),_useState20=(0,_slicedToArray2.default)(_useState19,2),currentYear=_useState20[0],setCurrentYear=_useState20[1];var _useState21=(0,_react.useState)(false),_useState22=(0,_slicedToArray2.default)(_useState21,2),disabledMonthSelection=_useState22[0],setDisabledMonthSelection=_useState22[1];var _useState23=(0,_react.useState)(false),_useState24=(0,_slicedToArray2.default)(_useState23,2),disabledYearSelection=_useState24[0],setDisabledYearSelection=_useState24[1];var _useState25=(0,_react.useState)(new Date(selectedDate)),_useState26=(0,_slicedToArray2.default)(_useState25,2),currentSelectedDate=_useState26[0],setTempSelectedDate=_useState26[1];(0,_react.useEffect)(function(){if(value){var defaultValue=(0,_DatePicker3.parseLocalDateString)(value,dateFormat);var isValid=(0,_DatePicker3.validateDate)(defaultValue,value,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(defaultValue);setCurrentMonth(defaultValue.getMonth());setCurrentYear(defaultValue.getFullYear());}else{setSelectedDate(new Date());setCurrentMonth(new Date().getMonth());setCurrentYear(new Date().getFullYear());}}},[value,dateFormat]);var inputRef=(0,_react.useRef)(null);var monthListRef=(0,_react.useRef)(null);var showMonthSelection=function showMonthSelection(){if(!isMonthSelection)setDisabledYearSelection(true);else setDisabledYearSelection(false);setIsMonthSelection(!isMonthSelection);if(!isMonthSelection&&monthListRef.current){monthListRef.current.scrollToIndex({animated:true,index:currentMonth});}};var adjustDateForMonth=function adjustDateForMonth(year,month,currentSelectedDate){var lastDayOfMonth=new Date(year,month+1,0).getDate();if(currentSelectedDate.getDate()>lastDayOfMonth){return new Date(year,month,lastDayOfMonth);}return new Date(year,month,currentSelectedDate.getDate());};var showYearSelection=function showYearSelection(){if(!isYearSelection)setDisabledMonthSelection(true);else setDisabledMonthSelection(false);setIsYearSelection(!isYearSelection);if(!isYearSelection){var index=(0,_DatePicker3.generateYearList)().indexOf(currentYear);if(index!==-1&&yearListRef.current){yearListRef.current.scrollToIndex({animated:true,index:index});}}};var selectMonth=function selectMonth(monthIndex){setCurrentMonth(monthIndex);setIsMonthSelection(false);var adjustedDate=adjustDateForMonth(currentYear,monthIndex,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var selectYear=function selectYear(year){setCurrentYear(year);setIsYearSelection(false);var adjustedDate=adjustDateForMonth(year,currentMonth,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var renderMonthItem=function renderMonthItem(_ref2){var item=_ref2.item,index=_ref2.index;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,index===currentMonth&&_DatePicker.styles.selectedItem],onPress:function onPress(){selectMonth(index);setDisabledYearSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:180,columnNumber:7}},item));};var renderYearItem=function renderYearItem(_ref3){var item=_ref3.item;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,item===currentYear?_DatePicker.styles.selectedItem:null],onPress:function onPress(){selectYear(item);setDisabledMonthSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:7}},item));};var renderMonthSelection=function renderMonthSelection(){return _react.default.createElement(_reactNative.FlatList,{ref:monthListRef,data:monthNames,renderItem:renderMonthItem,keyExtractor:function keyExtractor(_,index){return index.toString();},style:_DatePicker.styles.list,initialScrollIndex:currentMonth,getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?20*index:43.5,offset:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:5}});};var yearListRef=(0,_react.useRef)(null);var renderYearSelection=function renderYearSelection(){var yearList=(0,_DatePicker3.generateYearList)();return _react.default.createElement(_reactNative.FlatList,{ref:yearListRef,data:yearList,renderItem:renderYearItem,keyExtractor:function keyExtractor(item){return item.toString();},style:_DatePicker.styles.list,initialScrollIndex:yearList.indexOf(currentYear),getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43:30,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43*index:43*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:220,columnNumber:7}});};var changeMonthAndYear=function changeMonthAndYear(newMonth,newYear){setCurrentMonth(newMonth);setCurrentYear(newYear);};var goToPreviousMonth=function goToPreviousMonth(){if(!disabledMonthSelection){currentMonth===0?changeMonthAndYear(11,currentYear-1):changeMonthAndYear(currentMonth-1,currentYear);}};var goToNextMonth=function goToNextMonth(){if(!disabledMonthSelection){currentMonth===11?changeMonthAndYear(0,currentYear+1):changeMonthAndYear(currentMonth+1,currentYear);}};var goToPreviousYear=function goToPreviousYear(){if(!disabledYearSelection)setCurrentYear(currentYear-1);};var goToNextYear=function goToNextYear(){if(!disabledYearSelection)setCurrentYear(currentYear+1);};var daysShort=_DatePicker2.translations[language].daysShort;var monthsShort=_DatePicker2.translations[language].monthsShort;var monthNames=_DatePicker2.translations[language].monthNames;var calculateCalendarDirection=function calculateCalendarDirection(){if(inputRef.current){inputRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var spaceBelow=windowHeight-pageY-height;if(spaceBelow<_DatePicker.CALENDAR_HEIGHT){setCalendarDirection('upwards');}else{setCalendarDirection('downwards');}});}};var showPicker=function showPicker(){if(!disabled){calculateCalendarDirection();if(isMonthSelection)setIsMonthSelection(false);if(isYearSelection)setIsYearSelection(false);if(disabledMonthSelection)setDisabledMonthSelection(false);if(disabledYearSelection)setDisabledYearSelection(false);setIsPickerShow(!isPickerShow);if(!isPickerShow&&selectedDate){setCurrentMonth(selectedDate.getMonth());setCurrentYear(selectedDate.getFullYear());}}};var onDateSelected=function onDateSelected(date){var formattedDate=(0,_DatePicker3.formatterDate)(date,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(date,formattedDate,dateFormat);setTempSelectedDate(date);setSelectedDate(date);setIsDateValid(isValidDate);if(isValidDate&&onChangeText){onChangeText(formattedDate);}};var onAccept=function onAccept(){if(selectedDate){onChangeText((0,_DatePicker3.formatterDate)(selectedDate,dateFormat));}setIsPickerShow(false);};var onCancel=function onCancel(){setSelectedDate(currentSelectedDate);setIsPickerShow(false);};var handleTextInputChange=function handleTextInputChange(text){var processedText=text.replace(/[^0-9]/g,'').slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}onChangeText(processedText);if(processedText.length===10){var dateObject=(0,_DatePicker3.parseLocalDateString)(processedText,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(dateObject,processedText,dateFormat);if(isValidDate){setSelectedDate(dateObject);setIsDateValid(true);}else{setIsDateValid(false);}}else{setIsDateValid(true);setSelectedDate(undefined);}};var formatInputText=function formatInputText(text){var processedText=text.replace(/[^0-9]/g,'');processedText=processedText.slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}return processedText;};var handleBlur=function handleBlur(){var formattedText=formatInputText(value);var dateObject=(0,_DatePicker3.parseLocalDateString)(formattedText,dateFormat);var isValid=(0,_DatePicker3.validateDate)(dateObject,formattedText,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(dateObject);}else{setSelectedDate(undefined);}};var renderDayItem=function renderDayItem(_ref4){var date=_ref4.date,isCurrentMonth=_ref4.isCurrentMonth;var isToday=date.getDate()===new Date().getDate()&&date.getMonth()===new Date().getMonth()&&date.getFullYear()===new Date().getFullYear();var isSelectedDate=isCurrentMonth&&date.getDate()===new Date(selectedDate).getDate()&&date.getMonth()===new Date(selectedDate).getMonth()&&date.getFullYear()===new Date(selectedDate).getFullYear();var notCurrentMonthStyle={color:_colors.NEUTRAL_400};var isPartOfCurrentMonth=date.getMonth()===currentMonth;var dayKey=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();var isHovered=hoveredDay===dayKey&&!isSelectedDate;var isTodayHovered=isToday&&isHovered;return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){return isPartOfCurrentMonth&&onDateSelected(date);},onHoverIn:function onHoverIn(){return setHoveredDay(dayKey);},onHoverOut:function onHoverOut(){return setHoveredDay(null);},style:[_DatePicker.styles.dayItem,isPartOfCurrentMonth?null:notCurrentMonthStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:444,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.dayItemText,isSelectedDate?_DatePicker.styles.selectedDayBackground:{},isToday&&!isSelectedDate?_DatePicker.styles.currentDayBorder:{},!isCurrentMonth?notCurrentMonthStyle:{},isHovered?_DatePicker.styles.dayItemTextHover:{},isTodayHovered?_DatePicker.styles.todayItemTextHover:{}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:452,columnNumber:9}},_react.default.createElement(_reactNative.Text,{style:[_DatePicker.styles.dayText,isSelectedDate?_DatePicker.styles.selectedDayText:{},!isCurrentMonth?notCurrentMonthStyle:{},isPartOfCurrentMonth?null:notCurrentMonthStyle,isTodayHovered&&{color:_colors.PRIMARY_100}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:461,columnNumber:11}},date.getDate())));};var renderCalendar=function renderCalendar(){var daysInMonth=(0,_DatePicker3.buildMonth)(currentYear,currentMonth);return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.calendarContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:481,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:482,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:484,columnNumber:13}},day);})),_react.default.createElement(_reactNative.FlatList,{data:daysInMonth,numColumns:7,renderItem:function renderItem(_ref5){var item=_ref5.item;return item&&renderDayItem({date:item,isCurrentMonth:true});},keyExtractor:function keyExtractor(_,index){return index.toString();},showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:489,columnNumber:9}}));};var PlatformComponent=_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?_reactNative.View:_reactNative.Modal;return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:506,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.inputContainerWrapper,(isPickerShow||isInputFocused)&&_DatePicker.styles.inputWrapperFocused,!isDateValid&&_DatePicker.styles.invalidDateWrapperFocused],__self:_this,__source:{fileName:_jsxFileName,lineNumber:507,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper,{backgroundColor:backgroundColor}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:513,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput,{backgroundColor:backgroundColor}],value:value,placeholder:(0,_DatePicker3.getPlaceholderDateFormat)(dateFormat),placeholderTextColor:_colors.NEUTRAL_600,editable:!disabled,onChangeText:handleTextInputChange,focusable:true,onFocus:function onFocus(){return!disabled&&setIsInputFocused(true);},onBlur:function onBlur(){setIsInputFocused(false),!disabled&&handleBlur();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:521,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:541,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:disabled&&{opacity:0.2},width:25,__self:_this,__source:{fileName:_jsxFileName,lineNumber:542,columnNumber:15}})))),_react.default.createElement(PlatformComponent,(0,_extends2.default)({},_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?{style:{display:isPickerShow?'flex':'none'}}:{transparent:true,visible:isPickerShow,onRequestClose:showPicker},{__self:_this,__source:{fileName:_jsxFileName,lineNumber:548,columnNumber:7}}),_react.default.createElement(_reactNative.TouchableOpacity,{style:!(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web)&&_DatePicker.styles.modalContainer,activeOpacity:1,onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:560,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.modalContent,{width:_DatePicker3.MODAL_CONTENT_WIDTH},calendarDirection==='downwards'?null:_DatePicker.styles.modalContentUpwards],onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:564,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.header,(isMonthSelection||isYearSelection)&&{borderBottomWidth:1,borderBottomColor:_colors.NEUTRAL_300}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:573,columnNumber:13}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledMonthSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledMonthSelection,onPress:showMonthSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:581,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:588,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:589,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:591,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:592,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:595,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:604,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:605,columnNumber:19}}))),_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledYearSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledYearSelection,onPress:showYearSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:609,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:616,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:617,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:619,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:620,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:621,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:630,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:631,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:641,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:642,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:648,columnNumber:15}}))))));};var _default=exports.default=DatePicker;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _icons=require("../../assets/images/icons");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.styles");var _DatePicker2=require("./DatePicker.translations");var _DatePicker3=require("./DatePicker.utils");var _button=require("../button");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/datepicker/DatePicker.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 DatePicker=function DatePicker(_ref){var value=_ref.value,styleField=_ref.styleField,onChangeText=_ref.onChangeText,_ref$language=_ref.language,language=_ref$language===void 0?'en-US':_ref$language,_ref$dateFormat=_ref.dateFormat,dateFormat=_ref$dateFormat===void 0?'MM/DD/YYYY':_ref$dateFormat,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$showCalendar=_ref.showCalendar,showCalendar=_ref$showCalendar===void 0?true:_ref$showCalendar,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_50:_ref$backgroundColor;var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),hoveredDay=_useState2[0],setHoveredDay=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),isDateValid=_useState4[0],setIsDateValid=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isMonthSelection=_useState6[0],setIsMonthSelection=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isPickerShow=_useState8[0],setIsPickerShow=_useState8[1];var _useState9=(0,_react.useState)(new Date()),_useState10=(0,_slicedToArray2.default)(_useState9,2),selectedDate=_useState10[0],setSelectedDate=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),isInputFocused=_useState12[0],setIsInputFocused=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),isYearSelection=_useState14[0],setIsYearSelection=_useState14[1];var _useState15=(0,_react.useState)(new Date().getMonth()),_useState16=(0,_slicedToArray2.default)(_useState15,2),currentMonth=_useState16[0],setCurrentMonth=_useState16[1];var _useState17=(0,_react.useState)(new Date().getFullYear()),_useState18=(0,_slicedToArray2.default)(_useState17,2),currentYear=_useState18[0],setCurrentYear=_useState18[1];var _useState19=(0,_react.useState)(false),_useState20=(0,_slicedToArray2.default)(_useState19,2),disabledMonthSelection=_useState20[0],setDisabledMonthSelection=_useState20[1];var _useState21=(0,_react.useState)(false),_useState22=(0,_slicedToArray2.default)(_useState21,2),disabledYearSelection=_useState22[0],setDisabledYearSelection=_useState22[1];var _useState23=(0,_react.useState)(new Date(selectedDate)),_useState24=(0,_slicedToArray2.default)(_useState23,2),currentSelectedDate=_useState24[0],setTempSelectedDate=_useState24[1];var _useState25=(0,_react.useState)({top:0,bottom:0}),_useState26=(0,_slicedToArray2.default)(_useState25,2),modalPosition=_useState26[0],setModalPosition=_useState26[1];(0,_react.useEffect)(function(){if(value){var defaultValue=(0,_DatePicker3.parseLocalDateString)(value,dateFormat);var isValid=(0,_DatePicker3.validateDate)(defaultValue,value,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(defaultValue);setCurrentMonth(defaultValue.getMonth());setCurrentYear(defaultValue.getFullYear());}else{setSelectedDate(new Date());setCurrentMonth(new Date().getMonth());setCurrentYear(new Date().getFullYear());}}},[value,dateFormat]);(0,_react.useEffect)(function(){var handleScroll=function handleScroll(){if(isPickerShow){setIsPickerShow(false);}};if(_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&window&&typeof window!=='undefined'){window.addEventListener('scroll',handleScroll,true);}},[isPickerShow]);var inputRef=(0,_react.useRef)(null);var monthListRef=(0,_react.useRef)(null);var showMonthSelection=function showMonthSelection(){if(!isMonthSelection)setDisabledYearSelection(true);else setDisabledYearSelection(false);setIsMonthSelection(!isMonthSelection);if(!isMonthSelection&&monthListRef.current){monthListRef.current.scrollToIndex({animated:true,index:currentMonth});}};var adjustDateForMonth=function adjustDateForMonth(year,month,currentSelectedDate){var lastDayOfMonth=new Date(year,month+1,0).getDate();if(currentSelectedDate.getDate()>lastDayOfMonth){return new Date(year,month,lastDayOfMonth);}return new Date(year,month,currentSelectedDate.getDate());};var showYearSelection=function showYearSelection(){if(!isYearSelection)setDisabledMonthSelection(true);else setDisabledMonthSelection(false);setIsYearSelection(!isYearSelection);if(!isYearSelection){var index=(0,_DatePicker3.generateYearList)().indexOf(currentYear);if(index!==-1&&yearListRef.current){yearListRef.current.scrollToIndex({animated:true,index:index});}}};var selectMonth=function selectMonth(monthIndex){setCurrentMonth(monthIndex);setIsMonthSelection(false);var adjustedDate=adjustDateForMonth(currentYear,monthIndex,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var selectYear=function selectYear(year){setCurrentYear(year);setIsYearSelection(false);var adjustedDate=adjustDateForMonth(year,currentMonth,selectedDate);setSelectedDate(adjustedDate);if(onChangeText){onChangeText((0,_DatePicker3.formatterDate)(adjustedDate,dateFormat));}};var renderMonthItem=function renderMonthItem(_ref2){var item=_ref2.item,index=_ref2.index;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,index===currentMonth&&_DatePicker.styles.selectedItem],onPress:function onPress(){selectMonth(index);setDisabledYearSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:206,columnNumber:7}},item));};var renderYearItem=function renderYearItem(_ref3){var item=_ref3.item;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.item,item===currentYear?_DatePicker.styles.selectedItem:null],onPress:function onPress(){selectYear(item);setDisabledMonthSelection(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:7}},item));};var renderMonthSelection=function renderMonthSelection(){return _react.default.createElement(_reactNative.FlatList,{ref:monthListRef,data:monthNames,renderItem:renderMonthItem,keyExtractor:function keyExtractor(_,index){return index.toString();},style:_DatePicker.styles.list,initialScrollIndex:currentMonth,getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?20*index:43.5,offset:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:5}});};var yearListRef=(0,_react.useRef)(null);var renderYearSelection=function renderYearSelection(){var yearList=(0,_DatePicker3.generateYearList)();return _react.default.createElement(_reactNative.FlatList,{ref:yearListRef,data:yearList,renderItem:renderYearItem,keyExtractor:function keyExtractor(item){return item.toString();},style:_DatePicker.styles.list,initialScrollIndex:yearList.indexOf(currentYear),getItemLayout:function getItemLayout(_,index){return{length:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43:30,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?43*index:43*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:246,columnNumber:7}});};var changeMonthAndYear=function changeMonthAndYear(newMonth,newYear){setCurrentMonth(newMonth);setCurrentYear(newYear);};var goToPreviousMonth=function goToPreviousMonth(){if(!disabledMonthSelection){currentMonth===0?changeMonthAndYear(11,currentYear-1):changeMonthAndYear(currentMonth-1,currentYear);}};var goToNextMonth=function goToNextMonth(){if(!disabledMonthSelection){currentMonth===11?changeMonthAndYear(0,currentYear+1):changeMonthAndYear(currentMonth+1,currentYear);}};var goToPreviousYear=function goToPreviousYear(){if(!disabledYearSelection)setCurrentYear(currentYear-1);};var goToNextYear=function goToNextYear(){if(!disabledYearSelection)setCurrentYear(currentYear+1);};var daysShort=_DatePicker2.translations[language].daysShort;var monthsShort=_DatePicker2.translations[language].monthsShort;var monthNames=_DatePicker2.translations[language].monthNames;var calculateCalendarDirection=function calculateCalendarDirection(){if(inputRef.current){inputRef.current.measure(function(x,y,width,height,pageX,pageY){var windowHeight=_reactNative.Dimensions.get('window').height;var spaceBelow=windowHeight-pageY-height;var modalLeftPosition=pageX+width-_DatePicker3.MODAL_CONTENT_WIDTH;modalLeftPosition=Math.max(modalLeftPosition,0);if(spaceBelow>=_DatePicker.CALENDAR_HEIGHT){setModalPosition({top:pageY+height,left:modalLeftPosition});}else{setModalPosition({top:pageY-_DatePicker.CALENDAR_HEIGHT-_DatePicker3.MODAL_CONTENT_TOP_POSITION,left:modalLeftPosition});}});}};var showPicker=function showPicker(){if(!disabled){calculateCalendarDirection();if(isMonthSelection)setIsMonthSelection(false);if(isYearSelection)setIsYearSelection(false);if(disabledMonthSelection)setDisabledMonthSelection(false);if(disabledYearSelection)setDisabledYearSelection(false);setIsPickerShow(!isPickerShow);if(!isPickerShow&&selectedDate){setCurrentMonth(selectedDate.getMonth());setCurrentYear(selectedDate.getFullYear());}}};var onDateSelected=function onDateSelected(date){var formattedDate=(0,_DatePicker3.formatterDate)(date,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(date,formattedDate,dateFormat);setTempSelectedDate(date);setSelectedDate(date);setIsDateValid(isValidDate);if(isValidDate&&onChangeText){onChangeText(formattedDate);}};var onAccept=function onAccept(){if(selectedDate){onChangeText((0,_DatePicker3.formatterDate)(selectedDate,dateFormat));}setIsPickerShow(false);};var onCancel=function onCancel(){setSelectedDate(currentSelectedDate);setIsPickerShow(false);};var handleTextInputChange=function handleTextInputChange(text){var processedText=text.replace(/[^0-9]/g,'').slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}onChangeText(processedText);if(processedText.length===10){var dateObject=(0,_DatePicker3.parseLocalDateString)(processedText,dateFormat);var isValidDate=(0,_DatePicker3.validateDate)(dateObject,processedText,dateFormat);if(isValidDate){setSelectedDate(dateObject);setIsDateValid(true);}else{setIsDateValid(false);}}else{setIsDateValid(true);setSelectedDate(undefined);}};var formatInputText=function formatInputText(text){var processedText=text.replace(/[^0-9]/g,'');processedText=processedText.slice(0,8);if(processedText.length>2){processedText=processedText.slice(0,2)+'/'+processedText.slice(2);}if(processedText.length>5){processedText=processedText.slice(0,5)+'/'+processedText.slice(5);}return processedText;};var handleBlur=function handleBlur(){var formattedText=formatInputText(value);var dateObject=(0,_DatePicker3.parseLocalDateString)(formattedText,dateFormat);var isValid=(0,_DatePicker3.validateDate)(dateObject,formattedText,dateFormat);setIsDateValid(isValid);if(isValid){setSelectedDate(dateObject);}else{setSelectedDate(undefined);}};var renderDayItem=function renderDayItem(_ref4){var date=_ref4.date,isCurrentMonth=_ref4.isCurrentMonth;var isToday=date.getDate()===new Date().getDate()&&date.getMonth()===new Date().getMonth()&&date.getFullYear()===new Date().getFullYear();var isSelectedDate=isCurrentMonth&&date.getDate()===new Date(selectedDate).getDate()&&date.getMonth()===new Date(selectedDate).getMonth()&&date.getFullYear()===new Date(selectedDate).getFullYear();var notCurrentMonthStyle={color:_colors.NEUTRAL_400};var isPartOfCurrentMonth=date.getMonth()===currentMonth;var dayKey=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();var isHovered=hoveredDay===dayKey&&!isSelectedDate;var isTodayHovered=isToday&&isHovered;return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){return isPartOfCurrentMonth&&onDateSelected(date);},onHoverIn:function onHoverIn(){return setHoveredDay(dayKey);},onHoverOut:function onHoverOut(){return setHoveredDay(null);},style:[_DatePicker.styles.dayItem,isPartOfCurrentMonth?null:notCurrentMonthStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:475,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.dayItemText,isSelectedDate?_DatePicker.styles.selectedDayBackground:{},isToday&&!isSelectedDate?_DatePicker.styles.currentDayBorder:{},!isCurrentMonth?notCurrentMonthStyle:{},isHovered?_DatePicker.styles.dayItemTextHover:{},isTodayHovered?_DatePicker.styles.todayItemTextHover:{}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:483,columnNumber:9}},_react.default.createElement(_reactNative.Text,{style:[_DatePicker.styles.dayText,isSelectedDate?_DatePicker.styles.selectedDayText:{},!isCurrentMonth?notCurrentMonthStyle:{},isPartOfCurrentMonth?null:notCurrentMonthStyle,isTodayHovered&&{color:_colors.PRIMARY_100}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:492,columnNumber:11}},date.getDate())));};var renderCalendar=function renderCalendar(){var daysInMonth=(0,_DatePicker3.buildMonth)(currentYear,currentMonth);return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.calendarContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:512,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:513,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:515,columnNumber:13}},day);})),_react.default.createElement(_reactNative.FlatList,{data:daysInMonth,numColumns:7,renderItem:function renderItem(_ref5){var item=_ref5.item;return item&&renderDayItem({date:item,isCurrentMonth:true});},keyExtractor:function keyExtractor(_,index){return index.toString();},showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:520,columnNumber:9}}));};return _react.default.createElement(_reactNative.View,{style:_DatePicker.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:534,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.inputContainerWrapper,(isPickerShow||isInputFocused)&&_DatePicker.styles.inputWrapperFocused,!isDateValid&&_DatePicker.styles.invalidDateWrapperFocused],__self:_this,__source:{fileName:_jsxFileName,lineNumber:535,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper,{backgroundColor:backgroundColor}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:541,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput,{backgroundColor:backgroundColor}],value:value,placeholder:(0,_DatePicker3.getPlaceholderDateFormat)(dateFormat),placeholderTextColor:_colors.NEUTRAL_600,editable:!disabled,onChangeText:handleTextInputChange,focusable:true,onFocus:function onFocus(){return!disabled&&setIsInputFocused(true);},onBlur:function onBlur(){setIsInputFocused(false),!disabled&&handleBlur();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:549,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:569,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:disabled&&{opacity:0.2},width:25,__self:_this,__source:{fileName:_jsxFileName,lineNumber:570,columnNumber:15}})))),_react.default.createElement(_reactNative.Modal,{animationType:"fade",transparent:true,visible:isPickerShow,onRequestClose:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:576,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_DatePicker.styles.modalContainer,activeOpacity:1,onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:581,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.modalContent,{width:_DatePicker3.MODAL_CONTENT_WIDTH},{position:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'absolute':'relative',top:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&modalPosition.top+_DatePicker3.MODAL_POSITION_TOP,left:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web&&modalPosition.left}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:585,columnNumber:11}},_react.default.createElement(_reactNative.View,{style:[_DatePicker.styles.header,(isMonthSelection||isYearSelection)&&{borderBottomWidth:1,borderBottomColor:_colors.NEUTRAL_300}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:598,columnNumber:13}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledMonthSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledMonthSelection,onPress:showMonthSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:606,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:613,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:614,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:616,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:617,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:620,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:629,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:630,columnNumber:19}}))),_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DatePicker.styles.monthAndYearContainer,disabledYearSelection&&_DatePicker.styles.disabledButtonStyle],disabled:disabledYearSelection,onPress:showYearSelection,__self:_this,__source:{fileName:_jsxFileName,lineNumber:634,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:641,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:642,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:644,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:645,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:646,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:655,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:656,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:666,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:667,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:673,columnNumber:15}}))))));};var _default=exports.default=DatePicker;

package/dist-native/components/datepicker/DatePicker.styles.d.ts

@@ -19,7 +19,6 @@ export declare const styles: {
         justifyContent: "space-between";
         alignItems: "center";
         paddingHorizontal: number;
-        backgroundColor: string;
         height: number;
     };
     invalidDateInputWrapper: {
@@ -35,10 +34,11 @@ export declare const styles: {
         flex: number;
     };
     inputContainerWrapper: {
-        backgroundColor: string;
-        padding: number;
         borderRadius: number;
         height: number | undefined;
+        borderWidth: number;
+        margin: number;
+        borderColor: string;
     };
     monthAndYearContainer: {
         flexDirection: "row";
@@ -66,13 +66,9 @@ export declare const styles: {
     modalContent: {
         backgroundColor: string;
         borderRadius: number;
-        elevation: number;
-        borderWidth: number;
         borderColor: string;
-        alignSelf: "center" | "flex-end";
+        alignSelf: "center" | undefined;
         width: 360 | "90%";
-        position: "absolute";
-        zIndex: number;
         marginTop: number | undefined;
         boxShadow: string | undefined;
     };
@@ -108,6 +104,7 @@ export declare const styles: {
     calendarContainer: {
         height: number;
         paddingHorizontal: number;
+        backgroundColor: string;
     };
     dayItem: {
         width: "14.28%";
@@ -177,13 +174,11 @@ export declare const styles: {
         width: "100%";
         flexDirection: "row";
         justifyContent: "flex-end";
-        marginTop: number;
         gap: number;
         padding: number;
-    };
-    modalContentUpwards: {
-        position: "absolute";
-        boxShadow: string;
+        backgroundColor: string;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
     };
     disabledButtonStyle: {
         opacity: number;

package/dist-native/components/datepicker/DatePicker.styles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.CALENDAR_HEIGHT=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.utils");var CALENDAR_HEIGHT=exports.CALENDAR_HEIGHT=260;var styles=exports.styles=_reactNative.StyleSheet.create({container:{flex:1},datePickerButton:{borderWidth:1,borderColor:'gray',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:12,borderRadius:4,backgroundColor:'white',flexDirection:'row',justifyContent:'space-between',alignItems:'center'},inputWrapper:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingHorizontal:16,backgroundColor:_colors.NEUTRAL_50,height:40},invalidDateInputWrapper:{borderColor:_colors.DESTRUCTIVE_100},disabledInput:{opacity:0.2},datePickerInput:{textAlign:'left',fontSize:18,outlineStyle:'none',flex:1},inputContainerWrapper:{backgroundColor:'transparent',padding:5,borderRadius:8,height:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?undefined:50},monthAndYearContainer:{flexDirection:'row',alignItems:'center',gap:8},monthAndYearContent:{flexDirection:'row',marginHorizontal:12,alignItems:'center',gap:8},inputWrapperFocused:{backgroundColor:_colors.QUATERNARY_50},invalidDateWrapperFocused:{backgroundColor:_colors.DESTRUCTIVE_10},modalContainer:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0,0,0,0.5)'},modalContent:{backgroundColor:_colors.NEUTRAL_50,borderRadius:8,elevation:5,borderWidth:1,borderColor:_colors.NEUTRAL_300,alignSelf:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'flex-end':'center',width:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?_DatePicker.MODAL_CONTENT_WIDTH:'90%',position:'absolute',zIndex:10,marginTop:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:undefined,boxShadow:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'0px 1px 1.41px rgba(0, 0, 0, 0.20)':undefined},header:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingHorizontal:20,paddingTop:15,paddingBottom:10},monthText:{fontSize:16,color:_colors.PRIMARY_100},arrow:{fontSize:24,color:_colors.NEUTRAL_400},dayHeader:{flexDirection:'row',justifyContent:'space-between',paddingVertical:16},dayHeaderText:{width:'14.28%',textAlign:'center',color:'NEUTRAL_800'},notCurrentMonthStyle:{color:_colors.NEUTRAL_400},calendarContainer:{height:CALENDAR_HEIGHT,paddingHorizontal:10},dayItem:{width:'14.28%',justifyContent:'center',alignItems:'center',marginVertical:2},dayItemText:{padding:8,marginVertical:2,borderRadius:100,textAlign:'center',width:34,height:34},dayItemTextHover:{backgroundColor:_colors.NEUTRAL_200},todayItemTextHover:{backgroundColor:_colors.TERTIARY_70,borderWidth:1,borderColor:_colors.PRIMARY_100},selectedDayBackground:{backgroundColor:_colors.PRIMARY_100,borderRadius:100,padding:8,height:34,width:34,justifyContent:'center',alignItems:'center'},selectedDayText:{color:'white'},dayText:{color:'black',justifyContent:'center',alignItems:'center'},currentDayBorder:{borderWidth:1,borderColor:_colors.PRIMARY_100,borderRadius:100,justifyContent:'center',alignItems:'center'},list:{height:CALENDAR_HEIGHT,paddingHorizontal:10,paddingVertical:5},item:{justifyContent:'center',padding:10,margin:2},yearText:{fontSize:16,width:40},selectedItem:{backgroundColor:_colors.TERTIARY_70,borderRadius:8},optionsContainer:{width:'100%',flexDirection:'row',justifyContent:'flex-end',marginTop:12,gap:4,padding:10},modalContentUpwards:{position:'absolute',boxShadow:'0px 0px 5px 0px rgba(0,0,0,0.2)'},disabledButtonStyle:{opacity:0.2}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.CALENDAR_HEIGHT=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _utilsTypes=require("../../helpers/utilsTypes");var _DatePicker=require("./DatePicker.utils");var CALENDAR_HEIGHT=exports.CALENDAR_HEIGHT=260;var styles=exports.styles=_reactNative.StyleSheet.create({container:{flex:1},datePickerButton:{borderWidth:1,borderColor:'gray',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:12,borderRadius:4,backgroundColor:'white',flexDirection:'row',justifyContent:'space-between',alignItems:'center'},inputWrapper:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingHorizontal:16,height:40},invalidDateInputWrapper:{borderColor:_colors.DESTRUCTIVE_100},disabledInput:{opacity:0.2},datePickerInput:{textAlign:'left',fontSize:18,outlineStyle:'none',flex:1},inputContainerWrapper:{borderRadius:8,height:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?undefined:50,borderWidth:5,margin:-5,borderColor:'transparent'},monthAndYearContainer:{flexDirection:'row',alignItems:'center',gap:8},monthAndYearContent:{flexDirection:'row',marginHorizontal:12,alignItems:'center',gap:8},inputWrapperFocused:{backgroundColor:_colors.QUATERNARY_50},invalidDateWrapperFocused:{backgroundColor:_colors.DESTRUCTIVE_10},modalContainer:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'rgba(0,0,0,0)':'rgba(0,0,0,0.5)'},modalContent:{backgroundColor:_colors.NEUTRAL_50,borderRadius:8,borderColor:_colors.NEUTRAL_300,alignSelf:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?undefined:'center',width:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?_DatePicker.MODAL_CONTENT_WIDTH:'90%',marginTop:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:undefined,boxShadow:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?'0px 1px 1.41px rgba(0, 0, 0, 0.20)':undefined},header:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingHorizontal:20,paddingTop:15,paddingBottom:10},monthText:{fontSize:16,color:_colors.PRIMARY_100},arrow:{fontSize:24,color:_colors.NEUTRAL_400},dayHeader:{flexDirection:'row',justifyContent:'space-between',paddingVertical:16},dayHeaderText:{width:'14.28%',textAlign:'center',color:'NEUTRAL_800'},notCurrentMonthStyle:{color:_colors.NEUTRAL_400},calendarContainer:{height:CALENDAR_HEIGHT,paddingHorizontal:10,backgroundColor:_colors.NEUTRAL_50},dayItem:{width:'14.28%',justifyContent:'center',alignItems:'center',marginVertical:2},dayItemText:{padding:8,marginVertical:2,borderRadius:100,textAlign:'center',width:34,height:34},dayItemTextHover:{backgroundColor:_colors.NEUTRAL_200},todayItemTextHover:{backgroundColor:_colors.TERTIARY_70,borderWidth:1,borderColor:_colors.PRIMARY_100},selectedDayBackground:{backgroundColor:_colors.PRIMARY_100,borderRadius:100,padding:8,height:34,width:34,justifyContent:'center',alignItems:'center'},selectedDayText:{color:'white'},dayText:{color:'black',justifyContent:'center',alignItems:'center'},currentDayBorder:{borderWidth:1,borderColor:_colors.PRIMARY_100,borderRadius:100,justifyContent:'center',alignItems:'center'},list:{height:CALENDAR_HEIGHT,paddingHorizontal:10,paddingVertical:5},item:{justifyContent:'center',padding:10,margin:2},yearText:{fontSize:16,width:40},selectedItem:{backgroundColor:_colors.TERTIARY_70,borderRadius:8},optionsContainer:{width:'100%',flexDirection:'row',justifyContent:'flex-end',gap:4,padding:10,backgroundColor:_colors.NEUTRAL_50,borderBottomLeftRadius:8,borderBottomRightRadius:8},disabledButtonStyle:{opacity:0.2}});

package/dist-native/components/datepicker/DatePicker.utils.d.ts

@@ -1,4 +1,6 @@
 export declare const MODAL_CONTENT_WIDTH = 360;
+export declare const MODAL_CONTENT_TOP_POSITION = 155;
+export declare const MODAL_POSITION_TOP = 5;
 export declare const formatterDate: (date: Date, format: string) => string;
 export declare const getPlaceholderDateFormat: (dateFormat: string) => "DD/MM/YYYY" | "MM/DD/YYYY";
 export declare const parseLocalDateString: (localDate: string, dateFormat: string) => Date;

package/dist-native/components/datepicker/DatePicker.utils.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.validateDate=exports.transformDate=exports.parseLocalDateString=exports.isLeapYear=exports.getPlaceholderDateFormat=exports.getDaysInMonth=exports.generateYearList=exports.formatterDate=exports.buildMonth=exports.MODAL_CONTENT_WIDTH=void 0;var MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_WIDTH=360;var formatterDate=exports.formatterDate=function formatterDate(date,format){if(date!==undefined){var day=date.getDate().toString().padStart(2,'0');var month=(date.getMonth()+1).toString().padStart(2,'0');var year=date.getFullYear();if(format==='MM/DD/YYYY'){return month+"/"+day+"/"+year;}else if(format==='DD/MM/YYYY'){return day+"/"+month+"/"+year;}else{return month+"/"+day+"/"+year;}}return'';};var getPlaceholderDateFormat=exports.getPlaceholderDateFormat=function getPlaceholderDateFormat(dateFormat){return dateFormat==='MM/DD/YYYY'?'MM/DD/YYYY':'DD/MM/YYYY';};var parseLocalDateString=exports.parseLocalDateString=function parseLocalDateString(localDate,dateFormat){var parts=localDate.split('/');var year=parts[2];var month=dateFormat==='MM/DD/YYYY'?parts[0]-1:parts[1]-1;var day=dateFormat==='MM/DD/YYYY'?parts[1]:parts[0];return new Date(year,month,day);};var transformDate=exports.transformDate=function transformDate(dateString){var parts=dateString.split('/');var date=new Date(parts[2],parts[1]-1,parts[0],3,0,0);return date.toISOString();};var generateYearList=exports.generateYearList=function generateYearList(){return Array.from({length:200},function(_,i){return 1900+i;});};var isLeapYear=exports.isLeapYear=function isLeapYear(year){return year%4===0&&year%100!==0||year%400===0;};var getDaysInMonth=exports.getDaysInMonth=function getDaysInMonth(year,month){var daysInMonth=[31,isLeapYear(year)?29:28,31,30,31,30,31,31,30,31,30,31];return daysInMonth[month];};var buildMonth=exports.buildMonth=function buildMonth(year,month){var days=[];var firstDayOfMonth=new Date(year,month,1).getDay();var totalDays=getDaysInMonth(year,month);var previousMonth=month===0?11:month-1;var previousMonthYear=month===0?year-1:year;var previousMonthDays=getDaysInMonth(previousMonthYear,previousMonth);for(var i=firstDayOfMonth;i>0;i--){days.push(new Date(previousMonthYear,previousMonth,previousMonthDays-i+1));}for(var _day=1;_day<=totalDays;_day++){days.push(new Date(year,month,_day));}var nextMonth=month===11?0:month+1;var nextMonthYear=month===11?year+1:year;var day=1;while(days.length%7!==0){days.push(new Date(nextMonthYear,nextMonth,day++));}return days;};var validateDate=exports.validateDate=function validateDate(dateObject,text,format){if(isNaN(dateObject.getTime())||dateObject.getFullYear()<1000||dateObject.getFullYear()>9999){return false;}var parts=text.split('/');var day,month;if(format==='DD/MM/YYYY'){day=parseInt(parts[0],10);month=parseInt(parts[1],10);}else{day=parseInt(parts[1],10);month=parseInt(parts[0],10);}if(month<1||month>12||day<1||day>31){return false;}if((month===4||month===6||month===9||month===11)&&day>30){return false;}if(month===2){var isLeap=dateObject.getFullYear()%4===0&&(dateObject.getFullYear()%100!==0||dateObject.getFullYear()%400===0);if(day>(isLeap?29:28)){return false;}}return true;};
+Object.defineProperty(exports,"__esModule",{value:true});exports.validateDate=exports.transformDate=exports.parseLocalDateString=exports.isLeapYear=exports.getPlaceholderDateFormat=exports.getDaysInMonth=exports.generateYearList=exports.formatterDate=exports.buildMonth=exports.MODAL_POSITION_TOP=exports.MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_TOP_POSITION=void 0;var MODAL_CONTENT_WIDTH=exports.MODAL_CONTENT_WIDTH=360;var MODAL_CONTENT_TOP_POSITION=exports.MODAL_CONTENT_TOP_POSITION=155;var MODAL_POSITION_TOP=exports.MODAL_POSITION_TOP=5;var formatterDate=exports.formatterDate=function formatterDate(date,format){if(date!==undefined){var day=date.getDate().toString().padStart(2,'0');var month=(date.getMonth()+1).toString().padStart(2,'0');var year=date.getFullYear();if(format==='MM/DD/YYYY'){return month+"/"+day+"/"+year;}else if(format==='DD/MM/YYYY'){return day+"/"+month+"/"+year;}else{return month+"/"+day+"/"+year;}}return'';};var getPlaceholderDateFormat=exports.getPlaceholderDateFormat=function getPlaceholderDateFormat(dateFormat){return dateFormat==='MM/DD/YYYY'?'MM/DD/YYYY':'DD/MM/YYYY';};var parseLocalDateString=exports.parseLocalDateString=function parseLocalDateString(localDate,dateFormat){var parts=localDate.split('/');var year=parts[2];var month=dateFormat==='MM/DD/YYYY'?parts[0]-1:parts[1]-1;var day=dateFormat==='MM/DD/YYYY'?parts[1]:parts[0];return new Date(year,month,day);};var transformDate=exports.transformDate=function transformDate(dateString){var parts=dateString.split('/');var date=new Date(parts[2],parts[1]-1,parts[0],3,0,0);return date.toISOString();};var generateYearList=exports.generateYearList=function generateYearList(){return Array.from({length:200},function(_,i){return 1900+i;});};var isLeapYear=exports.isLeapYear=function isLeapYear(year){return year%4===0&&year%100!==0||year%400===0;};var getDaysInMonth=exports.getDaysInMonth=function getDaysInMonth(year,month){var daysInMonth=[31,isLeapYear(year)?29:28,31,30,31,30,31,31,30,31,30,31];return daysInMonth[month];};var buildMonth=exports.buildMonth=function buildMonth(year,month){var days=[];var firstDayOfMonth=new Date(year,month,1).getDay();var totalDays=getDaysInMonth(year,month);var previousMonth=month===0?11:month-1;var previousMonthYear=month===0?year-1:year;var previousMonthDays=getDaysInMonth(previousMonthYear,previousMonth);for(var i=firstDayOfMonth;i>0;i--){days.push(new Date(previousMonthYear,previousMonth,previousMonthDays-i+1));}for(var _day=1;_day<=totalDays;_day++){days.push(new Date(year,month,_day));}var nextMonth=month===11?0:month+1;var nextMonthYear=month===11?year+1:year;var day=1;while(days.length%7!==0){days.push(new Date(nextMonthYear,nextMonth,day++));}return days;};var validateDate=exports.validateDate=function validateDate(dateObject,text,format){if(isNaN(dateObject.getTime())||dateObject.getFullYear()<1000||dateObject.getFullYear()>9999){return false;}var parts=text.split('/');var day,month;if(format==='DD/MM/YYYY'){day=parseInt(parts[0],10);month=parseInt(parts[1],10);}else{day=parseInt(parts[1],10);month=parseInt(parts[0],10);}if(month<1||month>12||day<1||day>31){return false;}if((month===4||month===6||month===9||month===11)&&day>30){return false;}if(month===2){var isLeap=dateObject.getFullYear()%4===0&&(dateObject.getFullYear()%100!==0||dateObject.getFullYear()%400===0);if(day>(isLeap?29:28)){return false;}}return true;};

package/dist-web/components/datepicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: ({ value, styleField, onChangeText, backgroundColor, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: ({ value, styleField, onChangeText, language, dateFormat, disabled, showCalendar, backgroundColor, }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/dist-web/components/datepicker/DatePicker.js

@@ -8,27 +8,31 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect, useRef, useState } from 'react';
 import { Modal, Text, TextInput, View, TouchableOpacity, FlatList, Platform, Dimensions, Pressable } from "react-native-web";
 import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, CalendarIcon } from "../../assets/images/icons";
-import { NEUTRAL_300, NEUTRAL_400, NEUTRAL_600, PRIMARY_100 } from "../../styles/colors";
+import { NEUTRAL_300, NEUTRAL_400, NEUTRAL_50, NEUTRAL_600, PRIMARY_100 } from "../../styles/colors";
 import { AppPlatform } from "../../helpers/utilsTypes";
 import { CALENDAR_HEIGHT, styles } from "./DatePicker.styles";
 import { translations } from "./DatePicker.translations";
-import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat, parseLocalDateString, validateDate, MODAL_CONTENT_WIDTH } from "./DatePicker.utils";
+import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat, parseLocalDateString, validateDate, MODAL_CONTENT_WIDTH, MODAL_CONTENT_TOP_POSITION, MODAL_POSITION_TOP } from "./DatePicker.utils";
 
 // Button from the Etendo UI library
 import { Button } from "../button";
+
+// Declare window object for web
+
 var DatePicker = function DatePicker(_ref) {
   var value = _ref.value,
     styleField = _ref.styleField,
     onChangeText = _ref.onChangeText,
-    backgroundColor = _ref.backgroundColor,
-    _ref$dateFormat = _ref.dateFormat,
-    dateFormat = _ref$dateFormat === void 0 ? 'MM/DD/YYYY' : _ref$dateFormat,
     _ref$language = _ref.language,
     language = _ref$language === void 0 ? 'en-US' : _ref$language,
+    _ref$dateFormat = _ref.dateFormat,
+    dateFormat = _ref$dateFormat === void 0 ? 'MM/DD/YYYY' : _ref$dateFormat,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$showCalendar = _ref.showCalendar,
     showCalendar = _ref$showCalendar === void 0 ? true : _ref$showCalendar,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? NEUTRAL_50 : _ref$backgroundColor;
   // states for the date picker
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -58,30 +62,33 @@ var DatePicker = function DatePicker(_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     isYearSelection = _useState14[0],
     setIsYearSelection = _useState14[1];
-  var _useState15 = useState('downwards'),
+  var _useState15 = useState(new Date().getMonth()),
     _useState16 = _slicedToArray(_useState15, 2),
-    calendarDirection = _useState16[0],
-    setCalendarDirection = _useState16[1];
-  var _useState17 = useState(new Date().getMonth()),
+    currentMonth = _useState16[0],
+    setCurrentMonth = _useState16[1];
+  var _useState17 = useState(new Date().getFullYear()),
     _useState18 = _slicedToArray(_useState17, 2),
-    currentMonth = _useState18[0],
-    setCurrentMonth = _useState18[1];
-  var _useState19 = useState(new Date().getFullYear()),
+    currentYear = _useState18[0],
+    setCurrentYear = _useState18[1];
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    currentYear = _useState20[0],
-    setCurrentYear = _useState20[1];
+    disabledMonthSelection = _useState20[0],
+    setDisabledMonthSelection = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    disabledMonthSelection = _useState22[0],
-    setDisabledMonthSelection = _useState22[1];
-  var _useState23 = useState(false),
+    disabledYearSelection = _useState22[0],
+    setDisabledYearSelection = _useState22[1];
+  var _useState23 = useState(new Date(selectedDate)),
     _useState24 = _slicedToArray(_useState23, 2),
-    disabledYearSelection = _useState24[0],
-    setDisabledYearSelection = _useState24[1];
-  var _useState25 = useState(new Date(selectedDate)),
+    currentSelectedDate = _useState24[0],
+    setTempSelectedDate = _useState24[1];
+  var _useState25 = useState({
+      top: 0,
+      bottom: 0
+    }),
     _useState26 = _slicedToArray(_useState25, 2),
-    currentSelectedDate = _useState26[0],
-    setTempSelectedDate = _useState26[1];
+    modalPosition = _useState26[0],
+    setModalPosition = _useState26[1];
 
   // Effect to validate and set the selected date
   useEffect(function () {
@@ -101,6 +108,18 @@ var DatePicker = function DatePicker(_ref) {
     }
   }, [value, dateFormat]);
 
+  // Effect to close the date picker when the user scrolls
+  useEffect(function () {
+    var handleScroll = function handleScroll() {
+      if (isPickerShow) {
+        setIsPickerShow(false);
+      }
+    };
+    if (Platform.OS === AppPlatform.web && window && typeof window !== 'undefined') {
+      window.addEventListener('scroll', handleScroll, true);
+    }
+  }, [isPickerShow]);
+
   // References for the date picker
   var inputRef = useRef(null);
   var monthListRef = useRef(null);
@@ -278,10 +297,18 @@ var DatePicker = function DatePicker(_ref) {
       inputRef.current.measure(function (x, y, width, height, pageX, pageY) {
         var windowHeight = Dimensions.get('window').height;
         var spaceBelow = windowHeight - pageY - height;
-        if (spaceBelow < CALENDAR_HEIGHT) {
-          setCalendarDirection('upwards');
+        var modalLeftPosition = pageX + width - MODAL_CONTENT_WIDTH;
+        modalLeftPosition = Math.max(modalLeftPosition, 0);
+        if (spaceBelow >= CALENDAR_HEIGHT) {
+          setModalPosition({
+            top: pageY + height,
+            left: modalLeftPosition
+          });
         } else {
-          setCalendarDirection('downwards');
+          setModalPosition({
+            top: pageY - CALENDAR_HEIGHT - MODAL_CONTENT_TOP_POSITION,
+            left: modalLeftPosition
+          });
         }
       });
     }
@@ -463,9 +490,6 @@ var DatePicker = function DatePicker(_ref) {
       showsVerticalScrollIndicator: false
     }));
   };
-
-  // Conditional component based on platform
-  var PlatformComponent = Platform.OS === AppPlatform.web ? View : Modal;
   return /*#__PURE__*/React.createElement(View, {
     style: styles.container
   }, /*#__PURE__*/React.createElement(View, {
@@ -499,25 +523,23 @@ var DatePicker = function DatePicker(_ref) {
       opacity: 0.2
     },
     width: 25
-  })))), /*#__PURE__*/React.createElement(PlatformComponent, Platform.OS === AppPlatform.web ? {
-    style: {
-      display: isPickerShow ? 'flex' : 'none'
-    }
-  } : {
+  })))), /*#__PURE__*/React.createElement(Modal, {
+    animationType: "fade",
     transparent: true,
     visible: isPickerShow,
     onRequestClose: showPicker
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: !(Platform.OS === AppPlatform.web) && styles.modalContainer,
+    style: styles.modalContainer,
     activeOpacity: 1,
     onPress: showPicker
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.modalContent, {
       width: MODAL_CONTENT_WIDTH
-    }, calendarDirection === 'downwards' ? null : styles.modalContentUpwards],
-    onStartShouldSetResponder: function onStartShouldSetResponder() {
-      return true;
-    }
+    }, {
+      position: Platform.OS === AppPlatform.web ? 'absolute' : 'relative',
+      top: Platform.OS === AppPlatform.web && modalPosition.top + MODAL_POSITION_TOP,
+      left: Platform.OS === AppPlatform.web && modalPosition.left
+    }]
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.header, (isMonthSelection || isYearSelection) && {
       borderBottomWidth: 1,

package/dist-web/components/datepicker/DatePicker.styles.d.ts

@@ -19,7 +19,6 @@ export declare const styles: {
         justifyContent: "space-between";
         alignItems: "center";
         paddingHorizontal: number;
-        backgroundColor: string;
         height: number;
     };
     invalidDateInputWrapper: {
@@ -35,10 +34,11 @@ export declare const styles: {
         flex: number;
     };
     inputContainerWrapper: {
-        backgroundColor: string;
-        padding: number;
         borderRadius: number;
         height: number | undefined;
+        borderWidth: number;
+        margin: number;
+        borderColor: string;
     };
     monthAndYearContainer: {
         flexDirection: "row";
@@ -66,13 +66,9 @@ export declare const styles: {
     modalContent: {
         backgroundColor: string;
         borderRadius: number;
-        elevation: number;
-        borderWidth: number;
         borderColor: string;
-        alignSelf: "center" | "flex-end";
+        alignSelf: "center" | undefined;
         width: 360 | "90%";
-        position: "absolute";
-        zIndex: number;
         marginTop: number | undefined;
         boxShadow: string | undefined;
     };
@@ -108,6 +104,7 @@ export declare const styles: {
     calendarContainer: {
         height: number;
         paddingHorizontal: number;
+        backgroundColor: string;
     };
     dayItem: {
         width: "14.28%";
@@ -177,13 +174,11 @@ export declare const styles: {
         width: "100%";
         flexDirection: "row";
         justifyContent: "flex-end";
-        marginTop: number;
         gap: number;
         padding: number;
-    };
-    modalContentUpwards: {
-        position: "absolute";
-        boxShadow: string;
+        backgroundColor: string;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
     };
     disabledButtonStyle: {
         opacity: number;

package/dist-web/components/datepicker/DatePicker.styles.js

@@ -27,7 +27,6 @@ export var styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 16,
-    backgroundColor: NEUTRAL_50,
     height: 40
   },
   invalidDateInputWrapper: {
@@ -43,10 +42,11 @@ export var styles = StyleSheet.create({
     flex: 1
   },
   inputContainerWrapper: {
-    backgroundColor: 'transparent',
-    padding: 5,
     borderRadius: 8,
-    height: Platform.OS === AppPlatform.web ? undefined : 50
+    height: Platform.OS === AppPlatform.web ? undefined : 50,
+    borderWidth: 5,
+    margin: -5,
+    borderColor: 'transparent'
   },
   monthAndYearContainer: {
     flexDirection: 'row',
@@ -69,18 +69,14 @@ export var styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.5)'
+    backgroundColor: Platform.OS === AppPlatform.web ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,0.5)'
   },
   modalContent: {
     backgroundColor: NEUTRAL_50,
     borderRadius: 8,
-    elevation: 5,
-    borderWidth: 1,
     borderColor: NEUTRAL_300,
-    alignSelf: Platform.OS === AppPlatform.web ? 'flex-end' : 'center',
+    alignSelf: Platform.OS === AppPlatform.web ? undefined : 'center',
     width: Platform.OS === AppPlatform.web ? MODAL_CONTENT_WIDTH : '90%',
-    position: 'absolute',
-    zIndex: 10,
     marginTop: Platform.OS === AppPlatform.web ? 8 : undefined,
     boxShadow: Platform.OS === AppPlatform.web ? '0px 1px 1.41px rgba(0, 0, 0, 0.20)' : undefined
   },
@@ -115,7 +111,8 @@ export var styles = StyleSheet.create({
   },
   calendarContainer: {
     height: CALENDAR_HEIGHT,
-    paddingHorizontal: 10
+    paddingHorizontal: 10,
+    backgroundColor: NEUTRAL_50
   },
   dayItem: {
     width: '14.28%',
@@ -185,13 +182,11 @@ export var styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    marginTop: 12,
     gap: 4,
-    padding: 10
-  },
-  modalContentUpwards: {
-    position: 'absolute',
-    boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.2)'
+    padding: 10,
+    backgroundColor: NEUTRAL_50,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8
   },
   disabledButtonStyle: {
     opacity: 0.2

package/dist-web/components/datepicker/DatePicker.utils.d.ts

@@ -1,4 +1,6 @@
 export declare const MODAL_CONTENT_WIDTH = 360;
+export declare const MODAL_CONTENT_TOP_POSITION = 155;
+export declare const MODAL_POSITION_TOP = 5;
 export declare const formatterDate: (date: Date, format: string) => string;
 export declare const getPlaceholderDateFormat: (dateFormat: string) => "DD/MM/YYYY" | "MM/DD/YYYY";
 export declare const parseLocalDateString: (localDate: string, dateFormat: string) => Date;

package/dist-web/components/datepicker/DatePicker.utils.js

@@ -1,6 +1,8 @@
 /* Utils for DatePicker component */
 // Constants
 export var MODAL_CONTENT_WIDTH = 360;
+export var MODAL_CONTENT_TOP_POSITION = 155;
+export var MODAL_POSITION_TOP = 5;
 
 // Format date based on language
 export var formatterDate = function formatterDate(date, format) {

package/package.json

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