albinasoft-ui-package 1.0.12 → 1.0.14

package/dist/components/CustomAutocompleteInput.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import '../assets/css/custom-autocomplete-input.css';
+interface CustomAutocompleteInputProps {
+    id?: string;
+    name?: string;
+    label: string;
+    value: string;
+    placeholder?: string;
+    required?: boolean;
+    description?: string | null;
+    errorMessage?: string;
+    conditionalErrorVisible?: boolean;
+    conditionalErrorMessage?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    fetchOptions: (query: string) => string[];
+    onSelect: (value: string) => void;
+}
+declare const CustomAutocompleteInput: React.FC<CustomAutocompleteInputProps>;
+export default CustomAutocompleteInput;

package/dist/components/CustomAutocompleteInput.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var fa_1 = require("react-icons/fa");
+var react_bootstrap_1 = require("react-bootstrap");
+require("../assets/css/custom-autocomplete-input.css");
+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, fetchOptions = _a.fetchOptions, onSelect = _a.onSelect;
+    var _e = (0, react_1.useState)(value || ''), inputValue = _e[0], setInputValue = _e[1];
+    var _f = (0, react_1.useState)([]), options = _f[0], setOptions = _f[1];
+    var _g = (0, react_1.useState)(false), isDropdownVisible = _g[0], setIsDropdownVisible = _g[1];
+    var dropdownRef = (0, react_1.useRef)(null);
+    // Input değiştiğinde fetchOptions çağır
+    var handleInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var value, fetchedOptions, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    value = e.target.value;
+                    setInputValue(value);
+                    if (!value) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, fetchOptions(value)];
+                case 2:
+                    fetchedOptions = _a.sent();
+                    setOptions(fetchedOptions);
+                    setIsDropdownVisible(fetchedOptions.length > 0);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('Fetch options failed:', error_1);
+                    setOptions([]);
+                    setIsDropdownVisible(false);
+                    return [3 /*break*/, 4];
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    setOptions([]);
+                    setIsDropdownVisible(false);
+                    _a.label = 6;
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    // Seçim yapıldığında onSelect çağır
+    var handleOptionClick = function (option) {
+        onSelect(option);
+        setIsDropdownVisible(false);
+        setInputValue(option);
+    };
+    // Dropdown dışında tıklanıldığında dropdown'u kapat
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsDropdownVisible(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    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("label", { htmlFor: id, className: "form-label" }, label),
+            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("input", { id: id, name: name, type: "text", value: inputValue, onChange: handleInputChange, placeholder: placeholder, 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); } }, option)); }))),
+            errorMessage && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
+                react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1" }),
+                errorMessage)),
+            conditionalErrorVisible && conditionalErrorMessage && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
+                react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-1" }),
+                conditionalErrorMessage)),
+            description && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
+                react_1.default.createElement(fa_1.FaInfoCircle, { className: "me-1" }),
+                description)))));
+};
+exports.default = CustomAutocompleteInput;

package/dist/components/CustomForm.d.ts

