ar-design 0.4.46 → 0.4.47

package/dist/components/data-display/kanban-board/index.js

@@ -195,30 +195,37 @@ const KanbanBoard = function ({ trackBy, columns, onChange, onLazyLoad, config,
     }, [columns]);
     const _prevFilters = useRef(JSON.stringify({ search, selectedFilters, dateFilters }));
     useEffect(() => {
-        const currentFilters = JSON.stringify({
+        const normalizedFilters = JSON.stringify({
             search,
-            selectedFilters: Object.fromEntries(Object.entries(selectedFilters).map(([k, v]) => [k, Array.from(v)])),
+            selectedFilters: Object.fromEntries(Object.entries(selectedFilters).map(([k, v]) => [k, Array.from(v).sort()])),
             dateFilters,
         });
-        if (_prevFilters.current !== currentFilters) {
+        const hasSelectedFilters = Object.values(selectedFilters).some((set) => set.size > 0);
+        const hasDateFilters = Object.values(dateFilters).some((r) => r.from || r.to);
+        // Page reset + Scroll logic.
+        if (_prevFilters.current !== normalizedFilters) {
             setCurrentPage(1);
-            _prevFilters.current = currentFilters;
+            _prevFilters.current = normalizedFilters;
             if (_kanbanWrapper.current) {
                 _isProgrammaticScroll.current = true;
-                _kanbanWrapper.current.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+                _kanbanWrapper.current.scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: "smooth",
+                });
             }
         }
-    }, [search, selectedFilters, dateFilters]);
-    useEffect(() => {
-        if (!search && Object.keys(selectedFilters).length === 0 && Object.keys(dateFilters).length === 0) {
+        // Query Build Logic.
+        if (!search && !hasSelectedFilters && !hasDateFilters) {
             setQuery(null);
             return;
         }
-        const sampleItem = columns[0]?.items[0];
-        const keys = sampleItem ? (config?.filter?.keys(sampleItem) ?? []) : [];
+        const sampleItem = columns?.[0]?.items?.[0];
+        const keys = config?.filter?.keys(sampleItem) ?? [];
+        const keyMap = Object.fromEntries(keys.map((k) => [k.name, k.key]));
         const dateQuery = Object.entries(dateFilters).reduce((acc, [name, range]) => {
             if (range.from || range.to) {
-                const technicalKey = keys.find((k) => k.name === name)?.key || name;
+                const technicalKey = keyMap[name] || name;
                 acc[technicalKey] = {
                     from: range.from,
                     to: range.to,
@@ -226,10 +233,10 @@ const KanbanBoard = function ({ trackBy, columns, onChange, onLazyLoad, config,
             }
             return acc;
         }, {});
-        const selectQuery = Object.entries(selectedFilters).reduce((acc, [filterName, selectedSet]) => {
-            if (selectedSet && selectedSet.size > 0) {
-                const technicalKey = keys.find((k) => k.name === filterName)?.key || filterName;
-                acc[technicalKey] = Array.from(selectedSet);
+        const selectQuery = Object.entries(selectedFilters).reduce((acc, [name, set]) => {
+            if (set.size > 0) {
+                const technicalKey = keyMap[name] || name;
+                acc[technicalKey] = Array.from(set);
             }
             return acc;
         }, {});
@@ -238,7 +245,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange, onLazyLoad, config,
             ...dateQuery,
             ...selectQuery,
         });
-    }, [search, selectedFilters, dateFilters]);
+    }, [search, selectedFilters, dateFilters, columns, config]);
     useEffect(() => {
         if (!onLazyLoad)
             return;

package/package.json

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