etendo-ui-library 1.3.13 → 1.3.14

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

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

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

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CalendarIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=require("react-native-svg");var _colors=require("../../../styles/colors");var _svg_utils=require("../../../helpers/svg_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/assets/images/icons/CalendarIcon.tsx";var CalendarIcon=exports.CalendarIcon=function CalendarIcon(_ref){var style=_ref.style,_ref$fill=_ref.fill,fill=_ref$fill===void 0?_colors.DEFAULT_COLOR_THEME:_ref$fill;var width=(0,_svg_utils.sizeSvg)(style==null?void 0:style.width,33);var height=(0,_svg_utils.sizeSvg)(style==null?void 0:style.height,32);return _react.default.createElement(_reactNativeSvg.Svg,{width:width,height:height,viewBox:"0 0 33 32",fill:"none",style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:5}},_react.default.createElement(_reactNativeSvg.Path,{d:"M8.0495 2.47674C8.0495 2.02445 8.042 1.66544 8.0495 1.3106C8.07282 0.537622 8.61841 -0.0162932 9.32558 0.000365899C10.0328 0.017025 10.53 0.554281 10.5475 1.3131C10.5559 1.67127 10.5475 2.03028 10.5475 2.4201H22.8103C22.8103 2.00779 22.7928 1.59797 22.8103 1.19066C22.8254 0.872519 22.9622 0.572341 23.1922 0.352087C23.4223 0.131833 23.7281 0.00831623 24.0466 0.00703369C24.3651 0.00575114 24.672 0.1268 24.9038 0.345194C25.1356 0.563589 25.2748 0.862656 25.2925 1.18066C25.31 1.41556 25.3 1.65212 25.3016 1.88784C25.3016 2.05443 25.3016 2.21686 25.3016 2.45259C25.6623 2.45259 25.9888 2.45259 26.3154 2.45259C28.7817 2.47674 30.6609 3.5296 31.9045 5.67029C32.4041 6.52726 32.6661 7.50202 32.6633 8.49401C32.6716 14.3122 32.6883 20.1304 32.6591 25.9478C32.6425 29.2229 29.9262 31.9584 26.6502 31.975C20.0005 32.0083 13.351 32.0083 6.70178 31.975C3.4266 31.9592 0.704506 29.2263 0.687847 25.9511C0.658971 20.1343 0.660082 14.3161 0.691179 8.49651C0.707005 5.31379 3.27334 2.67249 6.45106 2.47924C6.96083 2.45092 7.47309 2.47674 8.0495 2.47674ZM3.18088 12.3514V12.7679C3.18088 17.0715 3.18088 21.3751 3.18088 25.6787C3.18088 27.8885 4.77266 29.4836 6.99165 29.4853C13.447 29.4914 19.9022 29.4914 26.357 29.4853C28.5968 29.4853 30.1694 27.891 30.1711 25.6412C30.1711 21.3654 30.1711 17.0896 30.1711 12.8137V12.3523L3.18088 12.3514ZM3.20753 9.79925H30.1469C30.5718 5.99764 27.883 4.57162 25.3058 5.02975C25.3058 5.17302 25.3058 5.32295 25.3058 5.47288C25.3058 6.12592 25.3241 6.77895 25.2967 7.43116C25.2938 7.62308 25.2461 7.81168 25.1575 7.98194C25.0689 8.1522 24.9417 8.29941 24.7862 8.41185C24.6306 8.52429 24.451 8.59886 24.2615 8.62961C24.072 8.66036 23.878 8.64644 23.6949 8.58897C23.156 8.43404 22.8153 7.96092 22.8086 7.32371C22.7995 6.54989 22.8086 5.77608 22.8086 4.97977H10.5492C10.5492 5.14636 10.5492 5.29963 10.5492 5.44789C10.5492 6.11426 10.5634 6.78062 10.54 7.44698C10.5273 7.76501 10.3929 8.06599 10.1646 8.28773C9.9363 8.50948 9.63152 8.63504 9.31326 8.63846C8.99501 8.64188 8.6876 8.52291 8.45457 8.30612C8.22154 8.08934 8.0807 7.79131 8.06116 7.47364C8.03117 6.94804 8.05033 6.41912 8.04867 5.89102C8.04867 5.59199 8.04867 5.29213 8.04867 5.00393C5.06752 4.60328 2.81438 6.31 3.20753 9.79925Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M9.30304 18.492C8.90073 18.492 8.49841 18.5003 8.09693 18.492C7.3531 18.4711 6.82334 17.9405 6.82751 17.235C6.83167 16.5295 7.36976 16.0056 8.11608 15.9931C8.90572 15.9814 9.69536 15.9814 10.485 15.9931C11.2347 16.0031 11.7702 16.5278 11.7752 17.2292C11.7802 17.9522 11.2413 18.4745 10.4667 18.4895C10.081 18.4995 9.69036 18.492 9.30304 18.492Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:28,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M24.0594 18.492C23.6429 18.492 23.2265 18.5045 22.81 18.492C22.0928 18.4645 21.5747 17.9289 21.5772 17.2425C21.5758 17.0784 21.6071 16.9156 21.6693 16.7637C21.7315 16.6118 21.8234 16.4738 21.9396 16.3579C22.0558 16.2419 22.1939 16.1503 22.346 16.0884C22.498 16.0264 22.6608 15.9955 22.825 15.9972C23.6424 15.9806 24.4598 15.9806 25.2772 15.9972C25.9977 16.0114 26.5216 16.542 26.5266 17.2292C26.5333 17.9372 26.0068 18.4703 25.2647 18.492C24.8632 18.5028 24.4609 18.492 24.0594 18.492Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M16.6562 25.8611C16.2397 25.8611 15.8232 25.8753 15.4068 25.857C15.0842 25.8514 14.7766 25.7204 14.5489 25.4918C14.3213 25.2633 14.1916 24.955 14.1873 24.6325C14.1797 24.3091 14.2998 23.9958 14.5217 23.7605C14.7436 23.5252 15.0494 23.3869 15.3726 23.3756C16.2297 23.3456 17.0902 23.3464 17.9481 23.3756C18.2713 23.383 18.5785 23.5181 18.8025 23.7512C19.0264 23.9844 19.149 24.2967 19.1434 24.62C19.1434 25.3064 18.622 25.8328 17.8998 25.8603C17.4875 25.8736 17.0718 25.8611 16.6562 25.8611Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M16.678 18.4919C16.2616 18.4919 15.8451 18.5044 15.4286 18.4919C14.7206 18.4661 14.1858 17.918 14.1875 17.2425C14.1893 16.9123 14.3217 16.5962 14.5558 16.3633C14.7899 16.1305 15.1067 15.9997 15.4369 15.9997C16.2532 15.9823 17.0704 15.9839 17.8867 15.9997C18.6038 16.0122 19.1361 16.5437 19.1452 17.2275C19.1586 17.9239 18.618 18.4719 17.8817 18.4936C17.481 18.5028 17.0779 18.4919 16.678 18.4919Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M24.042 25.8603C23.6255 25.8603 23.209 25.8745 22.7925 25.8603C22.4703 25.8555 22.1627 25.7248 21.9356 25.4961C21.7084 25.2675 21.5798 24.959 21.5773 24.6367C21.5671 24.3137 21.6856 23.9999 21.9065 23.7641C22.1275 23.5283 22.4329 23.3898 22.7559 23.3789C23.6138 23.3481 24.4743 23.3489 25.3322 23.3789C26.0444 23.4022 26.5417 23.9686 26.5233 24.6633C26.5067 25.3297 25.9911 25.8386 25.2856 25.8645C24.8691 25.8786 24.4526 25.8645 24.0361 25.8645L24.042 25.8603Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M9.27982 25.8603C8.86334 25.8603 8.44686 25.8753 8.03039 25.8603C7.70883 25.8512 7.40333 25.7178 7.17819 25.488C6.95305 25.2583 6.82585 24.9501 6.82337 24.6284C6.82089 24.3067 6.94332 23.9966 7.16488 23.7634C7.38644 23.5302 7.68985 23.3921 8.01123 23.3781C8.86917 23.3497 9.72767 23.3497 10.5867 23.3781C10.9062 23.3949 11.2068 23.5344 11.426 23.7675C11.6452 24.0006 11.7659 24.3092 11.7631 24.6291C11.7604 24.949 11.6342 25.2555 11.411 25.4847C11.1878 25.7139 10.8848 25.8482 10.5651 25.8594C10.1394 25.8753 9.70962 25.8603 9.27982 25.8603Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:7}}));};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CalendarIcon=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=require("react-native-svg");var _colors=require("../../../styles/colors");var _svg_utils=require("../../../helpers/svg_utils");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/assets/images/icons/CalendarIcon.tsx";var CalendarIcon=exports.CalendarIcon=function CalendarIcon(_ref){var style=_ref.style,_ref$fill=_ref.fill,fill=_ref$fill===void 0?_colors.DEFAULT_COLOR_THEME:_ref$fill,_ref$width=_ref.width,width=_ref$width===void 0?33:_ref$width,_ref$height=_ref.height,height=_ref$height===void 0?32:_ref$height;var widthIcon=(0,_svg_utils.sizeSvg)(width,33);var heightIcon=(0,_svg_utils.sizeSvg)(height,32);return _react.default.createElement(_reactNativeSvg.Svg,{width:widthIcon,height:heightIcon,viewBox:"0 0 33 32",fill:"none",style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(_reactNativeSvg.Path,{d:"M8.0495 2.47674C8.0495 2.02445 8.042 1.66544 8.0495 1.3106C8.07282 0.537622 8.61841 -0.0162932 9.32558 0.000365899C10.0328 0.017025 10.53 0.554281 10.5475 1.3131C10.5559 1.67127 10.5475 2.03028 10.5475 2.4201H22.8103C22.8103 2.00779 22.7928 1.59797 22.8103 1.19066C22.8254 0.872519 22.9622 0.572341 23.1922 0.352087C23.4223 0.131833 23.7281 0.00831623 24.0466 0.00703369C24.3651 0.00575114 24.672 0.1268 24.9038 0.345194C25.1356 0.563589 25.2748 0.862656 25.2925 1.18066C25.31 1.41556 25.3 1.65212 25.3016 1.88784C25.3016 2.05443 25.3016 2.21686 25.3016 2.45259C25.6623 2.45259 25.9888 2.45259 26.3154 2.45259C28.7817 2.47674 30.6609 3.5296 31.9045 5.67029C32.4041 6.52726 32.6661 7.50202 32.6633 8.49401C32.6716 14.3122 32.6883 20.1304 32.6591 25.9478C32.6425 29.2229 29.9262 31.9584 26.6502 31.975C20.0005 32.0083 13.351 32.0083 6.70178 31.975C3.4266 31.9592 0.704506 29.2263 0.687847 25.9511C0.658971 20.1343 0.660082 14.3161 0.691179 8.49651C0.707005 5.31379 3.27334 2.67249 6.45106 2.47924C6.96083 2.45092 7.47309 2.47674 8.0495 2.47674ZM3.18088 12.3514V12.7679C3.18088 17.0715 3.18088 21.3751 3.18088 25.6787C3.18088 27.8885 4.77266 29.4836 6.99165 29.4853C13.447 29.4914 19.9022 29.4914 26.357 29.4853C28.5968 29.4853 30.1694 27.891 30.1711 25.6412C30.1711 21.3654 30.1711 17.0896 30.1711 12.8137V12.3523L3.18088 12.3514ZM3.20753 9.79925H30.1469C30.5718 5.99764 27.883 4.57162 25.3058 5.02975C25.3058 5.17302 25.3058 5.32295 25.3058 5.47288C25.3058 6.12592 25.3241 6.77895 25.2967 7.43116C25.2938 7.62308 25.2461 7.81168 25.1575 7.98194C25.0689 8.1522 24.9417 8.29941 24.7862 8.41185C24.6306 8.52429 24.451 8.59886 24.2615 8.62961C24.072 8.66036 23.878 8.64644 23.6949 8.58897C23.156 8.43404 22.8153 7.96092 22.8086 7.32371C22.7995 6.54989 22.8086 5.77608 22.8086 4.97977H10.5492C10.5492 5.14636 10.5492 5.29963 10.5492 5.44789C10.5492 6.11426 10.5634 6.78062 10.54 7.44698C10.5273 7.76501 10.3929 8.06599 10.1646 8.28773C9.9363 8.50948 9.63152 8.63504 9.31326 8.63846C8.99501 8.64188 8.6876 8.52291 8.45457 8.30612C8.22154 8.08934 8.0807 7.79131 8.06116 7.47364C8.03117 6.94804 8.05033 6.41912 8.04867 5.89102C8.04867 5.59199 8.04867 5.29213 8.04867 5.00393C5.06752 4.60328 2.81438 6.31 3.20753 9.79925Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:28,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M9.30304 18.492C8.90073 18.492 8.49841 18.5003 8.09693 18.492C7.3531 18.4711 6.82334 17.9405 6.82751 17.235C6.83167 16.5295 7.36976 16.0056 8.11608 15.9931C8.90572 15.9814 9.69536 15.9814 10.485 15.9931C11.2347 16.0031 11.7702 16.5278 11.7752 17.2292C11.7802 17.9522 11.2413 18.4745 10.4667 18.4895C10.081 18.4995 9.69036 18.492 9.30304 18.492Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M24.0594 18.492C23.6429 18.492 23.2265 18.5045 22.81 18.492C22.0928 18.4645 21.5747 17.9289 21.5772 17.2425C21.5758 17.0784 21.6071 16.9156 21.6693 16.7637C21.7315 16.6118 21.8234 16.4738 21.9396 16.3579C22.0558 16.2419 22.1939 16.1503 22.346 16.0884C22.498 16.0264 22.6608 15.9955 22.825 15.9972C23.6424 15.9806 24.4598 15.9806 25.2772 15.9972C25.9977 16.0114 26.5216 16.542 26.5266 17.2292C26.5333 17.9372 26.0068 18.4703 25.2647 18.492C24.8632 18.5028 24.4609 18.492 24.0594 18.492Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M16.6562 25.8611C16.2397 25.8611 15.8232 25.8753 15.4068 25.857C15.0842 25.8514 14.7766 25.7204 14.5489 25.4918C14.3213 25.2633 14.1916 24.955 14.1873 24.6325C14.1797 24.3091 14.2998 23.9958 14.5217 23.7605C14.7436 23.5252 15.0494 23.3869 15.3726 23.3756C16.2297 23.3456 17.0902 23.3464 17.9481 23.3756C18.2713 23.383 18.5785 23.5181 18.8025 23.7512C19.0264 23.9844 19.149 24.2967 19.1434 24.62C19.1434 25.3064 18.622 25.8328 17.8998 25.8603C17.4875 25.8736 17.0718 25.8611 16.6562 25.8611Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M16.678 18.4919C16.2616 18.4919 15.8451 18.5044 15.4286 18.4919C14.7206 18.4661 14.1858 17.918 14.1875 17.2425C14.1893 16.9123 14.3217 16.5962 14.5558 16.3633C14.7899 16.1305 15.1067 15.9997 15.4369 15.9997C16.2532 15.9823 17.0704 15.9839 17.8867 15.9997C18.6038 16.0122 19.1361 16.5437 19.1452 17.2275C19.1586 17.9239 18.618 18.4719 17.8817 18.4936C17.481 18.5028 17.0779 18.4919 16.678 18.4919Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M24.042 25.8603C23.6255 25.8603 23.209 25.8745 22.7925 25.8603C22.4703 25.8555 22.1627 25.7248 21.9356 25.4961C21.7084 25.2675 21.5798 24.959 21.5773 24.6367C21.5671 24.3137 21.6856 23.9999 21.9065 23.7641C22.1275 23.5283 22.4329 23.3898 22.7559 23.3789C23.6138 23.3481 24.4743 23.3489 25.3322 23.3789C26.0444 23.4022 26.5417 23.9686 26.5233 24.6633C26.5067 25.3297 25.9911 25.8386 25.2856 25.8645C24.8691 25.8786 24.4526 25.8645 24.0361 25.8645L24.042 25.8603Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M9.27982 25.8603C8.86334 25.8603 8.44686 25.8753 8.03039 25.8603C7.70883 25.8512 7.40333 25.7178 7.17819 25.488C6.95305 25.2583 6.82585 24.9501 6.82337 24.6284C6.82089 24.3067 6.94332 23.9966 7.16488 23.7634C7.38644 23.5302 7.68985 23.3921 8.01123 23.3781C8.86917 23.3497 9.72767 23.3497 10.5867 23.3781C10.9062 23.3949 11.2068 23.5344 11.426 23.7675C11.6452 24.0006 11.7659 24.3092 11.7631 24.6291C11.7604 24.949 11.6342 25.2555 11.411 25.4847C11.1878 25.7139 10.8848 25.8482 10.5651 25.8594C10.1394 25.8753 9.70962 25.8603 9.27982 25.8603Z",fill:fill,__self:_this,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:7}}));};

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: ({ styleField, onChangeText, value, dateFormat, language, showCalendar, disabled, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: ({ value, styleField, onChangeText, backgroundColor, dateFormat, language, showCalendar, disabled, }: 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 styleField=_ref.styleField,onChangeText=_ref.onChangeText,value=_ref.value,_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];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:154,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,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:166,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,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:178,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:43,offset:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?38*index:43.5*index,index:index};},__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,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:424,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:432,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:441,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:461,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.dayHeader,__self:_this,__source:{fileName:_jsxFileName,lineNumber:462,columnNumber:9}},daysShort.map(function(day){return _react.default.createElement(_reactNative.Text,{key:day,style:_DatePicker.styles.dayHeaderText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:464,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:469,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:486,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:487,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:inputRef,style:[styleField.field,_DatePicker.styles.inputWrapper,!isDateValid&&_DatePicker.styles.invalidDateInputWrapper],__self:_this,__source:{fileName:_jsxFileName,lineNumber:493,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{style:[_DatePicker.styles.datePickerInput,disabled&&_DatePicker.styles.disabledInput],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:500,columnNumber:11}}),showCalendar&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:showPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:516,columnNumber:13}},_react.default.createElement(_icons.CalendarIcon,{style:[_DatePicker.styles.calendarIcon,disabled&&{opacity:0.2}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:517,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:525,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:537,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:541,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:550,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:558,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:565,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:566,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:568,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.monthText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:569,columnNumber:19}},monthsShort[currentMonth]),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:572,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextMonth,__self:_this,__source:{fileName:_jsxFileName,lineNumber:581,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:582,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:586,columnNumber:15}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToPreviousYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:593,columnNumber:17}},_react.default.createElement(_icons.ArrowLeftIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:594,columnNumber:19}})),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.monthAndYearContent,__self:_this,__source:{fileName:_jsxFileName,lineNumber:596,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DatePicker.styles.yearText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:597,columnNumber:19}},currentYear),_react.default.createElement(_icons.ArrowDownIcon,{style:{width:8,transform:[{rotate:isYearSelection?'180deg':'0deg'}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:598,columnNumber:19}})),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:goToNextYear,__self:_this,__source:{fileName:_jsxFileName,lineNumber:607,columnNumber:17}},_react.default.createElement(_icons.ArrowRightIcon,{style:{width:10,padding:5},__self:_this,__source:{fileName:_jsxFileName,lineNumber:608,columnNumber:19}})))),isYearSelection?renderYearSelection():isMonthSelection?renderMonthSelection():renderCalendar(),_react.default.createElement(_reactNative.View,{style:_DatePicker.styles.optionsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:618,columnNumber:13}},_react.default.createElement(_button.Button,{typeStyle:"white",text:_DatePicker2.translations[language].cancel,onPress:onCancel,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:619,columnNumber:15}}),_react.default.createElement(_button.Button,{typeStyle:"terciary",text:_DatePicker2.translations[language].accept,onPress:onAccept,paddingVertical:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:625,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 _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;

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

@@ -18,9 +18,9 @@ export declare const styles: {
         flexDirection: "row";
         justifyContent: "space-between";
         alignItems: "center";
-        paddingVertical: number;
         paddingHorizontal: number;
         backgroundColor: string;
+        height: number;
     };
     invalidDateInputWrapper: {
         borderColor: string;
@@ -32,14 +32,13 @@ export declare const styles: {
         textAlign: "left";
         fontSize: number;
         outlineStyle: string;
-        height: number;
         flex: number;
     };
     inputContainerWrapper: {
         backgroundColor: string;
         padding: number;
-        height: number | undefined;
         borderRadius: number;
+        height: number | undefined;
     };
     monthAndYearContainer: {
         flexDirection: "row";
@@ -58,9 +57,6 @@ export declare const styles: {
     invalidDateWrapperFocused: {
         backgroundColor: string;
     };
-    calendarIcon: {
-        width: number;
-    };
     modalContainer: {
         flex: number;
         justifyContent: "center";
@@ -75,6 +71,8 @@ export declare const styles: {
         borderColor: string;
         alignSelf: "center" | "flex-end";
         width: 360 | "90%";
+        position: "absolute";
+        zIndex: number;
         marginTop: number | undefined;
         boxShadow: string | undefined;
     };
@@ -147,6 +145,8 @@ export declare const styles: {
     };
     dayText: {
         color: string;
+        justifyContent: "center";
+        alignItems: "center";
     };
     currentDayBorder: {
         borderWidth: number;
@@ -183,7 +183,6 @@ export declare const styles: {
     };
     modalContentUpwards: {
         position: "absolute";
-        bottom: number;
         boxShadow: string;
     };
     disabledButtonStyle: {

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',paddingVertical:_reactNative.Platform.OS===_utilsTypes.AppPlatform.web?8:20,paddingHorizontal:16,backgroundColor:_colors.NEUTRAL_50},invalidDateInputWrapper:{borderColor:_colors.DESTRUCTIVE_100},disabledInput:{opacity:0.2},datePickerInput:{textAlign:'left',fontSize:18,outlineStyle:'none',height:20,flex:1},inputContainerWrapper:{backgroundColor:'transparent',padding:6,height:_reactNative.Platform.OS!==_utilsTypes.AppPlatform.web?63:undefined,borderRadius:8},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},calendarIcon:{width:24},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%',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'},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',bottom:70,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,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}});

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

@@ -1,3 +1,4 @@
+import { ColorValue } from 'react-native';
 export type DayItem = {
     date: Date;
     isCurrentMonth: boolean;
@@ -12,4 +13,5 @@ export interface DatePickerProps {
     value: Date | string | undefined | any;
     showCalendar: boolean | undefined;
     disabled: boolean | undefined;
+    backgroundColor: ColorValue;
 }

package/dist-native/components/input/components/InputField.js

@@ -1 +1 @@
-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 _Input=require("../Input.style");var _Input2=require("../Input.types");var _ShowPasswordIcon=require("../../../assets/images/icons/ShowPasswordIcon");var _HidePasswordIcon=require("../../../assets/images/icons/HidePasswordIcon");var _InputOptions=_interopRequireDefault(require("./InputOptions"));var _DatePicker=_interopRequireDefault(require("../../datepicker/DatePicker"));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/input/components/InputField.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 InputField=function InputField(_ref){var type=_ref.type,configField=_ref.configField,styleField=_ref.styleField,value=_ref.value,disabled=_ref.disabled,placeholder=_ref.placeholder,placeholderPickerSearch=_ref.placeholderPickerSearch,maxLength=_ref.maxLength,keyboardType=_ref.keyboardType,dataPicker=_ref.dataPicker,displayKey=_ref.displayKey,showSearchInPicker=_ref.showSearchInPicker,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_0:_ref$backgroundColor,showOptionsAmount=_ref.showOptionsAmount,_ref$height=_ref.height,height=_ref$height===void 0?40:_ref$height,onPress=_ref.onPress,onSubmit=_ref.onSubmit,onChangeText=_ref.onChangeText,onOptionSelected=_ref.onOptionSelected,onFocus=_ref.onFocus,onBlur=_ref.onBlur,language=_ref.language,dateFormat=_ref.dateFormat,showCalendar=_ref.showCalendar;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),showPassword=_useState4[0],setShowPassword=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),showOptions=_useState6[0],setShowOptions=_useState6[1];var _useState7=(0,_react.useState)([]),_useState8=(0,_slicedToArray2.default)(_useState7,2),dataOptionsFilter=_useState8[0],setDataOptionsFilter=_useState8[1];var _useState9=(0,_react.useState)(''),_useState10=(0,_slicedToArray2.default)(_useState9,2),filterValue=_useState10[0],setFilterValue=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),optionsTop=_useState12[0],setOptionsTop=_useState12[1];var _useState13=(0,_react.useState)({top:0,left:0,width:0,height:0}),_useState14=(0,_slicedToArray2.default)(_useState13,2),positionModal=_useState14[0],setPositionModal=_useState14[1];var windowHeight=_reactNative.Dimensions.get('window').height;var refComponent=(0,_react.useRef)(null);var regex=/^[0-9.,]+$/g;var getStyleText=function getStyleText(){var style=[];if(value){style.push(styleField.textDefault);}else{style.push(styleField.textPlaceholder);}return style;};(0,_react.useEffect)(function(){if(showOptions){getTopLeft();}},[]);var getTopLeft=function getTopLeft(){if(refComponent.current){refComponent.current.measure(function(x,y,width,height,pageX,pageY){var calcDropdownTopLeft=pageY+height+_Input.styles.spaceInOptionsAndInput.height;var showFilterHeight=showSearchInPicker?_Input.styles.optionFilterContainer.height:0;var optionsHeight=_Input.styles.optionContainer.height+_Input.styles.optionContainer.marginTop+showFilterHeight+_Input.styles.optionContainer.marginTop+_Input.styles.optionsContainer.borderWidth*2;var topPosition,bottomPosition;if(optionsHeight+calcDropdownTopLeft+_Input.styles.offSet.height>windowHeight){topPosition=pageY-optionsHeight;setOptionsTop(true);}else{topPosition=calcDropdownTopLeft;setOptionsTop(false);}bottomPosition=windowHeight-(topPosition+optionsHeight);setPositionModal({top:topPosition,bottom:bottomPosition,left:pageX,width:width,height:height});});}};var handleOnChangeFilterText=function handleOnChangeFilterText(filterText){setFilterValue(filterText);if(displayKey)setDataOptionsFilter(dataPicker.filter(function(item){return item[displayKey].toLocaleLowerCase().includes(filterText.toLocaleLowerCase());}));};var handleOnClose=function handleOnClose(){setShowOptions(false);setDataOptionsFilter(dataPicker);setFilterValue('');};var getKeyboardType=function getKeyboardType(keyboardType){if(keyboardType==='number'){return'numeric';}return'default';};var getOnChangeText=function getOnChangeText(text){if(onChangeText){if(keyboardType==='number'){if(text.match(regex)||(text==null?void 0:text.length)===0){onChangeText(text);}return;}onChangeText(text);}};var getFocusStyle=function getFocusStyle(){var style=[];if(!isFocus){style.push({borderColor:'transparent'});}return style;};var removePaddingField=function removePaddingField(){var style={};if(configField!=null&&configField.image){style={paddingRight:0};}return style;};var onPressFocus=function onPressFocus(event){onFocus(event);setIsFocus(true);};var onPressBlur=function onPressBlur(event){onBlur(event);setIsFocus(false);};var getImage=function getImage(image){var fillValue=disabled?_colors.NEUTRAL_400:undefined;if(type===_Input2.InputFieldVariant.TextInputPassword){var PasswordComponent=showPassword?_HidePasswordIcon.HidePasswordIcon:_ShowPasswordIcon.ShowPasswordIcon;return _react.default.createElement(PasswordComponent,{style:_Input.styles.inputImageSize,fill:fillValue,__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:9}});}return _react.default.cloneElement(image,{fill:fillValue});};var handlePressImage=function handlePressImage(){if(type===_Input2.InputFieldVariant.TextInputPassword){setShowPassword(function(prevState){return!prevState;});}else{onSubmit==null?void 0:onSubmit();}};var handleOnPress=function handleOnPress(event){if(type===_Input2.InputFieldVariant.Picker){getTopLeft();setShowOptions(true);}if(onPress){onPress(event);}};var getText=function getText(){if(value){return value;}return placeholder;};var isAreaDisabled=function isAreaDisabled(){return disabled||configField.disabledSubmit||!onSubmit&&type!==_Input2.InputFieldVariant.TextInputPassword;};return _react.default.createElement(_reactNative.View,{style:[styleField.focus,getFocusStyle()],__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:5}},configField!=null&&configField.isDatePicker?_react.default.createElement(_DatePicker.default,{dateFormat:dateFormat,language:language,styleField:styleField,onChangeText:onChangeText,value:value,showCalendar:showCalendar,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:9}}):_react.default.createElement(_reactNative.TouchableOpacity,{ref:refComponent,style:[styleField.field,removePaddingField(),{backgroundColor:backgroundColor},{height:height}],disabled:disabled||configField.disabledField,onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:259,columnNumber:9}},(configField==null?void 0:configField.type)===_Input2.InputFieldVariant.TextInput&&_react.default.createElement(_reactNative.TextInput,{editable:!disabled||!configField.disabledField,focusable:!disabled||!configField.disabledField,onBlur:onPressBlur,onFocus:onPressFocus,value:value,keyboardType:getKeyboardType(keyboardType),onChangeText:getOnChangeText,style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],placeholder:placeholder,placeholderTextColor:_colors.NEUTRAL_600,maxLength:maxLength,secureTextEntry:type===_Input2.InputFieldVariant.TextInputPassword&&showPassword,onSubmitEditing:function onSubmitEditing(){return onSubmit==null?void 0:onSubmit();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:13}}),(configField==null?void 0:configField.type)==='text'&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],__self:_this,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:13}},getText()),(configField==null?void 0:configField.image)&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handlePressImage,style:_Input.styles.buttonContainerInputField,disabled:isAreaDisabled(),__self:_this,__source:{fileName:_jsxFileName,lineNumber:301,columnNumber:13}},getImage(configField.image)),_react.default.createElement(_InputOptions.default,{optionsTop:optionsTop,showOptionsAmount:showOptionsAmount,onOptionSelected:onOptionSelected,showOptions:showOptions,positionModal:positionModal,data:dataOptionsFilter,onClose:handleOnClose,onChangeFilterText:handleOnChangeFilterText,filterValue:filterValue,displayKey:displayKey,showSearchInPicker:showSearchInPicker,placeholderPickerSearch:placeholderPickerSearch,dataPicker:dataPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:308,columnNumber:11}})));};var _default=exports.default=InputField;
+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 _Input=require("../Input.style");var _Input2=require("../Input.types");var _ShowPasswordIcon=require("../../../assets/images/icons/ShowPasswordIcon");var _HidePasswordIcon=require("../../../assets/images/icons/HidePasswordIcon");var _InputOptions=_interopRequireDefault(require("./InputOptions"));var _DatePicker=_interopRequireDefault(require("../../datepicker/DatePicker"));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/input/components/InputField.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 InputField=function InputField(_ref){var type=_ref.type,configField=_ref.configField,styleField=_ref.styleField,value=_ref.value,disabled=_ref.disabled,placeholder=_ref.placeholder,placeholderPickerSearch=_ref.placeholderPickerSearch,maxLength=_ref.maxLength,keyboardType=_ref.keyboardType,dataPicker=_ref.dataPicker,displayKey=_ref.displayKey,showSearchInPicker=_ref.showSearchInPicker,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_colors.NEUTRAL_0:_ref$backgroundColor,showOptionsAmount=_ref.showOptionsAmount,_ref$height=_ref.height,height=_ref$height===void 0?40:_ref$height,onPress=_ref.onPress,onSubmit=_ref.onSubmit,onChangeText=_ref.onChangeText,onOptionSelected=_ref.onOptionSelected,onFocus=_ref.onFocus,onBlur=_ref.onBlur,language=_ref.language,dateFormat=_ref.dateFormat,showCalendar=_ref.showCalendar;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),showPassword=_useState4[0],setShowPassword=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),showOptions=_useState6[0],setShowOptions=_useState6[1];var _useState7=(0,_react.useState)([]),_useState8=(0,_slicedToArray2.default)(_useState7,2),dataOptionsFilter=_useState8[0],setDataOptionsFilter=_useState8[1];var _useState9=(0,_react.useState)(''),_useState10=(0,_slicedToArray2.default)(_useState9,2),filterValue=_useState10[0],setFilterValue=_useState10[1];var _useState11=(0,_react.useState)(false),_useState12=(0,_slicedToArray2.default)(_useState11,2),optionsTop=_useState12[0],setOptionsTop=_useState12[1];var _useState13=(0,_react.useState)({top:0,left:0,width:0,height:0}),_useState14=(0,_slicedToArray2.default)(_useState13,2),positionModal=_useState14[0],setPositionModal=_useState14[1];var windowHeight=_reactNative.Dimensions.get('window').height;var refComponent=(0,_react.useRef)(null);var regex=/^[0-9.,]+$/g;var getStyleText=function getStyleText(){var style=[];if(value){style.push(styleField.textDefault);}else{style.push(styleField.textPlaceholder);}return style;};(0,_react.useEffect)(function(){if(showOptions){getTopLeft();}},[]);var getTopLeft=function getTopLeft(){if(refComponent.current){refComponent.current.measure(function(x,y,width,height,pageX,pageY){var calcDropdownTopLeft=pageY+height+_Input.styles.spaceInOptionsAndInput.height;var showFilterHeight=showSearchInPicker?_Input.styles.optionFilterContainer.height:0;var optionsHeight=_Input.styles.optionContainer.height+_Input.styles.optionContainer.marginTop+showFilterHeight+_Input.styles.optionContainer.marginTop+_Input.styles.optionsContainer.borderWidth*2;var topPosition,bottomPosition;if(optionsHeight+calcDropdownTopLeft+_Input.styles.offSet.height>windowHeight){topPosition=pageY-optionsHeight;setOptionsTop(true);}else{topPosition=calcDropdownTopLeft;setOptionsTop(false);}bottomPosition=windowHeight-(topPosition+optionsHeight);setPositionModal({top:topPosition,bottom:bottomPosition,left:pageX,width:width,height:height});});}};var handleOnChangeFilterText=function handleOnChangeFilterText(filterText){setFilterValue(filterText);if(displayKey)setDataOptionsFilter(dataPicker.filter(function(item){return item[displayKey].toLocaleLowerCase().includes(filterText.toLocaleLowerCase());}));};var handleOnClose=function handleOnClose(){setShowOptions(false);setDataOptionsFilter(dataPicker);setFilterValue('');};var getKeyboardType=function getKeyboardType(keyboardType){if(keyboardType==='number'){return'numeric';}return'default';};var getOnChangeText=function getOnChangeText(text){if(onChangeText){if(keyboardType==='number'){if(text.match(regex)||(text==null?void 0:text.length)===0){onChangeText(text);}return;}onChangeText(text);}};var getFocusStyle=function getFocusStyle(){var style=[];if(!isFocus){style.push({borderColor:'transparent'});}return style;};var removePaddingField=function removePaddingField(){var style={};if(configField!=null&&configField.image){style={paddingRight:0};}return style;};var onPressFocus=function onPressFocus(event){onFocus(event);setIsFocus(true);};var onPressBlur=function onPressBlur(event){onBlur(event);setIsFocus(false);};var getImage=function getImage(image){var fillValue=disabled?_colors.NEUTRAL_400:undefined;if(type===_Input2.InputFieldVariant.TextInputPassword){var PasswordComponent=showPassword?_HidePasswordIcon.HidePasswordIcon:_ShowPasswordIcon.ShowPasswordIcon;return _react.default.createElement(PasswordComponent,{style:_Input.styles.inputImageSize,fill:fillValue,__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:9}});}return _react.default.cloneElement(image,{fill:fillValue});};var handlePressImage=function handlePressImage(){if(type===_Input2.InputFieldVariant.TextInputPassword){setShowPassword(function(prevState){return!prevState;});}else{onSubmit==null?void 0:onSubmit();}};var handleOnPress=function handleOnPress(event){if(type===_Input2.InputFieldVariant.Picker){getTopLeft();setShowOptions(true);}if(onPress){onPress(event);}};var getText=function getText(){if(value){return value;}return placeholder;};var isAreaDisabled=function isAreaDisabled(){return disabled||configField.disabledSubmit||!onSubmit&&type!==_Input2.InputFieldVariant.TextInputPassword;};return _react.default.createElement(_reactNative.View,{style:[styleField.focus,getFocusStyle()],__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:5}},configField!=null&&configField.isDatePicker?_react.default.createElement(_DatePicker.default,{dateFormat:dateFormat,language:language,styleField:styleField,onChangeText:onChangeText,value:value,showCalendar:showCalendar,disabled:disabled,backgroundColor:backgroundColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:9}}):_react.default.createElement(_reactNative.TouchableOpacity,{ref:refComponent,style:[styleField.field,removePaddingField(),{backgroundColor:backgroundColor},{height:height}],disabled:disabled||configField.disabledField,onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:9}},(configField==null?void 0:configField.type)===_Input2.InputFieldVariant.TextInput&&_react.default.createElement(_reactNative.TextInput,{editable:!disabled||!configField.disabledField,focusable:!disabled||!configField.disabledField,onBlur:onPressBlur,onFocus:onPressFocus,value:value,keyboardType:getKeyboardType(keyboardType),onChangeText:getOnChangeText,style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],placeholder:placeholder,placeholderTextColor:_colors.NEUTRAL_600,maxLength:maxLength,secureTextEntry:type===_Input2.InputFieldVariant.TextInputPassword&&showPassword,onSubmitEditing:function onSubmitEditing(){return onSubmit==null?void 0:onSubmit();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:271,columnNumber:13}}),(configField==null?void 0:configField.type)==='text'&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[getStyleText(),(0,_table_utils.disableOutline)(),styleField.textDefault],__self:_this,__source:{fileName:_jsxFileName,lineNumber:290,columnNumber:13}},getText()),(configField==null?void 0:configField.image)&&_react.default.createElement(_reactNative.TouchableOpacity,{onPress:handlePressImage,style:_Input.styles.buttonContainerInputField,disabled:isAreaDisabled(),__self:_this,__source:{fileName:_jsxFileName,lineNumber:302,columnNumber:13}},getImage(configField.image)),_react.default.createElement(_InputOptions.default,{optionsTop:optionsTop,showOptionsAmount:showOptionsAmount,onOptionSelected:onOptionSelected,showOptions:showOptions,positionModal:positionModal,data:dataOptionsFilter,onClose:handleOnClose,onChangeFilterText:handleOnChangeFilterText,filterValue:filterValue,displayKey:displayKey,showSearchInPicker:showSearchInPicker,placeholderPickerSearch:placeholderPickerSearch,dataPicker:dataPicker,__self:_this,__source:{fileName:_jsxFileName,lineNumber:309,columnNumber:11}})));};var _default=exports.default=InputField;

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

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

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

