@patternfly/react-data-view 6.0.0-prerelease.1 → 6.1.0

package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap

@@ -46,51 +46,58 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                   </b>
                    
                 </div>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-                  id="options-menu-top-toggle"
-                  type="button"
+                <div
+                  class="pf-v6-c-pagination__page-menu"
                 >
-                  <span
-                    class="pf-v6-c-menu-toggle__text"
-                  >
-                    <b>
-                      1
-                       - 
-                      10
-                    </b>
-                     
-                    of
-                     
-                    <b>
-                      0
-                    </b>
-                     
-                  </span>
-                  <span
-                    class="pf-v6-c-menu-toggle__controls"
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+                    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+                    data-ouia-component-type="PF6/MenuToggle"
+                    data-ouia-safe="true"
+                    id="options-menu-top-toggle"
+                    type="button"
                   >
                     <span
-                      class="pf-v6-c-menu-toggle__toggle-icon"
+                      class="pf-v6-c-menu-toggle__text"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 320 512"
-                        width="1em"
+                      <b>
+                        1
+                         - 
+                        10
+                      </b>
+                       
+                      of
+                       
+                      <b>
+                        0
+                      </b>
+                       
+                    </span>
+                    <span
+                      class="pf-v6-c-menu-toggle__controls"
+                    >
+                      <span
+                        class="pf-v6-c-menu-toggle__toggle-icon"
                       >
-                        <path
-                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 320 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                          />
+                        </svg>
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
                 <nav
                   aria-label="Pagination"
                   class="pf-v6-c-pagination__nav"
@@ -109,19 +116,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       disabled=""
                       type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        width="1em"
+                      <span
+                        class="pf-v6-c-button__icon"
                       >
-                        <path
-                          d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 448 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                          />
+                        </svg>
+                      </span>
                     </button>
                   </div>
                   <div
@@ -138,19 +149,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       disabled=""
                       type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
+                      <span
+                        class="pf-v6-c-button__icon"
                       >
-                        <path
-                          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 256 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                          />
+                        </svg>
+                      </span>
                     </button>
                   </div>
                   <div
@@ -185,19 +200,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       data-ouia-safe="true"
                       type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
+                      <span
+                        class="pf-v6-c-button__icon"
                       >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 256 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                          />
+                        </svg>
+                      </span>
                     </button>
                   </div>
                   <div
@@ -213,19 +232,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       data-ouia-safe="true"
                       type="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        width="1em"
+                      <span
+                        class="pf-v6-c-button__icon"
                       >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-                        />
-                      </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 448 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                          />
+                        </svg>
+                      </span>
                     </button>
                   </div>
                 </nav>