@@ -11,7 +11,8 @@ declare enum ElementType {
     DIVIDER = "divider",
     RICHTEXTBOX = "richtextbox",
     TREEVIEW = "treeview",
-    BUTTON = "button"
+    BUTTON = "button",
+    AUTOCOMPLETEINPUT = "autocompleteinput"
 }
 interface InputElement {
     id?: string;
@@ -125,13 +126,13 @@ interface TreeViewElement {
     id?: string;
     type: ElementType;
     label?: string;
-    value: string[];
+    value: string;
     treeData: TreeNode[];
     rowId?: number;
     colId?: number;
     innerRowId?: number;
     colClass?: string;
-    onChange: (selected: string[]) => void;
+    onChange: (selected: string) => void;
 }
 interface ButtonElement {
     id?: string;
@@ -144,7 +145,19 @@ interface ButtonElement {
     innerRowId?: number;
     colClass?: string;
 }
-type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement;
+interface AutoCompleteInputElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    fetchOptions: (query: string) => string[];
+    onSelect: (value: string) => void;
+}
+type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement | AutoCompleteInputElement;
 interface CustomFormProps {
     elements: FormElement[];
     onSubmit: (formValues: Record<string, any>) => void;

package/dist/components/CustomForm.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementType = exports.CustomForm = void 0;
 var react_1 = __importStar(require("react"));
 var react_toastify_1 = require("react-toastify");
-var CustomButton_1 = __importDefault(require("../components/CustomButton"));
+var CustomButton_1 = __importDefault(require("./CustomButton"));
 var CustomInput_1 = __importDefault(require("./CustomInput"));
 var CustomTextarea_1 = __importDefault(require("./CustomTextarea"));
 var CustomCheckbox_1 = __importDefault(require("./CustomCheckbox"));
@@ -51,6 +51,7 @@ var CustomText_1 = __importDefault(require("./CustomText"));
 var CustomDivider_1 = __importDefault(require("./CustomDivider"));
 var CustomRichTextbox_1 = __importDefault(require("./CustomRichTextbox"));
 var CustomTreeView_1 = __importDefault(require("./CustomTreeView"));
+var CustomAutocompleteInput_1 = __importDefault(require("./CustomAutocompleteInput"));
 var ElementType;
 (function (ElementType) {
     ElementType["INPUT"] = "input";
@@ -64,6 +65,7 @@ var ElementType;
     ElementType["RICHTEXTBOX"] = "richtextbox";
     ElementType["TREEVIEW"] = "treeview";
     ElementType["BUTTON"] = "button";
+    ElementType["AUTOCOMPLETEINPUT"] = "autocompleteinput";
 })(ElementType || (ElementType = {}));
 exports.ElementType = ElementType;
 var CustomForm = function (_a) {
@@ -115,8 +117,6 @@ var CustomForm = function (_a) {
                     formValues_1[element.id] = element.value; // RichTextbox değerini ekleme
                 }
             });
-            // Form verilerini JSON olarak çıktıya yazdır
-            //console.log(JSON.stringify(formValues, null, 2));
             onSubmit(formValues_1);
         }
         else {
@@ -145,12 +145,19 @@ var CustomForm = function (_a) {
                 var colId = _a[0], innerRows = _a[1];
                 return (react_1.default.createElement("div", { className: "col", key: "col-".concat(rowId, "-").concat(colId) }, Object.entries(innerRows).map(function (_a) {
                     var innerRowId = _a[0], elements = _a[1];
-                    return (react_1.default.createElement("div", { className: "row", key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || 'col-12', key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) :
-                        element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) :
-                            element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element))
-                            // ) : element.type === ElementType.UPLOADER ? (
-                            //   <CustomUploader {...(element as UploaderElement)} />
-                            ) : null)); })));
+                    return (react_1.default.createElement("div", { className: "row", key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || 'col-12', key: element.id }, element.type === ElementType.TEXT ?
+                        (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ?
+                        (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ?
+                        (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ?
+                        (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ?
+                        (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ?
+                        (react_1.default.createElement(CustomSelect_1.default, __assign({}, element))) : element.type === ElementType.DATETIMEPICKER ?
+                        (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : element.type === ElementType.DIVIDER ?
+                        (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ?
+                        (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) : element.type === ElementType.TREEVIEW ?
+                        (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) : element.type === ElementType.BUTTON ?
+                        (react_1.default.createElement(CustomButton_1.default, __assign({}, element))) : element.type === ElementType.AUTOCOMPLETEINPUT ?
+                        (react_1.default.createElement(CustomAutocompleteInput_1.default, __assign({}, element))) : null)); })));
                 })));
             })));
         }),

