Improve DataViews filters, search debounce and styles

kzamanbd · kzamanbd · commit c7a7ede7d4a4 · 2026-03-29T05:04:03.000+06:00
diff --git a/src/components/wordpress/dataviews.tsx b/src/components/wordpress/dataviews.tsx
@@ -236,12 +236,12 @@ const FilterItems = ({
                             return null;
                         }
                         return (
-                            <div className="relative flex items-center gap-2" key={id}>
-                                <div className="[&>input]:pr-8 [&>select]:pr-8">{field.field}</div>
+                            <div className="relative flex items-center pe-2 border rounded-md border-border **:border-0 **:shadow-none" key={id}>
+                                {field.field}
                                 <span
                                     role="button"
                                     aria-label={removeFilter}
-                                    className="absolute right-2 inline-flex items-center justify-center w-5 h-5 text-muted-foreground hover:text-primary z-10"
+                                    className="inline-flex items-center justify-center w-5 h-5 text-muted-foreground hover:text-primary z-10"
                                     onClick={() => handleRemoveFilter(id)}>
                                     <X size="12" />
                                 </span>
@@ -591,42 +591,37 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
 
     const hasFilters = (filter?.fields?.length ?? 0) > 0;
 
-    const tabsWithFilterButton = hasFilters
-        ? (() => {
-              const existing = tabs?.headerContent || tabs?.headerSlot || [];
-              const newButton = (
-                  <button
-                      type="button"
-                      ref={setButtonRef}
-                      title="Filter"
-                      className={cn(
-                          'relative inline-flex items-center gap-2 rounded-md bg-transparent! hover:bg-transparent! px-3 py-1.5 text-sm hover:text-primary',
-                          showFilters ? 'text-primary' : 'text-muted-foreground'
-                      )}
-                      onClick={() => {
-                          if (activeFilterCount > 0) {
-                              setShowFilters((prev) => !prev);
-                          } else {
-                              setOpenSelectorSignal((s) => s + 1);
-                          }
-                      }}>
-                      <Funnel size={20} />
-                      {activeFilterCount > 0 && (
-                          <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
-                              {activeFilterCount}
-                          </span>
-                      )}
-                  </button>
-              );
-
-              return {
-                  ...tabs,
-                  headerContent: [...existing, newButton]
-              };
-          })()
-        : tabs;
+    const filterButton = hasFilters ? (
+        <button
+            type="button"
+            ref={setButtonRef}
+            title="Filter"
+            className={cn(
+                'relative inline-flex items-center gap-2 rounded-md bg-transparent! hover:bg-transparent! px-3 py-1.5 text-sm hover:text-primary',
+                showFilters ? 'text-primary' : 'text-muted-foreground'
+            )}
+            onClick={() => {
+                if (activeFilterCount > 0) {
+                    setShowFilters((prev) => !prev);
+                } else {
+                    setOpenSelectorSignal((s) => s + 1);
+                }
+            }}>
+            <Funnel size={20} />
+            {activeFilterCount > 0 && (
+                <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+                    {activeFilterCount}
+                </span>
+            )}
+        </button>
+    ) : null;
 
-    const resolvedTabsConfig = tabsWithFilterButton || tabs;
+    const resolvedTabsConfig = hasFilters
+        ? {
+              ...tabs,
+              headerContent: [...(tabs?.headerContent || tabs?.headerSlot || []), filterButton]
+          }
+        : tabs;
 
     // Backward compatibility: prefer modern keys and fallback to deprecated aliases.
     const tabItems = resolvedTabsConfig?.items ?? resolvedTabsConfig?.tabs ?? [];
@@ -656,6 +651,39 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
     const afterSlotId = `${filterId}-after`;
 
     const searchTerm = (view as View & { search?: string }).search ?? '';
+    const [localSearch, setLocalSearch] = useState(searchTerm);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    // Sync local state when the external view search changes (e.g. tab reset)
+    useEffect(() => {
+        setLocalSearch(searchTerm);
+    }, [searchTerm]);
+
+    const handleSearchChange = useCallback(
+        (value: string) => {
+            setLocalSearch(value);
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+            debounceRef.current = setTimeout(() => {
+                handleViewChange({
+                    ...view,
+                    search: value,
+                    page: 1
+                } as View);
+            }, 500);
+        },
+        [handleViewChange, view]
+    );
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, []);
 
     const searchInput = search ? (
         <InputGroup className="md:w-64 md:min-w-64">
@@ -665,14 +693,8 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
             <InputGroupInput
                 className="border-none!"
                 placeholder={searchPlaceholder}
-                value={searchTerm}
-                onChange={(event) =>
-                    handleViewChange({
-                        ...view,
-                        search: event.target.value,
-                        page: 1
-                    } as View)
-                }
+                value={localSearch}
+                onChange={(event) => handleSearchChange(event.target.value)}
             />
         </InputGroup>
     ) : null;
@@ -793,6 +815,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                     </Fragment>
                 )}
             </DataViewsTable>
