ar-design 0.2.4 → 0.2.6

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/Props.d.ts

@@ -20,6 +20,7 @@ interface ISingle {
 }
 export type Props = {
     options: Option[];
+    onClick?: () => void;
     onCreate?: (option: Option) => void;
     placeholder?: string;
     upperCase?: boolean;

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

@@ -6,7 +6,7 @@ import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
+const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -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
@@ -240,7 +242,12 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             multiple ? (React.createElement("div", { className: _selectionClassName.map((c) => c).join(" "), onClick: () => setOptionsOpen((x) => !x) },
                 React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", { className: "placeholder" },
                     validation ? "* " : "",
-                    placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, value: singleInputText, onClick: () => setOptionsOpen((prev) => !prev), onChange: (event) => {
+                    placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, value: singleInputText, onClick: () => {
+                    onClick && onClick();
+                    (() => {
+                        setOptionsOpen((prev) => !prev);
+                    })();
+                }, onChange: (event) => {
                     !optionsOpen && setOptionsOpen(true);
                     if (upperCase)
                         event.target.value = convertToUpperCase(event.target.value);

package/package.json

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