krl-alfred 2.23.19 → 2.23.20

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { InputProps } from "./props";
+import React from 'react';
+import { InputProps } from './props';
 declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -37,172 +37,85 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
 var react_datepicker_1 = __importDefault(require("react-datepicker"));
 var i18n_1 = __importDefault(require("../../i18n/i18n"));
 var locale_1 = require("date-fns/locale");
-var date_fns_1 = require("date-fns");
+var useDatePickerCalendar_1 = require("./hooks/useDatePickerCalendar");
+var datePicker_1 = require("./utils/datePicker");
 var Input = function (_a) {
     var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.id, id = _w === void 0 ? props_1.InputDefault.id : _w, _x = _a.isClearable, isClearable = _x === void 0 ? props_1.InputDefault.isClearable : _x, _y = _a.onClear, onClear = _y === void 0 ? props_1.InputDefault.onClear : _y, _z = _a.hasNumericFormat, hasNumericFormat = _z === void 0 ? props_1.InputDefault.hasNumericFormat : _z, _0 = _a.inline, inline = _0 === void 0 ? props_1.InputDefault.inline : _0, _1 = _a.minDate, minDate = _1 === void 0 ? props_1.InputDefault.minDate : _1, _2 = _a.maxDate, maxDate = _2 === void 0 ? props_1.InputDefault.maxDate : _2, _3 = _a.filterDate, filterDate = _3 === void 0 ? props_1.InputDefault.filterDate : _3, _4 = _a.onCalendarOpen, onCalendarOpen = _4 === void 0 ? props_1.InputDefault.onCalendarOpen : _4, _5 = _a.maxLength, maxLength = _5 === void 0 ? props_1.InputDefault.maxLength : _5, _6 = _a.showMaxLengthCounter, showMaxLengthCounter = _6 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _6, _7 = _a.description, description = _7 === void 0 ? props_1.InputDefault.description : _7, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
     var _8 = (0, react_1.useState)(type), inputType = _8[0], setInputType = _8[1];
     var _9 = (0, react_1.useState)(false), alert = _9[0], setAlert = _9[1];
     var _10 = (0, react_1.useState)(value), inputValue = _10[0], setInputValue = _10[1];
-    var _11 = (0, react_1.useState)(false), isCalendarOpen = _11[0], setIsCalendarOpen = _11[1];
-    var _12 = (0, react_1.useState)(function () {
-        if (!value)
-            return null;
-        // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
-        if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
-            try {
-                return (0, date_fns_1.parse)(value, format, new Date());
-            }
-            catch (_a) {
-                return new Date(value);
-            }
-        }
-        return new Date(value);
-    }), startDate = _12[0], setStartDate = _12[1];
+    var _11 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _11[0], setStartDate = _11[1];
     var inputRef = (0, react_1.useRef)(null);
-    var datePickerRef = (0, react_1.useRef)(null);
-    var dateInputRef = (0, react_1.useRef)(null);
-    var dateBlurTimeoutRef = (0, react_1.useRef)([]);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
+    var _12 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+        disabled: disabled,
+        inline: inline,
+        onCalendarOpen: onCalendarOpen,
+        readOnly: readOnly,
+    }), calendarControlProps = _12.calendarControlProps, dateInputRef = _12.dateInputRef, datePickerRef = _12.datePickerRef, isCalendarOpen = _12.isCalendarOpen;
     (0, react_1.useEffect)(function () {
         setInputType(type);
     }, [type]);
     (0, react_1.useEffect)(function () {
         setInputValue(value);
-        if (!value) {
-            setStartDate(null);
-        }
-        else {
-            // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
-            if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
-                try {
-                    setStartDate((0, date_fns_1.parse)(value, format, new Date()));
-                }
-                catch (_a) {
-                    setStartDate(new Date(value));
-                }
-            }
-            else {
-                setStartDate(new Date(value));
-            }
-        }
-    }, [value, format]);
+        setStartDate((0, datePicker_1.parseDateValue)(value, format));
+    }, [format, value]);
     (0, react_1.useEffect)(function () {
-        if (alert) {
-            setTimeout(function () {
-                setAlert(false);
-            }, 2000);
-        }
+        if (!alert)
+            return;
+        var timeoutId = window.setTimeout(function () { return setAlert(false); }, 2000);
+        return function () { return window.clearTimeout(timeoutId); };
     }, [alert]);
     var toggleInputType = function () {
-        var newType = inputType === 'password' ? 'text' : 'password';
-        setInputType(newType);
+        setInputType(function (currentType) { return (currentType === 'password' ? 'text' : 'password'); });
     };