package/dist/components/CustomTreeView.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 interface CustomTreeViewProps {
     label?: string;
-    value: string[];
+    value: string;
     treeData: TreeNode[];
-    onChange: (selected: string[]) => void;
+    onChange: (selected: string) => void;
 }
 export interface TreeNode {
     label: string;

package/dist/components/CustomTreeView.js

@@ -1,4 +1,15 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,31 +50,89 @@ var react_1 = __importStar(require("react"));
 var react_checkbox_tree_1 = __importDefault(require("react-checkbox-tree"));
 require("react-checkbox-tree/lib/react-checkbox-tree.css");
 var fa_1 = require("react-icons/fa");
+var CustomInput_1 = __importStar(require("./CustomInput"));
 var CustomTreeView = function (_a) {
     var label = _a.label, value = _a.value, treeData = _a.treeData, onChange = _a.onChange;
-    var _b = (0, react_1.useState)(value), checked = _b[0], setChecked = _b[1]; // Seçilen düğümler
-    var _c = (0, react_1.useState)([]), expanded = _c[0], setExpanded = _c[1]; // Genişletilen düğümler
+    var _b = (0, react_1.useState)(value ? [value] : []), checked = _b[0], setChecked = _b[1];
+    var _c = (0, react_1.useState)([]), expanded = _c[0], setExpanded = _c[1];
+    var _d = (0, react_1.useState)(''), filterTerm = _d[0], setFilterTerm = _d[1];
+    var _e = (0, react_1.useState)(treeData), filteredTreeData = _e[0], setFilteredTreeData = _e[1];
+    var _f = (0, react_1.useState)([]), selectedPath = _f[0], setSelectedPath = _f[1]; // 🔥 Seçilen path
+    // 🚀 Recursive function to add `showCheckbox` only for leaf nodes
+    var markLeafCheckboxOnly = function (nodes) {
+        return nodes.map(function (node) { return (__assign(__assign({}, node), { showCheckbox: !(Array.isArray(node.children) && node.children.length > 0), children: node.children ? markLeafCheckboxOnly(node.children) : undefined })); });
+    };
+    // 🚀 Parent Path'i Bulma (recursive)
+    var findParentPath = function (nodes, targetValue, path) {
+        if (path === void 0) { path = []; }
+        for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+            var node = nodes_1[_i];
+            var currentPath = __spreadArray(__spreadArray([], path, true), [node.value], false);
+            if (node.value === targetValue) {
+                return currentPath;
+            }
+            if (node.children) {
+                var result = findParentPath(node.children, targetValue, currentPath);
+                if (result)
+                    return result;
+            }
+        }
+        return null;
+    };
+    // 🚀 Filtreleme fonksiyonu (path'leri de genişletiyoruz)
+    var filterTreeData = function (nodes, searchTerm) {
+        var pathsToExpand = [];
+        var filteredNodes = nodes.map(function (node) {
+            var nodeMatches = node.label.toLowerCase().includes(searchTerm.toLowerCase());
+            var children = node.children ? filterTreeData(node.children, searchTerm) : { filteredNodes: [], pathsToExpand: [] };
+            var childMatches = children.filteredNodes.length > 0;
+            if (nodeMatches || childMatches) {
+                pathsToExpand = __spreadArray(__spreadArray(__spreadArray([], pathsToExpand, true), [node.value], false), children.pathsToExpand, true);
+                return __assign(__assign({}, node), { children: childMatches ? children.filteredNodes : node.children });
+            }
+            return null;
+        }).filter(Boolean);
+        return { filteredNodes: filteredNodes, pathsToExpand: pathsToExpand };
+    };
+    // 🚀 Filtreleme işlemi
+    (0, react_1.useEffect)(function () {
+        if (filterTerm.trim() === '') {
+            setFilteredTreeData(treeData);
+            setExpanded(__spreadArray([], selectedPath, true)); // 🔥 Seçim yapılmış path açık kalsın
+        }
+        else {
+            var _a = filterTreeData(treeData, filterTerm), filteredNodes = _a.filteredNodes, pathsToExpand = _a.pathsToExpand;
+            setFilteredTreeData(filteredNodes);
+            setExpanded(Array.from(new Set(__spreadArray(__spreadArray([], pathsToExpand, true), selectedPath, true)))); // 🔥 Genişletilecek tüm path'leri belirle
+        }
+    }, [filterTerm, treeData, selectedPath]);
+    // 🚀 Kullanıcı bir leaf seçtiğinde, o leaf'in parent'larını genişlet
     var handleCheck = function (checkedNodes) {
-        setChecked(checkedNodes);
-        onChange(checkedNodes);
+        var newlySelected = checkedNodes.find(function (node) { return !checked.includes(node); });
+        var selectedLeaf = newlySelected || '';
+        setChecked(selectedLeaf ? [selectedLeaf] : []);
+        if (selectedLeaf) {
+            var parentPath = findParentPath(treeData, selectedLeaf);
+            if (parentPath) {
+                setSelectedPath(parentPath); // 🔥 Kalıcı olarak bu path'i hatırla
+                setExpanded(parentPath); // 🔥 Yalnızca bu leaf'in parent path'i açık kalacak
+            }
+        }
+        setFilterTerm(''); // 🔥 Arama kutusunu temizle
+        onChange(selectedLeaf);
     };
     return (react_1.default.createElement("div", null,
         label && react_1.default.createElement("label", null, label),
-        react_1.default.createElement(react_checkbox_tree_1.default, { nodes: treeData, checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
+        react_1.default.createElement(CustomInput_1.default, { id: "tree-search", label: "Ara", value: filterTerm, inputType: CustomInput_1.InputType.TEXT, placeholder: "Ara...", onChange: function (e) { return setFilterTerm(e.target.value); } }),
+        react_1.default.createElement(react_checkbox_tree_1.default, { nodes: markLeafCheckboxOnly(filteredTreeData), checked: checked, expanded: expanded, onCheck: handleCheck, onExpand: setExpanded, icons: {
                 check: react_1.default.createElement(fa_1.FaCheckSquare, { color: "#4caf50" }),
-                //uncheck: <FaSquare color="#f44336" />,
                 uncheck: react_1.default.createElement(fa_1.FaSquare, { color: "currentColor" }),
                 halfCheck: react_1.default.createElement(fa_1.FaMinusSquare, { color: "#ff9800" }),
                 expandClose: react_1.default.createElement(fa_1.FaChevronRight, { color: "#3f51b5" }),
                 expandOpen: react_1.default.createElement(fa_1.FaChevronDown, { color: "#3f51b5" }),
-                expandAll: react_1.default.createElement(fa_1.FaChevronRight, { color: "#2196f3" }),
-                collapseAll: react_1.default.createElement(fa_1.FaChevronDown, { color: "#2196f3" }),
                 parentClose: react_1.default.createElement(fa_1.FaFolder, { color: "#ff9800" }),
                 parentOpen: react_1.default.createElement(fa_1.FaFolderOpen, { color: "#ff9800" }),
                 leaf: react_1.default.createElement(fa_1.FaFile, { color: "#607d8b" }),
-                // parentClose: null, 
-                // parentOpen: null, 
-                // leaf: null,
             } })));
 };
 exports.default = CustomTreeView;

package/dist/custom-autocomplete-input.css

@@ -0,0 +1,35 @@
+.autocomplete-container {
+  position: relative; /* Dropdown'u input'un kapsayıcısına bağlamak için */
+}
+
+.autocomplete-dropdown {
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1050;
+  max-height: 200px;
+  overflow-y: auto;
+  position: absolute;
+  width: 100%;
+}
+
+.autocomplete-option {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.autocomplete-option:hover {
+  background-color: #f1f1f1;
+}
+
+/* Dark Mode */
+.dark .autocomplete-dropdown {
+  background-color: #333;
+  color: #fff;
+  border: 1px solid #444;
+}
+
+.dark .autocomplete-option:hover {
+  background-color: #444;
+}

package/dist/index.d.ts

@@ -12,4 +12,5 @@ import CustomTab from './components/CustomTab';
 import CustomText from './components/CustomText';
 import CustomTextarea from './components/CustomTextarea';
 import CustomTreeView from './components/CustomTreeView';
-export { CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, };
+import CustomAutocompleteInput from './components/CustomAutocompleteInput';
+export { CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
+exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
 var CustomButton_1 = __importDefault(require("./components/CustomButton"));
 exports.CustomButton = CustomButton_1.default;
 var CustomCheckbox_1 = __importDefault(require("./components/CustomCheckbox"));
@@ -32,3 +32,5 @@ var CustomTextarea_1 = __importDefault(require("./components/CustomTextarea"));
 exports.CustomTextarea = CustomTextarea_1.default;
 var CustomTreeView_1 = __importDefault(require("./components/CustomTreeView"));
 exports.CustomTreeView = CustomTreeView_1.default;
+var CustomAutocompleteInput_1 = __importDefault(require("./components/CustomAutocompleteInput"));
+exports.CustomAutocompleteInput = CustomAutocompleteInput_1.default;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && xcopy /E /Y src\\assets\\css\\*.css dist\\",
     "prepare": "npm run build"
   },
   "dependencies": {