ar-design 0.2.3 → 0.2.5

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

@@ -18,12 +18,12 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
     // refs -> Search
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
-    // const _searchFilterFirstLoad = useRef<boolean>(false);
     // className
     const _tableClassName = ["ar-table", "scroll"];
     // states
     const [selectAll, setSelectAll] = useState(false);
     const [selectionItems, setSelectionItems] = useState([]);
+    const [thWidths, setThWidths] = useState([]);
     // states -> Search
     const [searchedText, setSearchedText] = useState(undefined);
     const [_searchedParams, setSearchedParams] = useState(undefined);
@@ -149,19 +149,6 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             };
         });
     }, []);
-    const handleChecboxFilter = async () => {
-        if (config.isServerSide) {
-            if (_searchTimeOut.current)
-                clearTimeout(_searchTimeOut.current);
-            setSearchedParams(checkboxSelectedParams);
-        }
-        else {
-            setSearchedText(checkboxSelectedParams);
-        }
-        setCurrentPage(1);
-        pagination && pagination.onChange(1);
-        setSelectedfilterCheckboxItems(_filterCheckboxItems.current.filter((x) => x?.checked).length);
-    };
     // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon tanımlayalım.
     const deepSearch = (item, searchedText) => {
         if (!searchedText)
@@ -224,6 +211,19 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             searchedParams(_searchedParams, query);
         }
     }, [_searchedParams]);
+    useEffect(() => {
+        if (config.isServerSide) {
+            if (_searchTimeOut.current)
+                clearTimeout(_searchTimeOut.current);
+            setSearchedParams(checkboxSelectedParams);
+        }
+        else {
+            setSearchedText(checkboxSelectedParams);
+        }
+        setCurrentPage(1);
+        pagination && pagination.onChange(1);
+        setSelectedfilterCheckboxItems(_filterCheckboxItems.current.filter((x) => x?.checked).length);
+    }, [checkboxSelectedParams]);
     useEffect(() => {
         if (!selections)
             return;
@@ -233,6 +233,12 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         }
         setSelectAll(allChecked);
     }, [currentPage]);
+    useEffect(() => {
+        if (!_tableContent.current)
+            return;
+        const th = _tableContent.current?.querySelectorAll("table > thead > tr:first-child > th");
+        th.forEach((item) => setThWidths((prev) => [...prev, item.getBoundingClientRect().width]));
+    }, []);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
@@ -271,9 +277,11 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                             }
                             return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
                                     className: `${_className.map((c) => c).join(" ")}`,
-                                }), ...(c.config?.width && {
-                                    style: { minWidth: c.config.width },
-                                }), ...(c.config?.sticky && {
+                                }), ...(c.config?.width
+                                    ? {
+                                        style: { minWidth: c.config.width },
+                                    }
+                                    : { style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] } }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) }, c.title));
                         })),
@@ -299,10 +307,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                                             React.createElement("div", null, c.filters.map((filter, fIndex) => {
                                                 const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
                                                 return (React.createElement("div", null,
-                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: checkboxSelectedParams?.[name]?.includes(String(filter.value)), onChange: async (event) => {
-                                                            await handleCheckboxChange(event);
-                                                            await handleChecboxFilter();
-                                                        } })));
+                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: checkboxSelectedParams?.[name]?.includes(String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
                                             }))), windowBlur: true },
                                         (selectedfilterCheckboxItems ?? 0) > 0 && (React.createElement("div", { style: {
                                                 position: "absolute",
@@ -352,7 +357,13 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                             _className.push(`text-${c.config.textWrap}`);
                         return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(_className.length > 0 && {
                                 className: `${_className.map((c) => c).join(" ")}`,
-                            }), ...(c.config?.sticky && {
+                            }), ...(c.config?.width
+                                ? {
+                                    style: { minWidth: c.config.width },
+                                }
+                                : {
+                                    style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] },
+                                }), ...(c.config?.sticky && {
                                 "data-sticky-position": c.config.sticky,
                             }) }, React.isValidElement(render) ? render : String(render)));
                     }))))) : (React.createElement("tr", null,

package/dist/components/form/select/index.js

@@ -77,7 +77,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 _options.current.style.visibility = "visible";
                 _options.current.style.opacity = "1";
                 _options.current.style.top = `${(InpuRect.top > screenCenter
-                    ? InpuRect.top - optionRect.height - (multiple ? 20 : 0)
+                    ? InpuRect.top - optionRect.height - (multiple ? 0 : 5)
                     : InpuRect.top + InpuRect.height) + sy}px`;
                 _options.current.style.left = `${InpuRect.left + sx}px`;
                 _options.current.style.minWidth = "200px";
@@ -217,6 +217,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         // Arama yapılması durumunda arama sonuçlarından ilk olan değeri işaretle.
         const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
         optionItems[_navigationIndex.current]?.classList.add("navigate-with-arrow-keys");
+        // Yeniden konumlandır.
+        setTimeout(() => handlePosition(), 0);
     }, [searchText]);
     useEffect(() => {
         // Seçilen öğeye 'navigate-with-arrow-keys' sınıfını ekle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",