-    var copyToClipboard = function (e) {
+    var copyToClipboard = function () {
+        if (!inputRef.current)
+            return;
         inputRef.current.select();
         document.execCommand('copy');
         setAlert(true);
         inputRef.current.blur();
     };
-    var mergeInputRefs = function () {
-        var refs = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            refs[_i] = arguments[_i];
+    var handleDateChange = function (date) {
+        if (!date) {
+            setStartDate(null);
+            setInputValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
         }
-        return function (node) {
-            refs.forEach(function (ref) {
-                if (!ref)
-                    return;
-                if (typeof ref === "function") {
-                    ref(node);
-                }
-                else {
-                    ref.current = node;
-                }
-            });
-        };
+        var formattedValue = format ? (0, datePicker_1.formatDateValue)(date, format) : date.toISOString();
+        setStartDate(date);
+        setInputValue(formattedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formattedValue);
     };
-    var clearScheduledDateBlur = function () {
-        dateBlurTimeoutRef.current.forEach(function (timeoutId) { return window.clearTimeout(timeoutId); });
-        dateBlurTimeoutRef.current = [];
-    };
-    var blurDateInputAfterSelect = (0, react_1.useCallback)(function () {
-        if (inline)
-            return;
-        clearScheduledDateBlur();
-        var blur = function () {
-            var _a, _b, _c, _d, _e, _f;
-            (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_c = dateInputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
-            (_f = (_e = (_d = datePickerRef.current) === null || _d === void 0 ? void 0 : _d.input) === null || _e === void 0 ? void 0 : _e.blur) === null || _f === void 0 ? void 0 : _f.call(_e);
-        };
-        [0, 10, 50].forEach(function (delay) {
-            var timeoutId = window.setTimeout(blur, delay);
-            dateBlurTimeoutRef.current.push(timeoutId);
-        });
-    }, [inline]);
-    (0, react_1.useEffect)(function () { return function () { return clearScheduledDateBlur(); }; }, []);
     var CustomDateInput = (0, react_1.useMemo)(function () {
-        return (0, react_1.forwardRef)(function (props, ref) {
-            var displayValue = '';
-            if (props.value && format) {
-                try {
-                    var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
-                    displayValue = (0, date_fns_1.format)(date, format);
-                }
-                catch (_a) {
-                    displayValue = inputValue || '';
-                }
-            }
-            else {
-                displayValue = inputValue || '';
-            }
-            return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: mergeInputRefs(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
-        });
-    }, [format, hasCopyButton, hasError, infoText, inputValue, isCalendarOpen, isClearable, type]);
+        return (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: (0, datePicker_1.mergeInputRefs)(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen, id: id }, props, { value: (0, datePicker_1.getDateDisplayValue)(props.value, format, inputValue) }))); });
+    }, [dateInputRef, format, hasCopyButton, hasError, id, infoText, inputValue, isCalendarOpen, isClearable, type]);
     var handleClearValue = function () {
-        setInputValue(null);
-        inputRef.current.value = null;
-        setStartDate(null);
-        onChange(null);
-        if (onClear)
-            onClear();
+        var _a, _b;
+        setInputValue('');
+        if (type === 'date') {
+            setStartDate(null);
+            (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
     };
     var currentLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
     var showCharCount = showMaxLengthCounter && maxLength != null;
     var showTopRow = Boolean(label || customLinkText || showCharCount);
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
-                        : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date) {
-                                    if (date) {
-                                        setStartDate(date);
-                                        // DatePicker'dan gelen Date objesini format'a göre formatla
-                                        var formattedValue = (0, date_fns_1.format)(date, format);
-                                        setInputValue(formattedValue);
-                                        onChange(formattedValue);
-                                    }
-                                    else {
-                                        setStartDate(null);
-                                        setInputValue(null);
-                                        onChange(null);
-                                    }
-                                }, onSelect: function () {
-                                    blurDateInputAfterSelect();
-                                }, selected: startDate, ref: datePickerRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), 
-                                //customInput={<InputStyled $hasError={hasError} id={id}/>}
-                                inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, onCalendarOpen: function () {
-                                    setIsCalendarOpen(true);
-                                    if (onCalendarOpen) {
-                                        onCalendarOpen();
-                                    }
-                                }, onCalendarClose: function () {
-                                    setIsCalendarOpen(false);
-                                    blurDateInputAfterSelect();
-                                }, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
-                                    var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
-                                    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
-                                } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
-                                onChange(e);
-                                setInputValue(e.currentTarget.value);
-                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] }));
+    var hasInputIcon = (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
+    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
+                                var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
+                                return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { month: 'long' }), ",", ' ', monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { year: 'numeric' })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
+                            } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+                            setInputValue(e.currentTarget.value);
+                        }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other))), isClearable && inputValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
 };
 exports.default = Input;

