albinasoft-ui-package 1.0.63 → 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/package.json

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