@sydsoft/base 1.41.0 → 1.43.0

package/dist/esm/_lib/baseFunctions.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 export declare const isDev: boolean;
 export declare const isServerReq: (context: any) => boolean;
-export declare function tumuBuyukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
-export declare function tumuKucukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
-export declare function seoCevirFunction(e: React.ChangeEvent<HTMLInputElement>): void;
+export declare const padNumber: (num: number, padLength?: number, padString?: string) => string;
+export declare function inputTumuBuyukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
+export declare function inputTumuKucukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
+export declare const convertLowerCase: (text?: any) => any;
+export declare const convertForSearch: (value: string) => string;
+export declare function convertForSEO(e: React.ChangeEvent<HTMLInputElement>): void;
 export declare function getDomain(context?: any): string;
+export declare const uniqueID: (key?: string, length?: number) => string;

package/dist/esm/_lib/baseFunctions.js

@@ -1,24 +1,45 @@
 export var isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
 export var isServerReq = function (context) { var _a, _b; return !((_b = (_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.url) === null || _b === void 0 ? void 0 : _b.startsWith('/_next')); };
-export function tumuBuyukCevir(e) {
+export var padNumber = function (num, padLength, padString) {
+    if (padLength === void 0) { padLength = 2; }
+    if (padString === void 0) { padString = '0'; }
+    return String(num).padStart(padLength, padString);
+};
+export function inputTumuBuyukCevir(e) {
     var _a;
     if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
         var start = e.target.selectionStart;
         var end = e.target.selectionEnd;
-        e.target.value = e.target.value.toString().toLocaleUpperCase('tr');
+        e.target.value = e.target.value.toString().toLocaleUpperCase('tr-TR');
         e.target.setSelectionRange(start, end);
     }
 }
-export function tumuKucukCevir(e) {
+export function inputTumuKucukCevir(e) {
     var _a;
     if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
         var start = e.target.selectionStart;
         var end = e.target.selectionEnd;
-        e.target.value = e.target.value.toString().toLocaleLowerCase('tr');
+        e.target.value = e.target.value.toString().toLocaleLowerCase('tr-TR');
         e.target.setSelectionRange(start, end);
     }
 }
-export function seoCevirFunction(e) {
+export var convertLowerCase = function (text) {
+    if (text === void 0) { text = ''; }
+    return text.toString().toLocaleLowerCase('tr-TR');
+};
+export var convertForSearch = function (value) {
+    var data = value === null || value === void 0 ? void 0 : value.toString().toLocaleLowerCase('tr-TR');
+    data = data.replace(/ö/g, 'o');
+    data = data.replace(/ç/g, 'c');
+    data = data.replace(/ş/g, 's');
+    data = data.replace(/ı/g, 'i');
+    data = data.replace(/ğ/g, 'g');
+    data = data.replace(/ü/g, 'u');
+    data = data.replace(/[^a-z\d]/g, ''); // %_- are allowed
+    data = data.replace(/^\s+|\s+$/g, '');
+    return data;
+};
+export function convertForSEO(e) {
     var _a;
     if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
         var start = e.target.selectionStart;
@@ -61,3 +82,12 @@ export function getDomain(context) {
     }
     return url;
 }
+export var uniqueID = function (key, length) {
+    if (key === void 0) { key = ''; }
+    if (length === void 0) { length = 16; }
+    return (key +
+        parseInt(Math.ceil(Math.random() * Date.now())
+            .toPrecision(length)
+            .toString()
+            .replace('.', '')));
+};

package/dist/esm/_lib/listFunctions.d.ts

@@ -0,0 +1,2 @@
+export declare const onKeyboardSelection: ({ e, targetElement, itemClass, selectedClass, checkByValue, checkByInput, clear }: any) => null | undefined;
+export declare function setScrollListPosition(targetElement: any): void;

package/dist/esm/_lib/listFunctions.js

@@ -0,0 +1,114 @@
+export var onKeyboardSelection = function (_a) {
+    var e = _a.e, targetElement = _a.targetElement, _b = _a.itemClass, itemClass = _b === void 0 ? "item" : _b, _c = _a.selectedClass, selectedClass = _c === void 0 ? "selected" : _c, checkByValue = _a.checkByValue, checkByInput = _a.checkByInput, clear = _a.clear;
+    if (!targetElement.current)
+        return null;
+    var config = {
+        e: e,
+        itemClass: itemClass,
+        selectedClass: selectedClass,
+    };
+    function selectEnter() {
+        if (!targetElement.current)
+            return null;
+        var text = targetElement.current.querySelector("".concat(config.itemClass, ".").concat(config.selectedClass));
+        if (text) {
+            checkByValue(text.dataset.value);
+        }
+        else if (targetElement.current.querySelectorAll("".concat(config.itemClass)).length > 0) {
+            var target = targetElement.current.querySelectorAll("".concat(config.itemClass, ".").concat(config.selectedClass))[0];
+            checkByValue(target.dataset.value);
+        }
+        else {
+            clear(true, true);
+        }
+    }
+    function selectFirst() {
+        if (!targetElement.current)
+            return null;
+        var showList = targetElement.current.querySelectorAll("".concat(config.itemClass));
+        if (showList.length > 0) {
+            showList[0].classList.add(config.selectedClass);
+        }
+    }
+    function selectLast() {
+        if (!targetElement.current)
+            return null;
+        var showList = targetElement.current.querySelectorAll("".concat(config.itemClass));
+        if (showList.length > 0) {
+            showList[showList.length - 1].classList.add(config.selectedClass);
+        }
+    }
+    function selectNext(element) {
+        element.classList.remove(config.selectedClass);
+        var next = element.nextElementSibling;
+        if (next && next.nodeType !== -1) {
+            if (next.classList.contains("item")) {
+                next.classList.add(config.selectedClass);
+            }
+            else {
+                selectNext(next);
+            }
+        }
+        else {
+            selectFirst();
+        }
+    }
+    function selectPrev(element) {
+        element.classList.remove(config.selectedClass);
+        var next = element.previousElementSibling;
+        if (next && next.nodeType !== -1) {
+            if (next.classList.contains("item")) {
+                next.classList.add(config.selectedClass);
+            }
+            else {
+                selectPrev(next);
+            }
+        }
+        else {
+            selectLast();
+        }
+    }
+    var selected = targetElement.current.querySelector("".concat(config.itemClass, ".").concat(config.selectedClass));
+    if (e.which == 40) {
+        if (selected) {
+            selectNext(selected);
+        }
+        else {
+            selectFirst();
+        }
+    }
+    else if (e.which == 38) {
+        if (selected) {
+            selectPrev(selected);
+        }
+        else {
+            selectLast();
+        }
+    }
+    else if (e.which == 35) {
+        selectLast();
+    }
+    else if (e.which == 36) {
+        selectFirst();
+    }
+    else if (e.which == 13) {
+        selectEnter();
+    }
+    else if (e.which == 9) {
+        checkByInput();
+    }
+    setScrollListPosition(targetElement);
+};
+export function setScrollListPosition(targetElement) {
+    if (targetElement.current) {
+        var position = 0;
+        var text = targetElement.current.querySelector(".selected");
+        if (text) {
+            position = text.offsetTop - 35;
+        }
+        else if (targetElement.current.querySelector(".active")) {
+            position = targetElement.current.querySelector(".active").offsetTop - 35;
+        }
+        targetElement.current.scrollTop = position;
+    }
+}

package/dist/esm/_lib/storage/localStorage.js

@@ -1,6 +1,6 @@
-import { decData, encData } from "./encData";
-import { isDev } from "../baseFunctions";
-var storageAvailable = typeof Storage === "undefined" || !window.localStorage ? false : true;
+import { decData, encData } from './encData';
+import { isDev } from '../baseFunctions';
+var storageAvailable = typeof Storage === 'undefined' || !window.localStorage ? false : true;
 export var setLocalStorage = function (key, value) {
     if (!storageAvailable)
         return false;
@@ -9,7 +9,7 @@ export var setLocalStorage = function (key, value) {
         return true;
     }
     catch (e) {
-        isDev && console.log("ERROR => localStorage =>", e);
+        isDev && console.log('ERROR => localStorage =>', e);
         return false;
     }
 };
@@ -21,7 +21,7 @@ export var getLocalStorage = function (key) {
         return saved ? decData(saved) : null;
     }
     catch (e) {
-        isDev && console.log("ERROR => localStorage =>", e);
+        isDev && console.log('ERROR => localStorage =>', e);
         return null;
     }
 };
@@ -33,7 +33,7 @@ export var removeLocalStorage = function (key) {
         return true;
     }
     catch (e) {
-        isDev && console.log("ERROR => localStorage =>", e);
+        isDev && console.log('ERROR => localStorage =>', e);
         return false;
     }
 };
