ar-design 0.2.2 → 0.2.4

package/dist/assets/css/components/data-display/table/styles.css

@@ -81,7 +81,6 @@
   -webkit-text-stroke: 0.25px var(--gray-700);
   text-align: left;
   text-wrap: nowrap;
-  transition: background 250ms, box-shadow 250ms ease-in-out;
   z-index: 2;
 }
 .ar-table > .content > table > thead > tr > th > .filter-field {

package/dist/assets/css/components/feedback/popover/styles.css

@@ -9,23 +9,28 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  gap: 1rem 0;
   background-color: var(--white);
   width: 250px;
-  padding: 10px;
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   z-index: 1051;
   transition: visibility 250ms, opacity 250ms;
 }
 
+.ar-popover > .title {
+  padding: 0.5rem 1rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+
 .ar-popover > .content {
   max-height: 200px;
+  padding: 0.5rem 1rem;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 .ar-popover > .message {
+  padding: 0.5rem 1rem;
   font-size: 0.85rem;
   text-wrap: wrap;
 }
@@ -36,4 +41,5 @@
   justify-content: flex-end;
   align-items: center;
   gap: 0 0.5rem;
+  padding: 0.5rem 1rem;
 }

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

@@ -27,6 +27,8 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
     // states -> Search
     const [searchedText, setSearchedText] = useState(undefined);
     const [_searchedParams, setSearchedParams] = useState(undefined);
+    const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(undefined);
+    const [selectedfilterCheckboxItems, setSelectedfilterCheckboxItems] = useState(undefined);
     // const [searchedFilters, setSearchedFilters] = useState<string | undefined>(undefined);
     // const [totalRecords, setTotalRecords] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState(1);
@@ -134,37 +136,19 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             setSearchedText((prev) => ({ ...prev, [event.target.name]: event.target.value }));
         }
     };
-    const handleChecboxFilter = (event) => {
-        if (config.isServerSide) {
-            if (_searchTimeOut.current)
-                clearTimeout(_searchTimeOut.current);
-            setSearchedParams((prev) => {
-                const updatedValues = new Set(prev?.[event.target.name] || []);
-                event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
-                return {
-                    ...prev,
-                    ...(Array.from(updatedValues).length > 0
-                        ? { [event.target.name]: Array.from(updatedValues) }
-                        : { [event.target.name]: [] }),
-                };
-            });
-            setCurrentPage(1);
-            pagination && pagination.onChange(1);
-        }
-        else {
-            setSearchedText((prev) => {
-                const updatedValues = new Set(prev?.[event.target.name] || []);
-                event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
-                return {
-                    ...prev,
-                    ...(Array.from(updatedValues).length > 0
-                        ? { [event.target.name]: Array.from(updatedValues) }
-                        : { [event.target.name]: [] }),
-                };
-            });
-            setCurrentPage(1);
-        }
-    };
+    const handleCheckboxChange = useCallback(async (event) => {
+        event.stopPropagation();
+        setCheckboxSelectedParams((prev) => {
+            const updatedValues = new Set(prev?.[event.target.name] || []);
+            event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
+            return {
+                ...prev,
+                ...(Array.from(updatedValues).length > 0
+                    ? { [event.target.name]: Array.from(updatedValues) }
+                    : { [event.target.name]: [] }),
+            };
+        });
+    }, []);
     // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon tanımlayalım.
     const deepSearch = (item, searchedText) => {
         if (!searchedText)
@@ -206,6 +190,8 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             const indexOfFirstRow = indexOfLastRow - pagination.perPage;
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
+        // Veriler yenilenmesi durumunda tablo üzerindeki hesaplamalar tekrar yapılacaktır.
+        setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage]);
     // useEffects
@@ -225,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;
@@ -234,9 +233,6 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         }
         setSelectAll(allChecked);
     }, [currentPage]);
-    useEffect(() => {
-        setTimeout(() => handleScroll(), 0);
-    }, [, data]);
     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" },
@@ -300,18 +296,12 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                                 React.createElement("div", { className: "filter-field" },
                                     React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "filled" : "outlined", status: "light", name: typeof c.key !== "object" ? String(c.key) : String(c.key.field), onChange: handleSearch, disabled: !c.key || !!c.filters }),
                                     c.filters && (React.createElement(Popover, { content: React.createElement(React.Fragment, null,
-                                            React.createElement("ul", null, c.filters
-                                                // .filter((x) =>
-                                                //   x.text.toLocaleLowerCase().includes(searchedFilters?.toLocaleLowerCase() ?? "")
-                                                // )
-                                                .map((filter, fIndex) => {
+                                            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("li", { key: `filters-${fIndex}-${Math.random()}` },
-                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "success", value: filter.text, checked: config.isServerSide
-                                                            ? _searchedParams?.[name]?.includes(String(filter.value))
-                                                            : searchedText?.[name]?.includes(String(filter.value)), onChange: handleChecboxFilter })));
-                                            }))) },
-                                        _filterCheckboxItems.current.filter((item) => item?.checked).length > 0 && (React.createElement("div", { style: {
+                                                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) })));
+                                            }))), windowBlur: true },
+                                        (selectedfilterCheckboxItems ?? 0) > 0 && (React.createElement("div", { style: {
                                                 position: "absolute",
                                                 top: "0.35rem",
                                                 right: "0.35rem",

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

@@ -57,7 +57,8 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, con
     return (React.createElement("div", { ref: _arPopoverWrapper, className: "ar-popover-wrapper", role: "dialog" },
         open &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arPopover, className: "ar-popover" },
-                title && React.createElement(Title, { Level: "h4" }, title),
+                title && (React.createElement("div", { className: "title" },
+                    React.createElement(Title, { Level: "h4" }, title))),
                 message && React.createElement("p", { className: "message" }, message),
                 content && React.createElement("div", { className: "content" }, content),
                 onConfirm && (React.createElement("div", { className: "footer" },

package/package.json

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