+
             <Slot name={afterSlotId} fillProps={{ ...filteredProps }} />
 
             {/* Destructive action confirmation AlertDialog */}
diff --git a/src/components/wordpress/style.css b/src/components/wordpress/style.css
@@ -5,10 +5,13 @@
 
 .pui-root-dataviews:not(.custom-layout) {
     border-radius: 6px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--border, #E7E7E7);
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843);
-    background-color: var(--background);
-    color: var(--foreground);
+    background-color: var(--background, #FFFFFF);
+    color: var(--foreground, #1D1D1D);
+  }
+  .pui-root-dataviews .dataviews-no-results {
+      border-top: 1px solid var(--border, #E7E7E7);
   }
   .pui-root-dataviews:not(.custom-layout) .dataviews-wrapper {
     border-radius: 6px;
@@ -17,32 +20,32 @@
     border-left: none;
     border-right: none;
     border-top: none;
-    background-color: var(--background);
+    background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table thead {
     z-index: 0;
-    background-color: var(--muted);
+    background-color: var(--muted, #F5F5F5);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table thead th {
-    color: var(--foreground);
-    background-color: var(--background) !important;
+    color: var(--foreground, #1D1D1D);
+    background-color: var(--background, #FFFFFF) !important;
   }
-  
+
   .pui-root-dataviews .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
-    color: var(--foreground);
+    color: var(--foreground, #1D1D1D);
     box-shadow: none;
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tbody tr {
-    background-color: var(--background);
+    background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tbody tr.is-selected td,
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tbody tr:hover td {
-    background-color: var(--accent);
+    background-color: var(--accent, #F5F5F5);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tbody td {
-    color: var(--foreground);
-    border-bottom-color: var(--border);
-    background-color: var(--background);
+    color: var(--foreground, #1D1D1D);
+    border-bottom-color: var(--border, #E7E7E7);
+    background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table td,
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table th {
@@ -51,11 +54,11 @@
     border-right: none;
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tr {
-    border-color: var(--border);
+    border-color: var(--border, #E7E7E7);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-pagination .components-input-control__container {
-    background-color: var(--background);
-    color: var(--foreground);
+    background-color: var(--background, #FFFFFF);
+    color: var(--foreground, #1D1D1D);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-pagination {
     width: 100%;
@@ -88,38 +91,38 @@
     width: 100%;
     justify-content: space-between;
     padding: 15px 20px;
-    background-color: var(--background);
-    color: var(--foreground);
+    background-color: var(--background, #FFFFFF);
+    color: var(--foreground, #1D1D1D);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-bulk-actions-footer__action-buttons {
     gap: 10px;
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-bulk-actions-footer__action-buttons .components-button.is-compact:not(:last-child) {
-    border: 1px solid var(--border);
+    border: 1px solid var(--border, #E7E7E7);
     border-radius: 6px;
     line-height: 1;
   }
   /* DataViews list view theming */
   .pui-root-dataviews .dataviews-view-list {
-    background-color: var(--background);
+    background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews .dataviews-view-list [role="row"],
   .pui-root-dataviews .dataviews-view-list [role="article"] {
-    background-color: var(--background);
-    border-color: var(--border);
+    background-color: var(--background, #FFFFFF);
+    border-color: var(--border, #E7E7E7);
   }
   .pui-root-dataviews .dataviews-loading {
     padding: 50px;
   }
   .pui-root-dataviews .dataviews-view-table.has-bulk-actions tr.is-selected td.dataviews-view-table__actions-column,
   .pui-root-dataviews .dataviews-view-table.has-bulk-actions tr:hover td.dataviews-view-table__actions-column {
-    background-color: var(--accent);
+    background-color: var(--accent, #F5F5F5);
   }
-  .pui-root-dataviews .dataviews-wrapper .dataviews-pagination .components-button svg, 
+  .pui-root-dataviews .dataviews-wrapper .dataviews-pagination .components-button svg,
   .pui-root-dataviews .dataviews-view-table__actions-column .components-button svg {
-    fill: var(--foreground);
+    fill: var(--foreground, #1D1D1D);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-bulk-actions-footer__container .components-button,
   .pui-root-dataviews .dataviews-wrapper .dataviews-bulk-actions-footer__item-count {
-    color: var(--foreground);
+    color: var(--foreground, #1D1D1D);
   }