@@ -45,7 +45,7 @@ export var clearLocalStorage = function () {
         return true;
     }
     catch (e) {
-        isDev && console.log("ERROR => localStorage =>", e);
+        isDev && console.log('ERROR => localStorage =>', e);
         return false;
     }
 };

package/dist/esm/form/Input.js

@@ -1,10 +1,10 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { seoCevirFunction, tumuBuyukCevir, tumuKucukCevir } from '../_lib/baseFunctions';
-import { applyInputMask } from '../_lib/inputMask';
-import { alert_add } from '../alert';
+import { convertForSEO, inputTumuBuyukCevir, inputTumuKucukCevir } from '../_lib/baseFunctions';
 import { Dialog } from './Dialog';
+import { alert_add } from '../alert';
+import { applyInputMask } from '../_lib/inputMask';
 import styles from './styles/Input.module.css';
 export var Input = function (_a) {
     var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, value = _a.value, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, disabled = _a.disabled, required = _a.required, loading = _a.loading, autoFocus = _a.autoFocus, select = _a.select, _b = _a.valueKey, valueKey = _b === void 0 ? 'value' : _b, _c = _a.labelKey, labelKey = _c === void 0 ? 'label' : _c, ilkSec = _a.ilkSec, multiline = _a.multiline, rows = _a.rows, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _d = _a.mask, mask = _d === void 0 ? '' : _d, _e = _a.maskSettings, maskSettings = _e === void 0 ? {
@@ -66,11 +66,11 @@ export var Input = function (_a) {
     }, [mask]);
     var Change = useCallback(function (e) {
         if (tumuBuyuk)
-            tumuBuyukCevir(e);
+            inputTumuBuyukCevir(e);
         if (tumuKucuk)
-            tumuKucukCevir(e);
+            inputTumuKucukCevir(e);
         if (seoCevir)
-            seoCevirFunction(e);
+            convertForSEO(e);
         setInputFilled(e.target.value.length > 0);
         onChange ? onChange(e) : null;
     }, [onChange, seoCevir, tumuBuyuk, tumuKucuk]);

package/dist/esm/form/SearchableInput.d.ts

@@ -1,22 +1,23 @@
-import React from 'react';
-import { PropsInput } from './Input';
+/// <reference types="react" />
+import { PropsInput } from './index';
 type typeList = {
     value?: string;
     label?: string;
-    [key: string | number]: any;
-}[];
+    [key: string]: any;
+};
+type typeValue = string | number | undefined;
+type typeVoidFunction = () => void;
 interface Props extends PropsInput {
-    autoCompleteList?: typeList;
-    onChange?: (e: any) => void;
-    value: string | number | undefined;
+    autoCompleteList?: typeList[];
+    isDataFromApi: boolean;
+    value: typeValue;
     valueKey?: string;
     labelKey?: string;
-    itemComponent?: any;
-    isDataFromApi?: boolean;
-    parentInputValue?: string | number | undefined;
+    itemComponent?: (option: typeList) => React.ReactNode;
+    parentInputValue?: typeValue;
+    onChange?: (e: any) => void;
     onText?: (text: string) => void;
     onSelect?: (item: any) => void;
-    onLoad?: (value: string | number) => void;
     ilkSec?: boolean;
     newCreate?: boolean;
     style?: React.CSSProperties;
@@ -25,13 +26,13 @@ interface Props extends PropsInput {
     loadingMessage?: string;
     notFoundMessage?: string;
 }
-type handle = {
+export interface SearchableInputRef {
+    setAutoCompleteList: (list: typeList[], value?: typeValue, callback?: typeVoidFunction) => void;
+    clear: (openList?: boolean, focusInput?: boolean) => void;
     open: () => void;
     close: () => void;
-    checkByValue: (value: string, openList: boolean) => void;
+    checkByValue: (value: typeValue, openList?: boolean) => void;
     setLoading: (loading: boolean) => void;
-    setAutoCompleteList: (list: typeList, value?: string | null) => void;
-    clear: (openList?: boolean, focusInput?: boolean) => void;
-};
-export declare const SearchableInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<handle>>;
+}
+export declare const SearchableInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SearchableInputRef>>;
 export {};

package/dist/esm/form/SearchableInput.js

@@ -1,24 +1,41 @@
 import { __assign, __rest, __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Input } from './Input';
-import { isDev } from '../_lib/baseFunctions';
+import { Button, Input } from './index';
+import { convertForSearch, convertLowerCase } from '../_lib/baseFunctions';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { onKeyboardSelection, setScrollListPosition } from '../_lib/listFunctions';
 import { Icon } from '../icon';
-import { Button } from './Button';
 import styles from './styles/SearchableInput.module.css';
-var Component = function (_a, forwardedRef) {
-    var _b = _a.autoCompleteList, autoCompleteList = _b === void 0 ? [] : _b, _c = _a.isDataFromApi, isDataFromApi = _c === void 0 ? false : _c, onText = _a.onText, onSelect = _a.onSelect, onLoad = _a.onLoad, onChange = _a.onChange, _d = _a.newCreate, newCreate = _d === void 0 ? false : _d, name = _a.name, value = _a.value, itemComponent = _a.itemComponent, inputRef = _a.inputRef, _e = _a.valueKey, valueKey = _e === void 0 ? 'value' : _e, _f = _a.labelKey, labelKey = _f === void 0 ? 'label' : _f, placeholder = _a.placeholder, endAdornment = _a.endAdornment, style = _a.style, disabled = _a.disabled, parentInputValue = _a.parentInputValue, _g = _a.listPositionRelative, listPositionRelative = _g === void 0 ? false : _g, _h = _a.loadingMessage, loadingMessage = _h === void 0 ? 'Lütfen bekleyiniz...' : _h, _j = _a.notFoundMessage, notFoundMessage = _j === void 0 ? 'Kayıt bulunamadı...' : _j, _k = _a.ilkSec, ilkSec = _k === void 0 ? false : _k, other = __rest(_a, ["autoCompleteList", "isDataFromApi", "onText", "onSelect", "onLoad", "onChange", "newCreate", "name", "value", "itemComponent", "inputRef", "valueKey", "labelKey", "placeholder", "endAdornment", "style", "disabled", "parentInputValue", "listPositionRelative", "loadingMessage", "notFoundMessage", "ilkSec"]);
+export var SearchableInput = forwardRef(function (_a, ref) {
+    var autoCompleteList = _a.autoCompleteList, isDataFromApi = _a.isDataFromApi, name = _a.name, value = _a.value, parentInputValue = _a.parentInputValue, disabled = _a.disabled, itemComponent = _a.itemComponent, _b = _a.valueKey, valueKey = _b === void 0 ? 'value' : _b, _c = _a.labelKey, labelKey = _c === void 0 ? 'label' : _c, onSelect = _a.onSelect, onChange = _a.onChange, onText = _a.onText, style = _a.style, _d = _a.listPositionRelative, listPositionRelative = _d === void 0 ? false : _d, _e = _a.loadingMessage, loadingMessage = _e === void 0 ? 'Lütfen bekleyiniz...' : _e, _f = _a.notFoundMessage, notFoundMessage = _f === void 0 ? 'Kayıt bulunamadı...' : _f, placeholder = _a.placeholder, endAdornment = _a.endAdornment, _g = _a.ilkSec, ilkSec = _g === void 0 ? false : _g, _h = _a.newCreate, newCreate = _h === void 0 ? false : _h, inputRef = _a.inputRef, other = __rest(_a, ["autoCompleteList", "isDataFromApi", "name", "value", "parentInputValue", "disabled", "itemComponent", "valueKey", "labelKey", "onSelect", "onChange", "onText", "style", "listPositionRelative", "loadingMessage", "notFoundMessage", "placeholder", "endAdornment", "ilkSec", "newCreate", "inputRef"]);
     var refMain = useRef(null);
     var refInput = useRef(null);
-    var refComponentInput = useRef(null);
     var refList = useRef(null);
-    var _l = useState([]), data = _l[0], setData = _l[1];
+    var _j = useState(autoCompleteList !== null && autoCompleteList !== void 0 ? autoCompleteList : []), data = _j[0], setData = _j[1];
+    var _k = useState(value !== null && value !== void 0 ? value : undefined), selectedValue = _k[0], setSelectedValue = _k[1];
+    var _l = useState(parentInputValue !== null && parentInputValue !== void 0 ? parentInputValue : undefined), parentValue = _l[0], setParentValue = _l[1];
     var _m = useState(''), text = _m[0], setText = _m[1]; //Inputta görünen
     var _o = useState(''), filter = _o[0], setFilter = _o[1]; // Filtrelemeye tabi tutulan
-    var _p = useState(false), open = _p[0], setOpen = _p[1];
-    var _q = useState(isDataFromApi && autoCompleteList.length === 0), loading = _q[0], setLoading = _q[1];
-    var _r = useState({ created: false }), newItemCreate = _r[0], setNewItemCreate = _r[1];
-    useImperativeHandle(forwardedRef, function () { return ({
+    var _p = useState({ created: false }), newItemCreate = _p[0], setNewItemCreate = _p[1];
+    var _q = useState(false), open = _q[0], setOpen = _q[1];
+    var _r = useState(isDataFromApi && (!autoCompleteList || (autoCompleteList === null || autoCompleteList === void 0 ? void 0 : autoCompleteList.length) == 0)), loading = _r[0], setLoading = _r[1];
+    useImperativeHandle(ref, function () { return ({
+        setAutoCompleteList: function (list, value) {
+            if (value === void 0) { value = undefined; }
+            if (autoCompleteList && (autoCompleteList === null || autoCompleteList === void 0 ? void 0 : autoCompleteList.length) > 0) {
+                alert('AutoCompleteList zaten tanımlı olduğundan dışardan data seti değiştirilemez.');
+                return;
+            }
+            setData(list);
+            value && sendChange(value);
+            setLoading(false);
+            // isDev && console.log('setAutoCompleteList =>', name, value, list);
+        },
+        clear: function (openList, focusInput) {
+            if (openList === void 0) { openList = false; }
+            if (focusInput === void 0) { focusInput = false; }
+            return clear(openList, focusInput);
+        },
         open: function () {
             setOpen(true);
             refInput.current && refInput.current.focus();
@@ -28,68 +45,46 @@ var Component = function (_a, forwardedRef) {
             if (openList === void 0) { openList = false; }
             return checkByValue(value, openList);
         },
-        setLoading: function (value) { return setLoading(value); },
-        setAutoCompleteList: function (list, value) {
-            if (value === void 0) { value = null; }
-            setData(list);
-            if (value)
-                checkByValue(value, false, list);
-            setLoading(false);
-        },
-        clear: function (openList, focusInput) {
-            if (openList === void 0) { openList = false; }
-            if (focusInput === void 0) { focusInput = false; }
-            return clear(openList, focusInput);
-        }
-    }); });
-    var handleUpdatePosition = function () {
-        if (open && !listPositionRelative && refMain) {
-            setFixedPosition(refMain);
-        }
-    };
-    useEffect(function () {
-        if (onLoad)
-            onLoad(value !== null && value !== void 0 ? value : '');
-    }, []);
+        setLoading: function (value) { return setLoading(value); }
+    }); }, [autoCompleteList, data, value]);
     useEffect(function () {
         if (inputRef)
             inputRef.current = refInput.current;
     }, [refInput.current]);
     useEffect(function () {
-        if (parentInputValue !== undefined && parentInputValue !== null) {
-            clear(false);
-            isDev && console.log(name, 'parentInputValueDeğişti =>', parentInputValue);
-        }
-    }, [parentInputValue]);
-    useEffect(function () {
-        if (autoCompleteList && Array.isArray(autoCompleteList) && autoCompleteList.length > 0) {
+        if (autoCompleteList && Array.isArray(autoCompleteList) && JSON.stringify(autoCompleteList) !== JSON.stringify(data) && autoCompleteList.length > 0) {
             setData(autoCompleteList);
-            isDev && console.log('autoCompleteList =>', name, autoCompleteList);
+            // isDev && console.log('autoCompleteList =>', name, autoCompleteList, data);
         }
     }, [autoCompleteList]);
     useEffect(function () {
+        // isDev && console.log('data =>', name, data, 'selectedValue =>', selectedValue, 'value =>', value);
         if (data.length > 0) {
-            if (value && value.toString().length > 0) {
-                if (!isDataFromApi)
-                    checkByValue(value, open);
-            }
-            else {
-                if (ilkSec)
-                    checkByValue(data[0][valueKey], false);
+            setLoading(false);
+            checkByValue(selectedValue, open);
+            if (!value) {
+                ilkSec && checkByValue(data[0][valueKey], false);
             }
         }
+        else {
+            !isDataFromApi && clear();
+        }
     }, [data]);
+    // Seçim değişikliğinde parent'ı bilgilendir
     useEffect(function () {
-        if (data.length > 0) {
-            if (value && value.toString().length > 0) {
-                checkByValue(value, open);
-            }
-            else {
-                if (!isDataFromApi)
-                    clear(false);
-            }
+        // isDev && console.log('selectedValue =>', name, selectedValue, 'value =>', value);
+        if ((value === null || value === void 0 ? void 0 : value.toString()) != (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString())) {
+            checkByValue(value, open);
+            // isDev && console.log('value Kontrol ediliyor', value, selectedValue);
         }
     }, [value]);
+    useEffect(function () {
+        if (parentInputValue !== parentValue) {
+            setParentValue(parentInputValue);
+            clear(false);
+            // isDev && console.log(name, 'parentInputValueDeğişti =>', parentInputValue);
+        }
+    }, [parentInputValue]);
     useEffect(function () {
         var checkHideBackDrop = function (e) {
             if (open && refMain.current && !refMain.current.contains(e.target)) {
@@ -104,7 +99,7 @@ var Component = function (_a, forwardedRef) {
         if (refMain.current)
             refMain.current.addEventListener('keydown', checkESC);
         if (open) {
-            setScrollPosition();
+            setScrollListPosition(refList);
             if (!listPositionRelative) {
                 window.addEventListener('scroll', handleUpdatePosition, true);
                 window.addEventListener('resize', handleUpdatePosition);
@@ -119,84 +114,39 @@ var Component = function (_a, forwardedRef) {
         };
     }, [open]);
     useLayoutEffect(function () { return handleUpdatePosition(); }, [open]);
-    var cevirTumuKucuk = function (text) {
-        if (text === void 0) { text = ''; }
-        return text.toString().toLocaleLowerCase('tr-TR');
-    };
-    var convertForSearch = useCallback(function (value) {
-        var data = cevirTumuKucuk(value);
-        data = data.replace(/ö/g, 'o');
-        data = data.replace(/ç/g, 'c');
-        data = data.replace(/ş/g, 's');
-        data = data.replace(/ı/g, 'i');
-        data = data.replace(/ğ/g, 'g');
-        data = data.replace(/ü/g, 'u');
-        data = data.replace(/[^a-z\d]/g, ''); // %_- are allowed
-        data = data.replace(/^\s+|\s+$/g, '');
-        return data;
-    }, [cevirTumuKucuk]);
-    var filteredData = useMemo(function () {
-        var _a;
-        var list;
-        if (filter.length > 0) {
-            list = data.filter(function (item) { return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter; });
-        }
-        else {
-            list = data;
-        }
-        if (newCreate && text.length > 0) {
-            var filterText = data.find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
-            if (!filterText) {
-                var newItem = (_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a);
-                list = __spreadArray([newItem], list, true);
-                setNewItemCreate(newItem);
-            }
-            else {
-                if (newItemCreate.create)
-                    setNewItemCreate({ create: false });
-            }
-        }
-        return list;
-    }, [data, filter, newCreate, text, valueKey, labelKey]);
-    var setValue = useCallback(function (result, openList) {
+    var setValue = useCallback(function (item, openList) {
+        var newValue = item && item[valueKey] ? item[valueKey] : '';
+        var newLabel = item && item[labelKey] ? item[labelKey] : '';
         setOpen(openList);
-        var newValue = result && result[valueKey] ? result[valueKey] : '';
-        if (result) {
-            var newLabel = result && result[labelKey] ? result[labelKey] : '';
-            setText(newLabel);
-        }
+        setText(newLabel);
+        // isDev && console.log('setValue', newValue, 'item', item, 'value', value);
+        if (newValue === selectedValue)
+            return;
         setFilter('');
-        if (onChange && newValue != value) {
-            onChange({
-                target: {
-                    name: name,
-                    value: newValue
-                }
-            });
-        }
-        if (onSelect)
-            onSelect(result);
-    }, [onChange, onSelect, name, value, valueKey, labelKey]);
-    var Change = useCallback(function (e) {
-        setValue(false, true);
+        setSelectedValue(newValue);
+        onChange && sendChange(newValue);
+        onSelect && onSelect(item);
+    }, [onChange, onSelect, name, selectedValue, valueKey, labelKey]);
+    var textInputOnChange = useCallback(function (e) {
+        setSelectedValue(undefined);
         setText(e.target.value);
         setFilter(e.target.value.trim());
         setOpen(true);
-        if (onText)
-            onText(e.target.value);
+        onText && onText(e.target.value);
     }, [setValue, onText]);
     var checkByValue = useCallback(function (value, openList, list) {
         if (openList === void 0) { openList = false; }
         if (list === void 0) { list = []; }
         var targetList = list.length > 0 ? list : data;
-        var find = Object.values(targetList).find(function (item) { return cevirTumuKucuk(item[valueKey]) === cevirTumuKucuk(value); });
+        var find = Object.values(targetList).find(function (item) { return convertLowerCase(item[valueKey]) === convertLowerCase(value); });
         if (!find && newCreate && newItemCreate.create) {
             find = newItemCreate;
         }
+        // isDev && console.log('find', find, 'value', value, data);
         setValue(find, openList);
     }, [data, valueKey, newCreate, newItemCreate, setValue]);
     var checkByInput = useCallback(function () {
-        var findByLabel = data.find(function (item) { return cevirTumuKucuk(item[labelKey]) === cevirTumuKucuk(refInput.current.value); });
+        var findByLabel = data.find(function (item) { var _a; return convertLowerCase(item[labelKey]) === convertLowerCase((_a = refInput.current) === null || _a === void 0 ? void 0 : _a.value); });
         if (findByLabel && value == findByLabel[valueKey]) {
             setOpen(false);
             return;
@@ -215,120 +165,62 @@ var Component = function (_a, forwardedRef) {
         if (focusInput === void 0) { focusInput = false; }
         setFilter('');
         setText('');
-        setValue(false, openList);
-        if (onText)
-            onText('');
-        if (focusInput)
-            (_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setValue(undefined, openList);
+        onText && onText('');
+        focusInput && ((_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [setValue, onText]);
-    function setScrollPosition() {
-        if (refList.current) {
-            var position = 0;
-            var text_1 = refList.current.querySelector('li.item.selected');
-            if (text_1) {
-                position = text_1.offsetTop - 35;
-            }
-            else if (refList.current.querySelector('li.item.active')) {
-                position = refList.current.querySelector('li.item.active').offsetTop - 35;
-            }
-            refList.current.scrollTop = position;
-        }
-    }
-    var onKeyDown = function (e) {
-        if (!open)
-            return null;
-        function selectEnter() {
-            var text = refList.current.querySelector('li.item.selected');
-            if (text) {
-                checkByValue(text.dataset.value);
-            }
-            else if (refList.current.querySelectorAll('li.item').length > 0) {
-                checkByValue(refList.current.querySelectorAll('li.item')[0].dataset.value);
-            }
-            else {
-                clear(true, true);
-            }
-        }
-        function selectFirst() {
-            var showList = refList.current.querySelectorAll('li.item');
-            if (showList.length > 0) {
-                showList[0].classList.add('selected');
-            }
-        }
-        function selectLast() {
-            var showList = refList.current.querySelectorAll('li.item');
-            if (showList.length > 0) {
-                showList[showList.length - 1].classList.add('selected');
-            }
+    var sendChange = useCallback(function (value) {
+        if (onChange && value !== selectedValue) {
+            onChange({ target: { name: name, value: value } });
         }
-        function selectNext(element) {
-            element.classList.remove('selected');
-            var next = element.nextElementSibling;
-            if (next && next.nodeType !== -1) {
-                if (next.classList.contains('item')) {
-                    next.classList.add('selected');
-                }
-                else {
-                    selectNext(next);
-                }
-            }
-            else {
-                selectFirst();
-            }
-        }
-        function selectPrev(element) {
-            element.classList.remove('selected');
-            var next = element.previousElementSibling;
-            if (next && next.nodeType !== -1) {
-                if (next.classList.contains('item')) {
-                    next.classList.add('selected');
-                }
-                else {
-                    selectPrev(next);
-                }
-            }
-            else {
-                selectLast();
-            }
+    }, [onChange, name]);
+    var filteredData = useMemo(function () {
+        var _a;
+        var list;
+        if (filter.length > 0) {
+            list = data.filter(function (item) { return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter; });
         }
-        var selected = refList.current.querySelector('li.item.selected');
-        if (e.which == 40) {
-            if (selected) {
-                selectNext(selected);
-            }
-            else {
-                selectFirst();
-            }
+        else {
+            list = data;
         }
-        else if (e.which == 38) {
-            if (selected) {
-                selectPrev(selected);
+        if (newCreate && text.length > 0) {
+            var filterText = data.find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
+            if (!filterText) {
+                var newItem = (_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a);
+                list = __spreadArray([newItem], list, true);
+                setNewItemCreate(newItem);
             }
             else {
-                selectLast();
+                if (newItemCreate.create)
+                    setNewItemCreate({ create: false });
             }
         }
-        else if (e.which == 35) {
-            selectLast();
-        }
-        else if (e.which == 36) {
-            selectFirst();
-        }
-        else if (e.which == 13) {
-            selectEnter();
-        }
-        else if (e.which == 9) {
-            checkByInput();
+        return list;
+    }, [data, filter, newCreate, text, valueKey, labelKey]);
+    var handleUpdatePosition = function () {
+        if (open && !listPositionRelative && refMain) {
+            setFixedPosition(refMain);
         }
-        setScrollPosition();
     };
-    return (_jsxs("div", { ref: refMain, className: styles.searchableInputComponent, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { name: name, value: text, inputRef: refInput, componentRef: refComponentInput, onFocus: function () { return setOpen(true); }, onChange: Change, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: 'Temizle', tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { name: 'close', style: { color: '#444' } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !(data.length > 0), onClick: function () { return setOpen(!open); }, onlyIcon: _jsx(Icon, { name: open ? 'keyboard_arrow_up' : 'keyboard_arrow_down', style: { color: '#444' } }) })] })), placeholder: loading ? 'Lütfen bekleyiniz...' : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: 'off' }) })), open && (_jsx("div", { className: 'listDiv', "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "list ".concat(open ? 'open' : ''), children: [(filteredData.length === 0 || loading) && _jsx("div", { className: "message ".concat(loading ? 'loading' : ''), children: loading ? loadingMessage : notFoundMessage }), filteredData.map(function (item, key) {
+    var onKeyDown = function (e) {
+        if (!open || !refList.current)
+            return null;
+        onKeyboardSelection({
+            e: e,
+            targetElement: refList,
+            checkByInput: checkByInput,
+            checkByValue: checkByValue,
+            clear: clear,
+            itemClass: 'li.item',
+            selectedClass: 'selected'
+        });
+    };
+    return (_jsxs("div", { ref: refMain, className: styles.searchableInputComponent, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { inputRef: refInput, name: name, value: text, onFocus: function () { return !disabled && setOpen(true); }, onChange: textInputOnChange, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: 'Temizle', tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { name: 'close', style: { color: '#444' } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !(data.length > 0), onClick: function () { return !disabled && setOpen(!open); }, onlyIcon: _jsx(Icon, { name: open ? 'keyboard_arrow_up' : 'keyboard_arrow_down', style: { color: '#444' } }) })] })), placeholder: loading ? 'Lütfen bekleyiniz...' : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: 'off' }) })), open && (_jsx("div", { className: 'listDiv', "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "list ".concat(open ? 'open' : ''), children: [(filteredData.length === 0 || loading) && _jsx("div", { className: "message ".concat(loading ? 'loading' : ''), children: loading ? loadingMessage : notFoundMessage }), filteredData.map(function (item, key) {
                             var itemValue = item[valueKey];
                             var itemLabel = item[labelKey];
-                            return (_jsxs("li", { className: "item ".concat(itemValue === value ? 'active' : ''), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: 'newCreate', children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
+                            return (_jsxs("li", { className: "item ".concat(itemValue === selectedValue ? 'active' : ''), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: 'newCreate', children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
                         })] }) }))] }));
-};
-export var SearchableInput = React.forwardRef(Component);
+});
 var setFixedPosition = function (refMain) {
     if (!refMain.current)
         return;

package/dist/esm/form/styles/Input.module.css

@@ -14,12 +14,12 @@
     border-radius: 6px;
 }
 
-.component[data-disabled="true"] {
+.component[data-disabled='true'] {
     background: #ebebeb;
 }
 
-.component[data-disabled="true"],
-.component[data-disabled="true"] * {
+.component[data-disabled='true'],
+.component[data-disabled='true'] * {
     pointer-events: none;
     cursor: not-allowed;
 }
@@ -41,7 +41,7 @@
     color: transparent;
 }
 
-.component[data-disabled="true"] .loading:before {
+.component[data-disabled='true'] .loading:before {
     background: #ebebeb;
 }
 
@@ -125,15 +125,15 @@
     display: block;
     min-width: 0;
     width: 100%;
-    padding: 12px 14px;
+    padding: 9px 14px;
     border: none;
     outline: none;
     z-index: 1;
     text-overflow: ellipsis;
     border-radius: 6px;
 }
-.input[type="number"]::-webkit-outer-spin-button,
-.input[type="number"]::-webkit-inner-spin-button {
+.input[type='number']::-webkit-outer-spin-button,
+.input[type='number']::-webkit-inner-spin-button {
     appearance: none;
 }
 
@@ -169,7 +169,7 @@
 .loading:before {
     position: absolute;
     display: block;
-    content: "";
+    content: '';
     z-index: 12;
     top: 2px;
     left: 2px;
@@ -182,7 +182,7 @@
 .loading:after {
     position: absolute;
     display: block;
-    content: "";
+    content: '';
     z-index: 11;
     width: 12px;
     height: 12px;

package/dist/esm/form/styles/SearchableInput.module.css

@@ -2,7 +2,7 @@
   cursor: unset;
 }
 .searchableInputComponent input {
-  padding: 12px 14px;
+
 }
 
 .searchableInputComponent :global(.listDiv) {

package/dist/esm/index.d.ts

@@ -1,5 +1,6 @@
 export * from './_lib/baseFunctions';
 export * from './_lib/inputMask';
+export * from './_lib/listFunctions';
 export * from './_lib/storage/cookies';
 export * from './_lib/storage/encData';
 export * from './_lib/storage/localStorage';

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 export * from './_lib/baseFunctions';
 export * from './_lib/inputMask';
+export * from './_lib/listFunctions';
 export * from './_lib/storage/cookies';
 export * from './_lib/storage/encData';
 export * from './_lib/storage/localStorage';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.41.0",
+    "version": "1.43.0",
     "description": "",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",