@patternfly/react-data-view 6.4.0-prerelease.9 → 6.5.0-prerelease.1

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

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTreeFilter component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v6-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF6/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <div
+            class="pf-v6-c-toolbar__item"
+            data-ouia-component-id="DataViewTreeFilter"
+          >
+            <button
+              aria-expanded="false"
+              class="pf-v6-c-menu-toggle"
+              data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+              data-ouia-component-type="PF6/MenuToggle"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <span
+                class="pf-v6-c-menu-toggle__text"
+              >
+                Test Tree Filter
+              </span>
+              <span
+                class="pf-v6-c-menu-toggle__controls"
+              >
+                <span
+                  class="pf-v6-c-menu-toggle__toggle-icon"
+                >
+                  <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>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__group"
+      >
+        <div
+          class="pf-v6-c-toolbar__item pf-m-label-group pf-m-label-group"
+        >
+          <div
+            class="pf-v6-c-label-group pf-m-category"
+          >
+            <div
+              class="pf-v6-c-label-group__main"
+            >
+              <span
+                aria-hidden="true"
+                class="pf-v6-c-label-group__label"
+                id="pf-random-id-1"
+              >
+                Test Tree Filter
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-1"
+                class="pf-v6-c-label-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-v6-c-label-group__list-item"
+                >
+                  <span
+                    class="pf-v6-c-label pf-m-filled"
+                  >
+                    <span
+                      class="pf-v6-c-label__content"
+                    >
+                      <span
+                        class="pf-v6-c-label__text"
+                      >
+                        Linux
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v6-c-label__actions"
+                    >
+                      <button
+                        aria-label="Close Linux"
+                        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                        data-ouia-component-type="PF6/Button"
+                        data-ouia-safe="true"
+                        type="button"
+                      >
+                        <span
+                          class="pf-v6-c-button__icon"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v6-svg"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            viewBox="0 0 352 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </span>
+                  </span>
+                </li>
+              </ul>
+            </div>
+            <div
+              class="pf-v6-c-label-group__close"
+            >
+              <button
+                aria-label="Close label group"
+                aria-labelledby="remove_group_pf-random-id-1 pf-random-id-1"
+                class="pf-v6-c-button pf-m-plain pf-m-small"
+                data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                id="remove_group_pf-random-id-1"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <button
+            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/DataViewTreeFilter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';

package/src/Hooks/selection.ts

@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
 
-export interface UseDataViewSelectionProps {
+export interface UseDataViewSelectionProps<T = any> {
   /** Function to compare items when checking if item is selected */
-  matchOption: (item: any, another: any) => boolean;
+  matchOption: (item: T, another: T) => boolean;
   /** Array of initially selected entries */
-  initialSelected?: (any)[];
+  initialSelected?: (T)[];
 }
 
-export const useDataViewSelection = (props?: UseDataViewSelectionProps) => {
-  const [ selected, setSelected ] = useState<any[]>(props?.initialSelected ?? []);
+export const useDataViewSelection = <T = any>(props?: UseDataViewSelectionProps<T>) => {
+  const [ selected, setSelected ] = useState<T[]>(props?.initialSelected ?? []);
   const matchOption = props?.matchOption ? props.matchOption : (option, another) => (option === another);
 
-  const onSelect = (isSelecting: boolean, items?: any[] | any) => {
+  const onSelect = (isSelecting: boolean, items?: T[] | T) => {
     isSelecting && items ?
       setSelected(prev => {
         const newSelectedItems = [ ...prev ];
@@ -22,9 +22,9 @@ export const useDataViewSelection = (props?: UseDataViewSelectionProps) => {
       : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [ items ]).some(item => matchOption(item, prevSelected))) : []);
   };
   
-  const isSelected = (item: any): boolean => Boolean(selected.find(selected => matchOption(selected, item)));
+  const isSelected = (item: T): boolean => Boolean(selected.find(selected => matchOption(selected, item)));
 
-  const setSelectedItems = (items: any[]) => {
+  const setSelectedItems = (items: T[]) => {
     setSelected(items);
   };
 

package/src/index.ts

@@ -4,6 +4,9 @@ export { default as InternalContext } from './InternalContext';
 export * from './InternalContext';
 export * from './Hooks';
 
+export { default as DataViewTreeFilter } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';
+
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';