@@ -5,12 +5,16 @@ import { sizeSvg } from "../../../helpers/svg_utils";
 export var CalendarIcon = function CalendarIcon(_ref) {
   var style = _ref.style,
     _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? DEFAULT_COLOR_THEME : _ref$fill;
-  var width = sizeSvg(style === null || style === void 0 ? void 0 : style.width, 33);
-  var height = sizeSvg(style === null || style === void 0 ? void 0 : style.height, 32);
+    fill = _ref$fill === void 0 ? DEFAULT_COLOR_THEME : _ref$fill,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 33 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 32 : _ref$height;
+  var widthIcon = sizeSvg(width, 33);
+  var heightIcon = sizeSvg(height, 32);
   return /*#__PURE__*/React.createElement(Svg, {
-    width: width,
-    height: height,
+    width: widthIcon,
+    height: heightIcon,
     viewBox: "0 0 33 32",
     fill: "none",
     style: style

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

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

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

@@ -5,7 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 /* Imports */
-import React, { useRef, useState } from 'react';
+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";
@@ -17,9 +17,10 @@ import { buildMonth, formatterDate, generateYearList, getPlaceholderDateFormat,
 // Button from the Etendo UI library
 import { Button } from "../button";
 var DatePicker = function DatePicker(_ref) {
-  var styleField = _ref.styleField,
+  var value = _ref.value,
+    styleField = _ref.styleField,
     onChangeText = _ref.onChangeText,
-    value = _ref.value,
+    backgroundColor = _ref.backgroundColor,
     _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? 'MM/DD/YYYY' : _ref$dateFormat,
     _ref$language = _ref.language,
@@ -82,6 +83,24 @@ var DatePicker = function DatePicker(_ref) {
     currentSelectedDate = _useState26[0],
     setTempSelectedDate = _useState26[1];
 
+  // Effect to validate and set the selected date
+  useEffect(function () {
+    if (value) {
+      var defaultValue = parseLocalDateString(value, dateFormat);
+      var isValid = 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]);
+
   // References for the date picker
   var inputRef = useRef(null);
   var monthListRef = useRef(null);
@@ -210,8 +229,8 @@ var DatePicker = function DatePicker(_ref) {
       initialScrollIndex: yearList.indexOf(currentYear),
       getItemLayout: function getItemLayout(_, index) {
         return {
-          length: 43,
-          offset: Platform.OS === AppPlatform.web ? 38 * index : 43.5 * index,
+          length: Platform.OS === AppPlatform.web ? 43 : 30,
+          offset: Platform.OS === AppPlatform.web ? 43 * index : 43 * index,
           index: index
         };
       }
@@ -453,9 +472,13 @@ var DatePicker = function DatePicker(_ref) {
     style: [styles.inputContainerWrapper, (isPickerShow || isInputFocused) && styles.inputWrapperFocused, !isDateValid && styles.invalidDateWrapperFocused]
   }, /*#__PURE__*/React.createElement(View, {
     ref: inputRef,
-    style: [styleField.field, styles.inputWrapper, !isDateValid && styles.invalidDateInputWrapper]
+    style: [styleField.field, styles.inputWrapper, !isDateValid && styles.invalidDateInputWrapper, {
+      backgroundColor: backgroundColor
+    }]
   }, /*#__PURE__*/React.createElement(TextInput, {
-    style: [styles.datePickerInput, disabled && styles.disabledInput],
+    style: [styles.datePickerInput, disabled && styles.disabledInput, {
+      backgroundColor: backgroundColor
+    }],
     value: value,
     placeholder: getPlaceholderDateFormat(dateFormat),
     placeholderTextColor: NEUTRAL_600,
@@ -469,11 +492,13 @@ var DatePicker = function DatePicker(_ref) {
       setIsInputFocused(false), !disabled && handleBlur();
     }
   }), showCalendar && /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: showPicker
+    onPress: showPicker,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(CalendarIcon, {
-    style: [styles.calendarIcon, disabled && {
+    style: disabled && {
       opacity: 0.2
-    }]
+    },
+    width: 25
   })))), /*#__PURE__*/React.createElement(PlatformComponent, Platform.OS === AppPlatform.web ? {
     style: {
       display: isPickerShow ? 'flex' : 'none'

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

@@ -18,9 +18,9 @@ export declare const styles: {
         flexDirection: "row";
         justifyContent: "space-between";
         alignItems: "center";
-        paddingVertical: number;
         paddingHorizontal: number;
         backgroundColor: string;
+        height: number;
     };
     invalidDateInputWrapper: {
         borderColor: string;
@@ -32,14 +32,13 @@ export declare const styles: {
         textAlign: "left";
         fontSize: number;
         outlineStyle: string;
-        height: number;
         flex: number;
     };
     inputContainerWrapper: {
         backgroundColor: string;
         padding: number;
-        height: number | undefined;
         borderRadius: number;
+        height: number | undefined;
     };
     monthAndYearContainer: {
         flexDirection: "row";
@@ -58,9 +57,6 @@ export declare const styles: {
     invalidDateWrapperFocused: {
         backgroundColor: string;
     };
-    calendarIcon: {
-        width: number;
-    };
     modalContainer: {
         flex: number;
         justifyContent: "center";
@@ -75,6 +71,8 @@ export declare const styles: {
         borderColor: string;
         alignSelf: "center" | "flex-end";
         width: 360 | "90%";
+        position: "absolute";
+        zIndex: number;
         marginTop: number | undefined;
         boxShadow: string | undefined;
     };
@@ -147,6 +145,8 @@ export declare const styles: {
     };
     dayText: {
         color: string;
+        justifyContent: "center";
+        alignItems: "center";
     };
     currentDayBorder: {
         borderWidth: number;
@@ -183,7 +183,6 @@ export declare const styles: {
     };
     modalContentUpwards: {
         position: "absolute";
-        bottom: number;
         boxShadow: string;
     };
     disabledButtonStyle: {

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

@@ -26,9 +26,9 @@ export var styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: Platform.OS === AppPlatform.web ? 8 : 20,
     paddingHorizontal: 16,
-    backgroundColor: NEUTRAL_50
+    backgroundColor: NEUTRAL_50,
+    height: 40
   },
   invalidDateInputWrapper: {
     borderColor: DESTRUCTIVE_100
@@ -40,14 +40,13 @@ export var styles = StyleSheet.create({
     textAlign: 'left',
     fontSize: 18,
     outlineStyle: 'none',
-    height: 20,
     flex: 1
   },
   inputContainerWrapper: {
     backgroundColor: 'transparent',
-    padding: 6,
-    height: Platform.OS !== AppPlatform.web ? 63 : undefined,
-    borderRadius: 8
+    padding: 5,
+    borderRadius: 8,
+    height: Platform.OS === AppPlatform.web ? undefined : 50
   },
   monthAndYearContainer: {
     flexDirection: 'row',
@@ -66,9 +65,6 @@ export var styles = StyleSheet.create({
   invalidDateWrapperFocused: {
     backgroundColor: DESTRUCTIVE_10
   },
-  calendarIcon: {
-    width: 24
-  },
   modalContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -83,6 +79,8 @@ export var styles = StyleSheet.create({
     borderColor: NEUTRAL_300,
     alignSelf: Platform.OS === AppPlatform.web ? 'flex-end' : '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
   },
@@ -154,7 +152,9 @@ export var styles = StyleSheet.create({
     color: 'white'
   },
   dayText: {
-    color: 'black'
+    color: 'black',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   currentDayBorder: {
     borderWidth: 1,
@@ -191,7 +191,6 @@ export var styles = StyleSheet.create({
   },
   modalContentUpwards: {
     position: 'absolute',
-    bottom: 70,
     boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.2)'
   },
   disabledButtonStyle: {

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

@@ -1,3 +1,4 @@
+import { ColorValue } from 'react-native';
 export type DayItem = {
     date: Date;
     isCurrentMonth: boolean;
@@ -12,4 +13,5 @@ export interface DatePickerProps {
     value: Date | string | undefined | any;
     showCalendar: boolean | undefined;
     disabled: boolean | undefined;
+    backgroundColor: ColorValue;
 }

package/dist-web/components/input/components/InputField.js

@@ -219,7 +219,8 @@ var InputField = function InputField(_ref) {
     onChangeText: onChangeText,
     value: value,
     showCalendar: showCalendar,
-    disabled: disabled
+    disabled: disabled,
+    backgroundColor: backgroundColor
   }) : /*#__PURE__*/React.createElement(TouchableOpacity, {
     ref: refComponent,
     style: [styleField.field, removePaddingField(), {

package/package.json

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