package/dist/components/Input/Input.test.d.ts

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

package/dist/components/Input/Input.test.js

@@ -0,0 +1,118 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var Input_1 = __importDefault(require("./Input"));
+var props_1 = require("./props");
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (key) { return key; },
+    }); },
+}); });
+var renderInput = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props_1.InputDefault, { id: "input-test", label: "Label", onChange: jest.fn() }, props)));
+};
+describe('Input', function () {
+    it('renders label and placeholder', function () {
+        renderInput({ placeholder: 'Placeholder text' });
+        expect(react_1.screen.getByText('Label')).toBeInTheDocument();
+        expect(react_1.screen.getByPlaceholderText('Placeholder text')).toBeInTheDocument();
+    });
+    it('shows error message when hasError is true', function () {
+        renderInput({ hasError: true, errorMessage: 'Invalid value' });
+        expect(react_1.screen.getByText('Invalid value')).toBeInTheDocument();
+    });
+    it('toggles password visibility', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    container = renderInput({ type: 'password', placeholder: 'Password' }).container;
+                    input = react_1.screen.getByPlaceholderText('Password');
+                    expect(input).toHaveAttribute('type', 'password');
+                    return [4 /*yield*/, user_event_1.default.click(container.querySelector('.inputIcon'))];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveAttribute('type', 'text');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls onClear when clearable value is cleared', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClear, onChange, container;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClear = jest.fn();
+                    onChange = jest.fn();
+                    container = renderInput({
+                        isClearable: true,
+                        value: 'Clear me',
+                        onClear: onClear,
+                        onChange: onChange,
+                    }).container;
+                    return [4 /*yield*/, user_event_1.default.click(container.querySelector('.removeIcon'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledWith(null);
+                    expect(onClear).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('renders with potentially unsafe infoText without crashing', function () {
+        expect(function () { return renderInput({ infoText: '<script>alert(1)</script>Info' }); }).not.toThrow();
+    });
+});

package/dist/components/Input/hooks/useDatePickerCalendar.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import DatePicker from 'react-datepicker';
+type UseDatePickerCalendarOptions = {
+    inline?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onCalendarOpen?: () => void;
+};
+export declare const useDatePickerCalendar: ({ inline, disabled, readOnly, onCalendarOpen, }: UseDatePickerCalendarOptions) => {
+    calendarControlProps: {
+        open?: undefined;
+        preventOpenOnFocus?: undefined;
+        shouldCloseOnSelect?: undefined;
+        usePointerEvent?: undefined;
+        onInputClick?: undefined;
+        onClickOutside?: undefined;
+        onCalendarOpen?: undefined;
+        onCalendarClose?: undefined;
+        onSelect?: undefined;
+    } | {
+        open: boolean;
+        preventOpenOnFocus: boolean;
+        shouldCloseOnSelect: boolean;
+        usePointerEvent: boolean;
+        onInputClick: () => void;
+        onClickOutside: () => void;
+        onCalendarOpen: () => void;
+        onCalendarClose: () => void;
+        onSelect: () => void;
+    };
+    closeCalendar: () => void;
+    dateInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    datePickerRef: import("react").MutableRefObject<DatePicker>;
+    isCalendarOpen: boolean;
+};
+export {};

package/dist/components/Input/hooks/useDatePickerCalendar.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatePickerCalendar = void 0;
+var react_1 = require("react");
+var datePicker_1 = require("../utils/datePicker");
+var useDatePickerCalendar = function (_a) {
+    var _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, onCalendarOpen = _a.onCalendarOpen;
+    var datePickerRef = (0, react_1.useRef)(null);
+    var dateInputRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
+    var closeCalendar = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (inline)
+            return;
+        setIsCalendarOpen(false);
+        (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen) === null || _b === void 0 ? void 0 : _b.call(_a, false, true);
+    }, [inline]);
+    var openCalendar = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (inline || disabled || readOnly)
+            return;
+        setIsCalendarOpen(true);
+        (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen) === null || _b === void 0 ? void 0 : _b.call(_a, true);
+    }, [disabled, inline, readOnly]);
+    var toggleCalendar = (0, react_1.useCallback)(function () {
+        if (isCalendarOpen) {
+            closeCalendar();
+            return;
+        }
+        openCalendar();
+    }, [closeCalendar, isCalendarOpen, openCalendar]);
+    var handleCalendarOpen = (0, react_1.useCallback)(function () {
+        setIsCalendarOpen(true);
+        onCalendarOpen === null || onCalendarOpen === void 0 ? void 0 : onCalendarOpen();
+    }, [onCalendarOpen]);
+    var handleCalendarClose = (0, react_1.useCallback)(function () {
+        setIsCalendarOpen(false);
+    }, []);
+    var handleInputClick = (0, react_1.useCallback)(function () {
+        toggleCalendar();
+    }, [toggleCalendar]);
+    var handleClickOutside = (0, react_1.useCallback)(function () {
+        closeCalendar();
+    }, [closeCalendar]);
+    var handleDateSelect = (0, react_1.useCallback)(function () {
+        closeCalendar();
+    }, [closeCalendar]);
+    (0, react_1.useEffect)(function () {
+        if (inline || !isCalendarOpen)
+            return;
+        var handleOutsideInteraction = function (event) {
+            var target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (!(0, datePicker_1.isOutsideDatePicker)(target, dateInputRef.current))
+                return;
+            closeCalendar();
+        };
+        document.addEventListener('mousedown', handleOutsideInteraction);
+        document.addEventListener('touchstart', handleOutsideInteraction, { passive: true });
+        return function () {
+            document.removeEventListener('mousedown', handleOutsideInteraction);
+            document.removeEventListener('touchstart', handleOutsideInteraction);
+        };
+    }, [closeCalendar, inline, isCalendarOpen]);
+    var calendarControlProps = inline
+        ? {}
+        : {
+            open: isCalendarOpen,
+            preventOpenOnFocus: true,
+            shouldCloseOnSelect: true,
+            usePointerEvent: true,
+            onInputClick: handleInputClick,
+            onClickOutside: handleClickOutside,
+            onCalendarOpen: handleCalendarOpen,
+            onCalendarClose: handleCalendarClose,
+            onSelect: handleDateSelect,
+        };
+    return {
+        calendarControlProps: calendarControlProps,
+        closeCalendar: closeCalendar,
+        dateInputRef: dateInputRef,
+        datePickerRef: datePickerRef,
+        isCalendarOpen: isCalendarOpen,
+    };
+};
+exports.useDatePickerCalendar = useDatePickerCalendar;

