albinasoft-ui-package 1.0.62 → 1.0.64

package/dist/assets/css/custom-autocomplete-input.css

@@ -39,3 +39,11 @@ mark {
   color: black;
   font-weight: bold;
 }
+
+.autocomplete-option.highlighted {
+  background-color: #e9ecef;
+}
+
+.dark .autocomplete-option.highlighted {
+  background-color: #949494;
+}

package/dist/components/CustomAutocompleteInput.d.ts

@@ -16,7 +16,7 @@ interface CustomAutocompleteInputProps {
     className?: string;
     style?: React.CSSProperties;
     lang?: string;
-    fetchOptions: (query: string) => string[];
+    fetchOptions: (query: string) => Promise<string[]>;
     onSelect: (value: string) => void;
 }
 declare const CustomAutocompleteInput: React.FC<CustomAutocompleteInputProps>;

package/dist/components/CustomAutocompleteInput.js

@@ -67,11 +67,11 @@ var CustomInput_1 = __importStar(require("./CustomInput"));
 var CustomAutocompleteInput = function (_a) {
     var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, description = _a.description, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, _d = _a.className, className = _d === void 0 ? '' : _d, style = _a.style, _e = _a.lang, lang = _e === void 0 ? 'tr-TR' : _e, fetchOptions = _a.fetchOptions, onSelect = _a.onSelect;
     var _f = (0, react_1.useState)(value || ''), inputValue = _f[0], setInputValue = _f[1];
-    var _g = (0, react_1.useState)(null), selectedValue = _g[0], setSelectedValue = _g[1];
-    var _h = (0, react_1.useState)([]), options = _h[0], setOptions = _h[1];
-    var _j = (0, react_1.useState)(false), isDropdownVisible = _j[0], setIsDropdownVisible = _j[1];
+    var _g = (0, react_1.useState)([]), options = _g[0], setOptions = _g[1];
+    var _h = (0, react_1.useState)(false), isDropdownVisible = _h[0], setIsDropdownVisible = _h[1];
+    var _j = (0, react_1.useState)(-1), highlightedIndex = _j[0], setHighlightedIndex = _j[1];
     var dropdownRef = (0, react_1.useRef)(null);
-    // Input değiştiğinde fetchOptions çağır
+    // Input değeri değişince fetchOptions ile seçenekleri getiriyoruz.
     var handleInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var value, fetchedOptions, error_1;
         return __generator(this, function (_a) {
@@ -79,7 +79,6 @@ var CustomAutocompleteInput = function (_a) {
                 case 0:
                     value = e.target.value;
                     setInputValue(value);
-                    setSelectedValue(null);
                     if (!value) return [3 /*break*/, 5];
                     _a.label = 1;
                 case 1:
@@ -89,6 +88,7 @@ var CustomAutocompleteInput = function (_a) {
                     fetchedOptions = _a.sent();
                     setOptions(fetchedOptions);
                     setIsDropdownVisible(fetchedOptions.length > 0);
+                    setHighlightedIndex(-1); // Her aramada highlight'ı resetliyoruz.
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
@@ -105,30 +105,46 @@ var CustomAutocompleteInput = function (_a) {
             }
         });
     }); };
-    // Seçim yapıldığında onSelect çağır
+    // Bir seçenek tıklandığında
     var handleOptionClick = function (option) {
-        setSelectedValue(option);
         onSelect(option);
-        //setIsDropdownVisible(false);
-        //setInputValue(option);
     };
     var handleReset = function () {
         setIsDropdownVisible(false);
         setInputValue('');
-        setSelectedValue('');
     };
