ar-design 0.2.4 → 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);
@@ -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));
                         })),
@@ -349,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.4",
+  "version": "0.2.5",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",