package/dist/components/Input/hooks/useDatePickerCalendar.test.d.ts

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

package/dist/components/Input/hooks/useDatePickerCalendar.test.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var useDatePickerCalendar_1 = require("./useDatePickerCalendar");
+describe('useDatePickerCalendar', function () {
+    it('toggles calendar open state through input click handler', function () {
+        var setOpen = jest.fn();
+        var result = (0, react_1.renderHook)(function () {
+            return (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+                inline: false,
+            });
+        }).result;
+        (0, react_1.act)(function () {
+            var _a, _b;
+            result.current.datePickerRef.current = { setOpen: setOpen };
+            (_b = (_a = result.current.calendarControlProps).onInputClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        expect(result.current.isCalendarOpen).toBe(true);
+        expect(setOpen).toHaveBeenCalledWith(true);
+        (0, react_1.act)(function () {
+            var _a, _b;
+            (_b = (_a = result.current.calendarControlProps).onInputClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        expect(result.current.isCalendarOpen).toBe(false);
+        expect(setOpen).toHaveBeenCalledWith(false, true);
+    });
+    it('closes calendar on outside touch interaction', function () {
+        var setOpen = jest.fn();
+        var result = (0, react_1.renderHook)(function () {
+            return (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+                inline: false,
+            });
+        }).result;
+        (0, react_1.act)(function () {
+            var _a, _b;
+            result.current.datePickerRef.current = { setOpen: setOpen };
+            (_b = (_a = result.current.calendarControlProps).onCalendarOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        expect(result.current.isCalendarOpen).toBe(true);
+        (0, react_1.act)(function () {
+            document.dispatchEvent(new Event('touchstart', { bubbles: true }));
+        });
+        expect(result.current.isCalendarOpen).toBe(false);
+        expect(setOpen).toHaveBeenCalledWith(false, true);
+    });
+});

package/dist/components/Input/utils/datePicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const isFormattedDatePattern: (formatStr?: string | null) => boolean;
+export declare const parseDateValue: (value?: string | null, formatStr?: string | null) => Date | null;
+export declare const formatDateValue: (date: Date, formatStr: string) => string;
+export declare const getDateDisplayValue: (rawValue: string | undefined, formatStr: string | null | undefined, fallbackValue?: string | null) => string;
+export declare const mergeInputRefs: (...refs: Array<React.Ref<HTMLInputElement> | null | undefined>) => (node: HTMLInputElement | null) => void;
+export declare const isOutsideDatePicker: (target: Node, inputNode: HTMLInputElement | null) => boolean;

package/dist/components/Input/utils/datePicker.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOutsideDatePicker = exports.mergeInputRefs = exports.getDateDisplayValue = exports.formatDateValue = exports.parseDateValue = exports.isFormattedDatePattern = void 0;
+var date_fns_1 = require("date-fns");
+var isFormattedDatePattern = function (formatStr) {
+    return Boolean((formatStr === null || formatStr === void 0 ? void 0 : formatStr.includes('dd')) && formatStr.includes('MM') && formatStr.includes('yyyy'));
+};
+exports.isFormattedDatePattern = isFormattedDatePattern;
+var parseDateValue = function (value, formatStr) {
+    if (!value)
+        return null;
+    if ((0, exports.isFormattedDatePattern)(formatStr)) {
+        var parsed_1 = (0, date_fns_1.parse)(value, formatStr, new Date());
+        return (0, date_fns_1.isValid)(parsed_1) ? parsed_1 : null;
+    }
+    var parsed = new Date(value);
+    return (0, date_fns_1.isValid)(parsed) ? parsed : null;
+};
+exports.parseDateValue = parseDateValue;
+var formatDateValue = function (date, formatStr) { return (0, date_fns_1.format)(date, formatStr); };
+exports.formatDateValue = formatDateValue;
+var getDateDisplayValue = function (rawValue, formatStr, fallbackValue) {
+    if (!rawValue)
+        return fallbackValue || '';
+    if (!formatStr)
+        return fallbackValue || rawValue;
+    try {
+        var date = (0, date_fns_1.parse)(rawValue, 'yyyy-MM-dd', new Date());
+        return (0, date_fns_1.isValid)(date) ? (0, date_fns_1.format)(date, formatStr) : (fallbackValue || '');
+    }
+    catch (_a) {
+        return fallbackValue || '';
+    }
+};
+exports.getDateDisplayValue = getDateDisplayValue;
+var mergeInputRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (node) {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        });
+    };
+};
+exports.mergeInputRefs = mergeInputRefs;
+var isOutsideDatePicker = function (target, inputNode) {
+    var wrapper = inputNode === null || inputNode === void 0 ? void 0 : inputNode.closest('.react-datepicker-wrapper');
+    var popper = document.querySelector('.react-datepicker-popper');
+    return !(wrapper === null || wrapper === void 0 ? void 0 : wrapper.contains(target)) && !(popper === null || popper === void 0 ? void 0 : popper.contains(target));
+};
+exports.isOutsideDatePicker = isOutsideDatePicker;

package/dist/components/Input/utils/datePicker.test.d.ts

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

package/dist/components/Input/utils/datePicker.test.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var datePicker_1 = require("./datePicker");
+describe('datePicker utils', function () {
+    it('parses dd.MM.yyyy formatted values', function () {
+        var date = (0, datePicker_1.parseDateValue)('11.08.2026', 'dd.MM.yyyy');
+        expect(date === null || date === void 0 ? void 0 : date.getFullYear()).toBe(2026);
+        expect(date === null || date === void 0 ? void 0 : date.getMonth()).toBe(7);
+        expect(date === null || date === void 0 ? void 0 : date.getDate()).toBe(11);
+    });
+    it('returns null for invalid formatted values', function () {
+        expect((0, datePicker_1.parseDateValue)('not-a-date', 'dd.MM.yyyy')).toBeNull();
+    });
+    it('formats yyyy-MM-dd values for display', function () {
+        expect((0, datePicker_1.getDateDisplayValue)('2026-08-11', 'dd.MM.yyyy')).toBe('11.08.2026');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.19",
+  "version": "2.23.20",
   "files": [
     "dist"
   ],