@@ -240,6 +263,28 @@ exports[`DataViewToolbar component should render correctly 1`] = `
           <div
             class="pf-v6-c-toolbar__group"
           />
+          <div
+            class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+          >
+            <div
+              class="pf-v6-c-toolbar__item"
+            >
+              <button
+                aria-disabled="false"
+                class="pf-v6-c-button pf-m-link pf-m-inline"
+                data-ouia-component-id="DataViewToolbar-clear-all-filters"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__text"
+                >
+                  Clear filters
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -286,51 +331,58 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                 </b>
                  
               </div>
-              <button
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-                id="options-menu-top-toggle"
-                type="button"
+              <div
+                class="pf-v6-c-pagination__page-menu"
               >
-                <span
-                  class="pf-v6-c-menu-toggle__text"
-                >
-                  <b>
-                    1
-                     - 
-                    10
-                  </b>
-                   
-                  of
-                   
-                  <b>
-                    0
-                  </b>
-                   
-                </span>
-                <span
-                  class="pf-v6-c-menu-toggle__controls"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+                  data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+                  data-ouia-component-type="PF6/MenuToggle"
+                  data-ouia-safe="true"
+                  id="options-menu-top-toggle"
+                  type="button"
                 >
                   <span
-                    class="pf-v6-c-menu-toggle__toggle-icon"
+                    class="pf-v6-c-menu-toggle__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <b>
+                      1
+                       - 
+                      10
+                    </b>
+                     
+                    of
+                     
+                    <b>
+                      0
+                    </b>
+                     
+                  </span>
+                  <span
+                    class="pf-v6-c-menu-toggle__controls"
+                  >
+                    <span
+                      class="pf-v6-c-menu-toggle__toggle-icon"
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
               <nav
                 aria-label="Pagination"
                 class="pf-v6-c-pagination__nav"
@@ -349,19 +401,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     disabled=""
                     type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 448 512"
-                      width="1em"
+                    <span
+                      class="pf-v6-c-button__icon"
                     >
-                      <path
-                        d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                        />
+                      </svg>
+                    </span>
                   </button>
                 </div>
                 <div
@@ -378,19 +434,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     disabled=""
                     type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 256 512"
-                      width="1em"
+                    <span
+                      class="pf-v6-c-button__icon"
                     >
-                      <path
-                        d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                        />
+                      </svg>
+                    </span>
                   </button>
                 </div>
                 <div
@@ -425,19 +485,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 256 512"
-                      width="1em"
+                    <span
+                      class="pf-v6-c-button__icon"
                     >
-                      <path
-                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
                   </button>
                 </div>
                 <div
@@ -453,19 +517,23 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 448 512"
-                      width="1em"
+                    <span
+                      class="pf-v6-c-button__icon"
                     >
-                      <path
-                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                        />
+                      </svg>
+                    </span>
                   </button>
                 </div>
               </nav>
@@ -480,6 +548,28 @@ exports[`DataViewToolbar component should render correctly 1`] = `
         <div
           class="pf-v6-c-toolbar__group"
         />
+        <div
+          class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+        >
+          <div
+            class="pf-v6-c-toolbar__item"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-v6-c-button pf-m-link pf-m-inline"
+              data-ouia-component-id="DataViewToolbar-clear-all-filters"
+              data-ouia-component-type="PF6/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <span
+                class="pf-v6-c-button__text"
+              >
+                Clear filters
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>,

package/src/Hooks/filters.test.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewFilters, UseDataViewFiltersProps } from './filters';
+
+describe('useDataViewFilters', () => {
+  const initialFilters = { search: 'test', tags: [ 'tag1', 'tag2' ] };
+
+  it('should initialize with provided initial filters', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    expect(result.current.filters).toEqual(initialFilters);
+  });
+
+  it('should initialize with empty filters if no initialFilters provided', () => {
+    const { result } = renderHook(() => useDataViewFilters({}));
+    expect(result.current.filters).toEqual({});
+  });
+
+  it('should set filters correctly', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    const newFilters = { search: 'new search' };
+    act(() => result.current.onSetFilters(newFilters));
+
+    expect(result.current.filters).toEqual({ ...initialFilters, ...newFilters });
+  });
+
+  it('should delete specific filters without removing keys', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    const filtersToDelete = { search: 'test' };
+    act(() => result.current.onDeleteFilters(filtersToDelete));
+
+    expect(result.current.filters).toEqual({ search: '', tags: [ 'tag1', 'tag2' ] });
+  });
+
+  it('should clear all filters', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    act(() => result.current.clearAllFilters());
+
+    expect(result.current.filters).toEqual({ search: '', tags: [] });
+  });
+
+  it('should sync with URL search params if isUrlSyncEnabled', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<typeof initialFilters> = {
+      initialFilters,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewFilters(props));
+    act(() => result.current.onSetFilters({ search: 'new search' }));
+
+    expect(setSearchParams).toHaveBeenCalled();
+  });
+
+  it('should reset filters to default values when clearAllFilters is called', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    act(() => result.current.clearAllFilters());
+
+    expect(result.current.filters).toEqual({ search: '', tags: [] });
+  });
+});