-    // Dropdown dışında tıklanıldığında dropdown'u kapat
+    // Klavyeden gelen tuşlara tepki veren handler
+    var handleKeyDown = function (e) {
+        if (!isDropdownVisible)
+            return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setHighlightedIndex(function (prev) { return (prev < options.length - 1 ? prev + 1 : 0); });
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setHighlightedIndex(function (prev) { return (prev > 0 ? prev - 1 : options.length - 1); });
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+                handleOptionClick(options[highlightedIndex]);
+            }
+        }
+        else if (e.key === 'Escape') {
+            setIsDropdownVisible(false);
+        }
+    };
+    // Vurgulanan öğenin görünür olmasını sağlamak için scrollIntoView kullanıyoruz.
     (0, react_1.useEffect)(function () {
-        // const handleClickOutside = (event: MouseEvent) => {
-        //     if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        //         setIsDropdownVisible(false);
-        //     }
-        // };
-        // document.addEventListener('mousedown', handleClickOutside);
-        // return () => {
-        //     document.removeEventListener('mousedown', handleClickOutside);
-        // };
-    }, []);
+        if (dropdownRef.current) {
+            var highlightedItem = dropdownRef.current.querySelector('.autocomplete-option.highlighted');
+            if (highlightedItem) {
+                highlightedItem.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [highlightedIndex]);
+    // Fonksiyon, eşleşen kısmı <mark> etiketiyle vurguluyor.
     var highlightMatch = function (option, query) {
         if (!query)
             return option;
@@ -152,9 +168,9 @@ var CustomAutocompleteInput = function (_a) {
     return (react_1.default.createElement("div", { className: "autocomplete-container ".concat(className), style: style },
         react_1.default.createElement("div", { className: "form-group" },
             react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
-                react_1.default.createElement(CustomInput_1.default, { id: id, name: name, label: label, inputType: CustomInput_1.InputType.TEXT, value: inputValue, onChange: handleInputChange, placeholder: placeholder, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: 'btn btn-danger bg-soft-danger', buttonOnClick: handleReset, className: "form-control", required: required, disabled: disabled })),
-            isDropdownVisible && (react_1.default.createElement("div", { className: "autocomplete-dropdown", ref: dropdownRef }, options.map(function (option, index) { return (react_1.default.createElement("div", { key: index, className: "autocomplete-option", onClick: function () { return handleOptionClick(option); }, dangerouslySetInnerHTML: {
-                    __html: highlightMatch(option, inputValue), // Highlighting
+                react_1.default.createElement(CustomInput_1.default, { id: id, name: name, label: label, inputType: CustomInput_1.InputType.TEXT, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: "btn btn-danger bg-soft-danger", buttonOnClick: handleReset, className: "form-control", required: required, disabled: disabled })),
+            isDropdownVisible && (react_1.default.createElement("div", { className: "autocomplete-dropdown", ref: dropdownRef }, options.map(function (option, index) { return (react_1.default.createElement("div", { key: index, className: "autocomplete-option ".concat(index === highlightedIndex ? 'highlighted' : ''), onClick: function () { return handleOptionClick(option); }, dangerouslySetInnerHTML: {
+                    __html: highlightMatch(option, inputValue),
                 } })); }))),
             errorMessage && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
                 react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1" }),

package/dist/components/CustomForm.d.ts

@@ -156,7 +156,7 @@ interface AutoCompleteInputElement {
     colId?: number;
     innerRowId?: number;
     colClass?: string;
-    fetchOptions: (query: string) => string[];
+    fetchOptions: (query: string) => Promise<string[]>;
     onSelect: (value: string) => void;
 }
 interface FileUploaderElement {

package/dist/components/CustomInput.d.ts

@@ -30,6 +30,7 @@ interface CustomInputProps {
     className?: string;
     buttonOnClick?: () => void;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 declare const CustomInput: React.FC<CustomInputProps>;
 export { CustomInput, InputType };

package/dist/components/CustomInput.js

@@ -42,7 +42,7 @@ var InputType;
 })(InputType || (InputType = {}));
 exports.InputType = InputType;
 var CustomInput = function (_a) {
-    var id = _a.id, name = _a.name, label = _a.label, _b = _a.inputType, inputType = _b === void 0 ? InputType.TEXT : _b, value = _a.value, placeholder = _a.placeholder, _c = _a.required, required = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, _d = _a.conditionalErrorVisible, conditionalErrorVisible = _d === void 0 ? false : _d, conditionalErrorMessage = _a.conditionalErrorMessage, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, buttonIcon = _a.buttonIcon, buttonClass = _a.buttonClass, buttonTooltip = _a.buttonTooltip, description = _a.description, tooltip = _a.tooltip, style = _a.style, mainClass = _a.mainClass, className = _a.className, buttonOnClick = _a.buttonOnClick, onChange = _a.onChange;
+    var id = _a.id, name = _a.name, label = _a.label, _b = _a.inputType, inputType = _b === void 0 ? InputType.TEXT : _b, value = _a.value, placeholder = _a.placeholder, _c = _a.required, required = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, _d = _a.conditionalErrorVisible, conditionalErrorVisible = _d === void 0 ? false : _d, conditionalErrorMessage = _a.conditionalErrorMessage, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, buttonIcon = _a.buttonIcon, buttonClass = _a.buttonClass, buttonTooltip = _a.buttonTooltip, description = _a.description, tooltip = _a.tooltip, style = _a.style, mainClass = _a.mainClass, className = _a.className, buttonOnClick = _a.buttonOnClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown;
     var _g = (0, react_1.useState)(false), showPassword = _g[0], setShowPassword = _g[1];
     var handleType = inputType === InputType.PASSWORD && showPassword
         ? InputType.TEXT
@@ -53,10 +53,10 @@ var CustomInput = function (_a) {
     var renderInput = function () {
         // If inputType is TEL, use ReactInputMask
         if (inputType === InputType.TEL) {
-            return (react_1.default.createElement(react_input_mask_1.default, { mask: "0(999) 999 99 99", value: value, onChange: onChange, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
+            return (react_1.default.createElement(react_input_mask_1.default, { mask: "0(999) 999 99 99", value: value, onChange: onChange, onKeyDown: onKeyDown, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
         }
         // Otherwise, return a normal input element
-        return (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
+        return (react_1.default.createElement("input", { id: id, name: name, type: handleType, value: value, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: "form-control ".concat(className), style: style, required: required, disabled: disabled, readOnly: readOnly, autoComplete: "new-password" }));
     };
     return (react_1.default.createElement("div", { className: mainClass },
         react_1.default.createElement("div", { className: "form-group" },

package/dist/components/CustomText.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare enum TextType {
     BOLDHEAD = "boldhead",
     HEADING = "heading",

package/dist/components/CustomText.js

@@ -79,9 +79,7 @@ var Color;
 exports.Color = Color;
 var CustomText = function (_a) {
     var _b;
-    var id = _a.id, value = _a.value, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.textType, textType = _e === void 0 ? TextType.PARAGRAPH : _e, // Varsayılan olarak 'paragraph'
-    color = _a.color, textAlign = _a.textAlign, fontSize = _a.fontSize, lineHeight = _a.lineHeight, fontWeight = _a.fontWeight, _f = _a.underline, underline = _f === void 0 ? false : _f, _g = _a.overline, overline = _g === void 0 ? false : _g, _h = _a.linethrough, linethrough = _h === void 0 ? false : _h, _j = _a.italic, italic = _j === void 0 ? false : _j, textAlignClass = _a.textAlignClass, linkText = _a.linkText;
-    // Varsayılan stiller
+    var id = _a.id, value = _a.value, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.textType, textType = _e === void 0 ? TextType.PARAGRAPH : _e, color = _a.color, textAlign = _a.textAlign, fontSize = _a.fontSize, lineHeight = _a.lineHeight, fontWeight = _a.fontWeight, _f = _a.underline, underline = _f === void 0 ? false : _f, _g = _a.overline, overline = _g === void 0 ? false : _g, _h = _a.linethrough, linethrough = _h === void 0 ? false : _h, _j = _a.italic, italic = _j === void 0 ? false : _j, textAlignClass = _a.textAlignClass, linkText = _a.linkText;
     var defaultStyles = (_b = {},
         _b[TextType.BOLDHEAD] = {
             fontSize: FontSize.XL,
@@ -104,7 +102,6 @@ var CustomText = function (_a) {
             fontWeight: FontWeight.THIN,
         },
         _b);
-    // Dinamik sınıf ekleme
     if (textType == TextType.BOLDHEAD && !color) {
         color = Color.DARK;
     }
@@ -126,31 +123,36 @@ var CustomText = function (_a) {
     else if (textAlign == TextAlign.END) {
         textAlignClass = "text-end";
     }
-    // Text decoration birleştirme
     var textDecoration = [
-        underline ? 'underline' : '',
-        overline ? 'overline' : '',
-        linethrough ? 'line-through' : '',
+        underline ? "underline" : "",
+        overline ? "overline" : "",
+        linethrough ? "line-through" : "",
     ]
         .filter(Boolean)
-        .join(' ');
-    // Varsayılan stil ile kullanıcı stilini birleştir
-    var combinedStyle = __assign(__assign(__assign({}, defaultStyles[textType]), { textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : defaultStyles[textType].textAlign, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : defaultStyles[textType].fontSize, lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : defaultStyles[textType].lineHeight, fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : defaultStyles[textType].fontWeight, textDecoration: textDecoration || undefined, fontStyle: italic ? 'italic' : undefined }), style);
+        .join(" ");
+    var combinedStyle = __assign(__assign(__assign({}, defaultStyles[textType]), { textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : defaultStyles[textType].textAlign, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : defaultStyles[textType].fontSize, lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : defaultStyles[textType].lineHeight, fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : defaultStyles[textType].fontWeight, textDecoration: textDecoration || undefined, fontStyle: italic ? "italic" : undefined }), style);
     var combinedClassName = "".concat(color, " ").concat(className).trim();
-    // URL'leri tıklanabilir hale getirme
-    var renderWithLinks = function (text, linkText) {
-        var urlRegex = /(https?:\/\/[^\s]+|www\.[^\s]+)/g; // URL'leri algılayan RegEx
-        var parts = text.split(urlRegex);
-        return parts.map(function (part, index) {
-            return urlRegex.test(part) ? (react_1.default.createElement("a", { key: index, href: part.startsWith('http') ? part : "https://".concat(part), target: "_blank", rel: "noopener noreferrer", style: { wordBreak: 'break-all' } },
-                linkText || part.replace(/https?:\/\/|www\.|\/$/g, ''),
-                " ")) : (part);
+    /**
+     * Metindeki düz linkleri `<a>` etiketi ile sarmalar ve HTML olarak render eder.
+     */
+    var processTextWithLinks = function (text, linkText) {
+        if (typeof text !== "string")
+            return text;
+        // URL regex
+        var urlRegex = /(https?:\/\/[^\s]+|www\.[^\s]+)/g;
+        // Önce tüm satırları parçala (HTML olarak yazıldıysa çalışsın)
+        return text
+            .split("\n")
+            .map(function (line, lineIndex) {
+            // Metin içinde link var mı kontrol et
+            var parts = line.split(urlRegex);
+            return (react_1.default.createElement("p", { key: lineIndex, style: { margin: "0" } }, parts.map(function (part, index) {
+                return urlRegex.test(part) ? (react_1.default.createElement("a", { key: index, href: part.startsWith("http") ? part : "https://".concat(part), target: "_blank", rel: "noopener noreferrer", style: { wordBreak: "break-word", color: "#007bff" } }, linkText || part.replace(/https?:\/\/|www\.|\/$/g, ""))) : (react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: part }, key: index }));
+            })));
         });
     };
     return (react_1.default.createElement("div", { className: "".concat(textAlignClass) },
-        react_1.default.createElement("span", { id: id || "custom-text-".concat(Date.now()), className: "custom-text ".concat(combinedClassName), style: combinedStyle },
-            renderWithLinks(value, linkText),
-            " ")));
+        react_1.default.createElement("span", { id: id || "custom-text-".concat(Date.now()), className: "custom-text ".concat(combinedClassName), style: combinedStyle }, processTextWithLinks(value, linkText))));
 };
 exports.CustomText = CustomText;
 exports.default = CustomText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {