ar-design 0.4.63 → 0.4.65

package/dist/components/data-display/table/index.js

@@ -22,7 +22,6 @@ import DatePicker from "../../form/date-picker";
 import { useTranslation } from "../../../libs/core/application/hooks";
 const { Row, Column } = Grid;
 const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, selectionDisabled, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
-    // refs
     const _innerRef = useRef(null);
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
@@ -30,59 +29,42 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const _dragItem = useRef(null);
     const _checkboxItems = useRef([]);
     const _filterCheckboxItems = useRef([]);
-    // refs -> Search
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
-    // refs -> Properties
     const _propertiesButton = useRef([]);
-    // refs -> Filter
     const _filterButton = useRef([]);
-    // refs -> Selection
     const _selectionItems = useRef([]);
     const lastSentRef = useRef([]);
-    // variables
     const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
     const _subrowSelector = config.subrow?.selector ?? "subitems";
-    const _subrowButton = config.subrow?.button ?? true;
-    // className
+    const _subrowButton = config.subrow?.button ?? false;
     const _tableClassName = ["ar-table", "scroll"];
-    // states
     const [selectAll, setSelectAll] = useState(false);
     const [showSubitems, setShowSubitems] = useState({});
-    // states -> Action Buttons
     const [createTrigger, setCreateTrigger] = useState(false);
-    // states -> Search
     const [searchedText, setSearchedText] = useState(null);
     const [_searchedParams, setSearchedParams] = useState(null);
     const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(null);
-    // states -> Sort
     const [sortConfig, setSortConfig] = useState([]);
     const [sortCurrentColumn, setSortCurrentColumn] = useState(null);
-    // states -> Properties
     const [openProperties, setOpenProperties] = useState(false);
     const [propertiesButtonCoordinate, setPropertiesButtonCoordinate] = useState({
         x: 0,
         y: 0,
     });
-    // states -> Filter
     const [filterButtonCoordinate, setFilterButtonCoordinate] = useState({ x: 0, y: 0 });
     const [filterPopupContent, setFilterPopupContent] = useState(null);
     const [filterPopupOption, setFilterPopupOption] = useState(null);
     const [filterPopupOptionSearchText, setFilterPopupOptionSearchText] = useState(null);
-    // states -> Filter Fields Backup
     const [openFilter, setOpenFilter] = useState(false);
     const [filterCurrentColumn, setFilterCurrentColumn] = useState(null);
     const [filterCurrentDataType, setFilterCurrentDataType] = useState(null);
     const [filterCurrentIndex, setFilterCurrentIndex] = useState(null);
-    // states -> Pagination
     const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
     const [selectedPerPage, setSelectedPerPage] = useState(pagination?.perPage ?? 10);
-    // states -> Mobil
     const [isMobile, setIsMobile] = useState(false);
-    // hooks
     const { t } = useTranslation(String(config.locale ?? "tr"));
-    // Dışarıdan gelen ref'i _innerRef'e bağla.
     useImperativeHandle(ref, () => _innerRef.current);
     if (config && Object.keys(config.scroll || {}).length > 0) {
         if (_tableContent.current && config.scroll) {
@@ -91,7 +73,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             }
         }
     }
-    // methods
     const handleScroll = useCallback(() => {
         if (!_tableWrapper.current)
             return;
@@ -105,12 +86,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     .filter((node) => node.nodeType === Node.ELEMENT_NODE)
                     .filter((child) => child.dataset.stickyPosition === "right")
                     .reverse();
-                // Calculate positions and minimize `getBoundingClientRect` calls
                 const leftRects = leftChildren.map((child) => child.getBoundingClientRect());
                 const rightRects = rightChildren.map((child) => child.getBoundingClientRect());
                 const leftPrevious = leftRects.map((rect) => Math.abs(rect.right - wrapperRect.left));
                 const rightPrevious = rightRects.map((rect) => Math.abs(rect.left - wrapperRect.right));
-                // #region Left
                 leftChildren.forEach((child, index) => {
                     const prevLeft = index > 0 ? leftPrevious[index - 1] : 0;
                     if (index > 0) {
@@ -128,8 +107,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     if (child.nodeName === "TD")
                         child.style.zIndex = `5`;
                 });
-                // #endregion
-                // #region Right
                 rightChildren.forEach((child, index) => {
                     const prevRight = index > 0 ? rightPrevious[index - 1] : 0;
                     if (index > 0) {
@@ -145,7 +122,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     else
                         child.classList.add("sticky");
                 });
-                // #endregion
             });
         };
         const theadElements = _tableWrapper.current.querySelectorAll("table > thead > tr");
@@ -156,12 +132,12 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         });
     }, []);
     const handleResize = useMemo(() => {
-        return (_) => {
+        return () => {
             setIsMobile(window.innerWidth <= 768);
         };
     }, []);
     const handleSearch = useCallback((name, value, dataType) => {
-        const operator = filterPopupOption?.key == name
+        const operator = filterPopupOption?.key === name
             ? filterPopupOption.option?.value
             : FilterOperator.Contains;
         if (config.isServerSide) {
@@ -180,16 +156,16 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             setSearchedText((prev) => {
                 const _state = { ...prev };
                 if (value === "") {
-                    delete _state[name]; // Key'i siliyoruz
+                    delete _state[name];
                 }
                 else {
-                    _state[name] = { value: value, operator: operator }; // Yeni değeri ekliyoruz
+                    _state[name] = { value: value, operator: operator };
                 }
                 return _state;
             });
         }
         setCurrentPage(1);
-    }, [filterPopupOption]);
+    }, [filterPopupOption, config.isServerSide, pagination, selectedPerPage]);
     const handleCheckboxChange = useCallback(async (event) => {
         event.stopPropagation();
         const { name, value, checked } = event.target;
@@ -199,7 +175,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             checked ? updatedSet.add(value) : updatedSet.delete(value);
             const updatedArray = Array.from(updatedSet).map((v) => ({
                 value: v,
-                operator: FilterOperator.Equals, // Checkbox’lar genelde “Equals” anlamındadır.
+                operator: FilterOperator.Equals,
             }));
             return {
                 ...prev,
@@ -211,15 +187,12 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         const key = ExtractKey(c.key);
         if (!key)
             return;
-        const value = Array.isArray(searchedText?.[key])
-            ? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
-            : searchedText?.[key]?.value;
-        const handleChange = (value) => {
+        const value = Array.isArray(searchedText?.[key]) ? "" : searchedText?.[key]?.value;
+        const handleChange = (val) => {
             const input = _searchTextInputs.current[index ?? 0];
             if (input) {
-                const event = new Event("input", { bubbles: true });
-                input.value = value;
-                input.dispatchEvent(event);
+                input.value = val;
+                handleSearch(key, val, dataType);
             }
         };
         setFilterPopupContent(() => {
@@ -237,16 +210,15 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 case "boolean":
                     return (React.createElement(Row, null,
                         React.createElement(Column, { size: 12 },
-                            React.createElement(Input, { value: value ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value), placeholder: t("Table.Filters.Search.Input.Placeholder") })),
+                            React.createElement(Input, { value: filterPopupOptionSearchText ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value), placeholder: t("Table.Filters.Search.Input.Placeholder") })),
                         React.createElement(Column, { size: 12 }, c.filters
                             ?.filter((filter) => filter.text.toLocaleLowerCase().includes(filterPopupOptionSearchText?.toLocaleLowerCase() ?? ""))
                             ?.map((filter, fIndex) => {
                             const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
-                            return (React.createElement("div", null,
+                            return (React.createElement("div", { key: `filter-check-${fIndex}` },
                                 React.createElement(Checkbox, { ref: (element) => {
-                                        if (!element)
-                                            return;
-                                        _filterCheckboxItems.current[fIndex] = element;
+                                        if (element)
+                                            _filterCheckboxItems.current[fIndex] = element;
                                     }, variant: "filled", color: "green", label: filter.text, name: name, value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
                                         checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
                         }))));
@@ -255,17 +227,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             }
         });
     };
-    // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon olarak kullanılmaktadır.
-    const deepSearch = (item, searchedText) => {
-        if (!searchedText || Object.keys(searchedText).length === 0)
+    const deepSearch = (item, searchParams) => {
+        if (!searchParams || Object.keys(searchParams).length === 0)
             return true;
         const applyOperator = (value, filter) => {
             if (Array.isArray(value)) {
-                // Array içindeki herhangi bir öğe eşleşirse true dön
-                return value.some((item) => applyOperator(item, filter));
+                return value.some((arrItem) => applyOperator(arrItem, filter));
             }
             if (typeof value === "object" && value !== null) {
-                // Eğer obje ise, içindeki değerlerden biri eşleşirse true dön
                 return Object.values(value).some((v) => applyOperator(v, filter));
             }
             const text = String(value ?? "").toLocaleLowerCase();
@@ -291,7 +260,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     return false;
             }
         };
-        return Object.entries(searchedText).every(([key, param]) => {
+        return Object.entries(searchParams).every(([key, param]) => {
             const _itemValue = item[key];
             if (Array.isArray(param)) {
                 if (param.length === 0)
@@ -302,42 +271,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 return applyOperator(_itemValue, param);
             }
         });
-        // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
-        // return Object.entries(searchedText).every(([key, param]) => {
-        //   const _itemValue = item[key as keyof typeof item];
-        //   if (typeof _itemValue === "number" || typeof _itemValue === "string" || typeof _itemValue === "boolean") {
-        //     if (Array.isArray(param)) {
-        //       if (param.length === 0) return true;
-        //       else return param.some((v) => _itemValue.toString().toLocaleLowerCase().includes(v.toLocaleLowerCase()));
-        //     }
-        //     return _itemValue
-        //       .toString()
-        //       .toLocaleLowerCase()
-        //       .includes(param.toLocaleLowerCase() ?? "");
-        //   }
-        //   if (typeof _itemValue === "object") {
-        //     if (Array.isArray(param)) {
-        //       if (param.length === 0) return true;
-        //       else {
-        //         return param.some((v) => {
-        //           if (Array.isArray(_itemValue)) {
-        //             return Object.values(_itemValue?.[0 as keyof typeof _itemValue] ?? {}).some((objValue) => {
-        //               return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
-        //             });
-        //           }
-        //         });
-        //       }
-        //     }
-        //   }
-        //   if (Array.isArray(_itemValue)) {
-        //     console.log("Buradasın", _itemValue);
-        //   }
-        //   return false;
-        // });
     };
-    const openAllSubrowsRecursively = (data, parentKey = "") => {
+    const openAllSubrowsRecursively = (targetData, parentKey = "") => {
         let result = {};
-        data.forEach((item) => {
+        targetData.forEach((item) => {
             const id = trackBy?.(item);
             const key = parentKey ? `${parentKey}.${id}` : `${id}`;
             const subitems = item[_subrowSelector];
@@ -360,16 +297,15 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         else {
             setTotalRecords(data.length);
         }
-        // Sorting...
         if (sortConfig.length > 0 && !config.isServerSide) {
             _data.sort((a, b) => {
-                for (const config of sortConfig) {
-                    const aValue = a[config.key];
-                    const bValue = b[config.key];
+                for (const sCfg of sortConfig) {
+                    const aValue = a[sCfg.key];
+                    const bValue = b[sCfg.key];
                     if (aValue < bValue)
-                        return config.direction === "asc" ? -1 : 1;
+                        return sCfg.direction === "asc" ? -1 : 1;
                     if (aValue > bValue)
-                        return config.direction === "asc" ? 1 : -1;
+                        return sCfg.direction === "asc" ? 1 : -1;
                 }
                 return 0;
             });
@@ -379,18 +315,15 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             const indexOfFirstRow = indexOfLastRow - selectedPerPage;
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
-        // Önemli, Data yenilenmesi durumunda sticky alanlar tazelenir.
         setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
-    // useEffects
     useEffect(() => {
         if (!previousSelections || previousSelections.length === 0) {
             _selectionItems.current = [];
             return;
         }
         const validSelections = data.filter((item) => previousSelections.some((selected) => trackBy?.(selected) === trackBy?.(item)));
-        // Gereksiz overwrite’i engelle.
         if (!Utils.DeepEqual(_selectionItems.current, validSelections)) {
             _selectionItems.current = validSelections;
         }
@@ -411,7 +344,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             const searchRecord = {};
             Object.entries(_searchedParams ?? {}).forEach(([key, value]) => {
                 if (Array.isArray(value)) {
-                    // Çoklu filtre değerleri varsa virgülle birleştir.
                     searchRecord[key] = value.map((v) => v.value).join(",");
                 }
                 else if (value && typeof value === "object") {
@@ -423,9 +355,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 const key = column.key;
                 const filterValue = _searchedParams?.[key];
                 const filterArray = Array.isArray(filterValue) ? filterValue : filterValue ? [filterValue] : [];
-                const getParamsLength = column.filters?.length ?? 0;
-                const searchedParamLength = filterArray.length;
-                if (getParamsLength === searchedParamLength) {
+                if ((column.filters?.length ?? 0) === filterArray.length) {
                     query.delete(column.key);
                 }
             });
@@ -460,40 +390,32 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         }
     }, [selections, trackBy]);
     useEffect(() => {
-        // Filter Content alanı re-render işlemi.
         if (filterCurrentColumn && filterCurrentDataType) {
             handleFilterPopupContent(filterCurrentColumn, filterCurrentDataType, filterCurrentIndex);
         }
     }, [checkboxSelectedParams, filterPopupOption, filterPopupOptionSearchText]);
     useLayoutEffect(() => {
-        // @DND
         if (!onDnD || !_tBody.current || data.length === 0)
             return;
         _tBody.current.childNodes.forEach((item) => {
             const _item = item;
-            // Events
             _item.ondragstart = (event) => {
                 const dragItem = event.currentTarget;
                 _dragItem.current = dragItem;
                 dragItem.classList.add("drag-item");
                 if (event.dataTransfer) {
-                    // 1. Geçici bir kapsayıcı oluştur
                     const shadowContainer = document.createElement("div");
                     shadowContainer.style.position = "absolute";
                     shadowContainer.style.top = "-9999px";
                     shadowContainer.style.left = "-9999px";
                     document.body.appendChild(shadowContainer);
                     if (config.dnd?.renderItem) {
-                        // 2a. React Node varsa: createRoot ile render et
                         const root = createRoot(shadowContainer);
-                        // flushSync kullanıyoruz çünkü setDragImage çağrılmadan önce
-                        // DOM'un hemen güncellenmesi gerekiyor.
                         flushSync(() => {
                             root.render(config.dnd?.renderItem);
                         });
                     }
                     else {
-                        // 2b. React Node yoksa: Varsayılan HTML string
                         shadowContainer.innerHTML = `
                 <div class="ar-dnd-shadow" style="background: white; padding: 10px; border: 1px solid #ccc;">
                   <i class="bi bi-gear-wide-connected"></i>
@@ -501,13 +423,11 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 </div>
               `;
                     }
-                    // 3. Tarayıcıya bu elementi sürükleme görseli yapmasını söyle
-                    // (0, 0) koordinatları mouse'un görselin neresinde duracağını belirler
                     event.dataTransfer.setDragImage(shadowContainer, 20, 20);
-                    // 4. Temizlik: Görsel hafızaya alındıktan sonra DOM'dan kaldırabiliriz
-                    // Bir sonraki event loop'ta silmek en güvenlisidir
                     setTimeout(() => {
-                        document.body.removeChild(shadowContainer);
+                        if (document.body.contains(shadowContainer)) {
+                            document.body.removeChild(shadowContainer);
+                        }
                     }, 0);
                 }
             };
@@ -515,12 +435,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 event.preventDefault();
                 const overItem = event.currentTarget;
                 const rect = overItem.getBoundingClientRect();
-                // Otomatik scroll.
                 if (rect.top < 250)
                     window.scrollBy(0, -20);
                 if (rect.bottom > window.innerHeight - 150)
                     window.scrollBy(0, 20);
-                // Gerçek taşıma işlemi.
                 if (_dragItem.current !== overItem) {
                     if (_tBody.current && _dragItem.current) {
                         const dragItemIndex = [..._tBody.current.children].indexOf(_dragItem.current);
@@ -537,13 +455,13 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 }
             };
             _item.ondragend = (event) => {
-                const item = event.currentTarget;
-                item.classList.remove("drag-item");
-                item.classList.add("end-item");
+                const dragEndItem = event.currentTarget;
+                dragEndItem.classList.remove("drag-item");
+                dragEndItem.classList.add("end-item");
                 setTimeout(() => {
-                    item.classList.remove("end-item");
-                    if (item.classList.length === 0)
-                        item.removeAttribute("class");
+                    dragEndItem.classList.remove("end-item");
+                    if (dragEndItem.classList.length === 0)
+                        dragEndItem.removeAttribute("class");
                 }, 1000);
             };
         });
@@ -552,14 +470,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             if (!_tBody.current)
                 return;
             _tBody.current.childNodes.forEach((item) => {
-                const _item = item;
-                _item.ondragstart = null;
-                _item.ondragover = null;
-                _item.ondragend = null;
+                const cleanupItem = item;
+                cleanupItem.ondragstart = null;
+                cleanupItem.ondragover = null;
+                cleanupItem.ondragend = null;
             });
             _tBody.current.ondragover = null;
         };
-    }, [data]);
+    }, [data, onDnD]);
     useLayoutEffect(() => {
         if (!pagination?.currentPage)
             return;
@@ -590,6 +508,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         }
         return () => {
             window.removeEventListener("resize", handleResize);
+            if (_searchTimeOut.current)
+                clearTimeout(_searchTimeOut.current);
         };
     }, []);
     const filterOption = [
@@ -613,71 +533,53 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                     if (_checkboxItems.current.length > 0) {
                                         setSelectAll(event.target.checked);
                                         _checkboxItems.current.forEach((item) => {
-                                            if (item) {
-                                                if (item.checked !== event.target.checked)
-                                                    item.click();
-                                            }
+                                            if (item && item.checked !== event.target.checked)
+                                                item.click();
                                         });
                                     }
                                 } }))),
                         data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("th", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left", style: { bottom: 0 } })),
-                        React.createElement(THeadCell, { refs: {
-                                propertiesButton: _propertiesButton,
-                            }, states: {
+                        React.createElement(THeadCell, { refs: { propertiesButton: _propertiesButton }, states: {
                                 open: { get: openProperties, set: setOpenProperties },
                                 sort: { get: sortConfig, set: setSortConfig },
                                 sortCurrentColumn: { set: setSortCurrentColumn },
                                 propertiesButtonCoordinate: { set: setPropertiesButtonCoordinate },
                             }, methods: { handleScroll }, columns: columns, config: config })),
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
-                        selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
-                        data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("th", { key: `column-selections`, className: "subrow-col sticky sticky-left", "data-sticky-position": "left" })),
+                        selections && React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" }),
+                        data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("th", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" })),
                         columns.map((c, cIndex) => {
                             let _className = [];
                             const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
                             const csrValue = Array.isArray(searchedText?.[key])
-                                ? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
+                                ? ""
                                 : searchedText?.[key]?.value;
                             const ssrValue = Array.isArray(_searchedParams?.[key])
-                                ? "" // veya ihtiyacına göre birleştirme yap: _searchedParams[key].map(v => v.value).join(", ").
+                                ? ""
                                 : _searchedParams?.[key]?.value;
                             if (c.config?.sticky)
                                 _className.push(`sticky-${c.config.sticky}`);
-                            if (c.config?.alignContent) {
+                            if (c.config?.alignContent)
                                 _className.push(`align-content-${c.config.alignContent}`);
-                            }
-                            return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
-                                    className: `${_className.map((c) => c).join(" ")}`,
-                                }), ...(c.config?.sticky && {
-                                    "data-sticky-position": c.config.sticky,
-                                }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
-                                    handleScroll();
-                                }, onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
+                            return (React.createElement("th", { key: `column-search-${cIndex}`, ...(_className.length > 0 && { className: `${_className.join(" ")}` }), ...(c.config?.sticky && { "data-sticky-position": c.config.sticky }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => handleScroll(), onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
                                 React.createElement(Input, { ref: (element) => {
-                                        if (!element)
-                                            return;
-                                        _searchTextInputs.current[cIndex] = element;
-                                    }, variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
-                                        handleScroll();
-                                    }, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
+                                        if (element)
+                                            _searchTextInputs.current[cIndex] = element;
+                                    }, variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => handleScroll(), onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
                                 React.createElement("span", { ref: (element) => {
-                                        if (!element)
-                                            return;
-                                        _filterButton.current[cIndex] = element;
+                                        if (element)
+                                            _filterButton.current[cIndex] = element;
                                     }, onClick: (event) => {
                                         event.preventDefault();
                                         event.stopPropagation();
-                                        // Temizlik...
                                         setFilterPopupOptionSearchText("");
                                         const rect = event.currentTarget.getBoundingClientRect();
                                         const screenCenterX = window.innerWidth / 2;
-                                        // const screenCenterY = window.innerHeight / 2;
                                         const coordinateX = rect.x > screenCenterX ? rect.x + rect.width - 225 : rect.x;
                                         const coordinateY = rect.y + rect.height;
-                                        // data içindeki alanların tiplerini bulmak için kullanılmaktadır
                                         const getDataFirstItem = { ...data[0] };
-                                        const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
-                                        const getValueByKey = getDataFirstItem[key];
+                                        const searchKey = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+                                        const getValueByKey = getDataFirstItem[searchKey];
                                         let dataType = typeof getValueByKey;
                                         if (getValueByKey == null)
                                             dataType = "string";
@@ -705,29 +607,20 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                             onEditable: onEditable,
                             rowBackgroundColor: rowBackgroundColor,
                         }, config: config })))),
-        React.createElement(FilterPopup, { refs: {
-                tableContent: _tableContent,
-                buttons: _filterButton,
-            }, states: {
-                open: { get: openFilter, set: setOpenFilter },
-            }, coordinate: filterButtonCoordinate }, filterPopupContent),
-        config.isProperties && (React.createElement(PropertiesPopup, { refs: {
-                tableContent: _tableContent,
-                buttons: _propertiesButton,
-            }, states: {
+        React.createElement(FilterPopup, { refs: { tableContent: _tableContent, buttons: _filterButton }, states: { open: { get: openFilter, set: setOpenFilter } }, coordinate: filterButtonCoordinate }, filterPopupContent),
+        config.isProperties && (React.createElement(PropertiesPopup, { refs: { tableContent: _tableContent, buttons: _propertiesButton }, states: {
                 open: { get: openProperties, set: setOpenProperties },
                 sort: { get: sortConfig, set: setSortConfig, currentColumn: sortCurrentColumn },
             }, methods: { handleScroll }, coordinate: propertiesButtonCoordinate, config: config })),
         React.createElement("div", { className: "footer" },
-            React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
-                React.createElement("strong", null,
-                    (currentPage - 1) * selectedPerPage + 1,
-                    " -",
-                    " ",
-                    Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length),
-                    " of",
-                    " ",
-                    pagination?.totalRecords || getData.length))) : (t("Table.Pagination.Information.Text", (currentPage - 1) * selectedPerPage + 1, Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length), pagination?.totalRecords || getData.length))),
+            React.createElement("span", null, isMobile ? (React.createElement("strong", null,
+                (currentPage - 1) * selectedPerPage + 1,
+                " -",
+                " ",
+                Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length),
+                " of",
+                " ",
+                pagination?.totalRecords || getData.length)) : (t("Table.Pagination.Information.Text", (currentPage - 1) * selectedPerPage + 1, Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length), pagination?.totalRecords || getData.length))),
             pagination && (React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : (totalRecords ?? 0), currentPage: currentPage, perPage: selectedPerPage, onChange: (currentPage, perPage) => {
                     setCurrentPage(currentPage);
                     setSelectedPerPage(perPage);

package/dist/components/feedback/popover/index.js

@@ -15,6 +15,7 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, ful
         _arPopoverClassName.push("full-width");
     // states
     const [open, setOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -64,8 +65,13 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, ful
             document.removeEventListener("keydown", handleKeys);
         };
     }, [open]);
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     return (React.createElement("div", { ref: _arPopoverWrapper, className: _arPopoverClassName.map((c) => c).join(" "), role: "dialog" },
         open &&
+            mounted &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arPopover, className: "ar-popover" },
                 title && (React.createElement("div", { className: "title" },
                     React.createElement(Title, { Level: "h4" }, title))),