@patternfly/react-data-view 5.5.1 → 5.7.0

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  Badge,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  MenuProps,
+  MenuToggle,
+  Popper,
+  ToolbarChip,
+  ToolbarFilter,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+import { DataViewFilterOption } from '../DataViewFilters';
+
+const isToolbarChip = (chip: string | ToolbarChip): chip is ToolbarChip =>
+  typeof chip === 'object' && 'key' in chip;
+
+export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption =>
+  !!obj &&
+  typeof obj === 'object' &&
+  'label' in obj &&
+  'value' in obj &&
+  typeof (obj as DataViewFilterOption).value === 'string';
+
+/** extends MenuProps */
+export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect' | 'onChange'> {
+  /** Unique key for the filter attribute */
+  filterId: string;
+  /** Array of current filter values */
+  value?: string[];
+  /** Filter title displayed in the toolbar */
+  title: string;
+  /** Placeholder text of the menu */
+  placeholder?: string;
+  /** Filter options displayed */
+  options: (DataViewFilterOption | string)[];
+  /** Callback for updating when item selection changes. */
+  onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+  /** Controls visibility of the filter in the toolbar */
+  showToolbarItem?: boolean;
+  /** Controls visibility of the filter icon */
+  showIcon?: boolean;
+  /** Controls visibility of the selected items badge */
+  showBadge?: boolean;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
+  filterId,
+  title,
+  value = [],
+  onChange,
+  placeholder,
+  options = [],
+  showToolbarItem,
+  showIcon = !placeholder,
+  showBadge = !placeholder,
+  ouiaId = 'DataViewCheckboxFilter',
+  ...props
+}: DataViewCheckboxFilterProps) => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const normalizeOptions = React.useMemo(
+    () =>
+      options.map(option =>
+        typeof option === 'string'
+          ? { label: option, value: option }
+          : option
+      ),
+    [ options ]
+  );
+
+  const handleToggleClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setTimeout(() => {
+      const firstElement = menuRef.current?.querySelector('li > button:not(:disabled)') as HTMLElement;
+      firstElement?.focus();
+    }, 0);
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    const activeItem = String(itemId);
+    const isSelected = value.includes(activeItem);
+
+    onChange?.(
+      event,
+      isSelected ? value.filter(item => item !== activeItem) : [ activeItem, ...value ]
+    );
+  };
+
+  const handleClickOutside = (event: MouseEvent) => 
+    isOpen &&
+    menuRef.current && toggleRef.current &&
+    !menuRef.current.contains(event.target as Node) && !toggleRef.current.contains(event.target as Node)
+    && setIsOpen(false);
+
+
+  React.useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isOpen ]);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <ToolbarFilter
+      key={ouiaId}
+      data-ouia-component-id={ouiaId}
+      chips={value.map(item => {
+        const activeOption = normalizeOptions.find(option => option.value === item);
+        return ({ key: activeOption?.value as string, node: activeOption?.label })
+      })}
+      deleteChip={(_, chip) =>
+        onChange?.(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip)))
+      }
+      categoryName={title}
+      showToolbarItem={showToolbarItem}
+    >
+      <Popper
+        trigger={
+          <MenuToggle
+            ouiaId={`${ouiaId}-toggle`}
+            ref={toggleRef}
+            onClick={handleToggleClick}
+            isExpanded={isOpen}
+            icon={showIcon ? <FilterIcon /> : undefined}
+            badge={value.length > 0 && showBadge ? <Badge data-ouia-component-id={`${ouiaId}-badge`} isRead>{value.length}</Badge> : undefined}
+            style={{ width: '200px' }}
+          >
+            {placeholder ?? title}
+          </MenuToggle>
+        }
+        triggerRef={toggleRef}
+        popper={
+          <Menu
+            ref={menuRef}
+            ouiaId={`${ouiaId}-menu`}
+            onSelect={handleSelect}
+            selected={value}
+            {...props}
+          >
+            <MenuContent>
+              <MenuList>
+                {normalizeOptions.map(option => (
+                  <MenuItem
+                    data-ouia-component-id={`${ouiaId}-filter-item-${option.value}`}
+                    key={option.value}
+                    itemId={option.value}
+                    isSelected={value.includes(option.value)}
+                    hasCheckbox
+                  >
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </MenuContent>
+          </Menu>
+        }
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        aria-label={`${title ?? filterId} filter`}
+        isVisible={isOpen}
+      />
+    </ToolbarFilter>
+  );
+};
+
+export default DataViewCheckboxFilter;

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

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewCheckboxFilter component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v5-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF5/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v5-c-toolbar__content"
+    >
+      <div
+        class="pf-v5-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v5-c-toolbar__item pf-m-search-filter"
+        >
+          <div
+            class="pf-v5-c-toolbar__item"
+            data-ouia-component-id="DataViewCheckboxFilter"
+          >
+            <button
+              aria-expanded="false"
+              class="pf-v5-c-menu-toggle"
+              data-ouia-component-id="DataViewCheckboxFilter-toggle"
+              data-ouia-component-type="PF5/MenuToggle"
+              data-ouia-safe="true"
+              style="width: 200px;"
+              type="button"
+            >
+              <span
+                class="pf-v5-c-menu-toggle__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__text"
+              >
+                Test Checkbox Filter
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__count"
+              >
+                <span
+                  class="pf-v5-c-badge pf-m-read"
+                  data-ouia-component-id="DataViewCheckboxFilter-badge"
+                >
+                  1
+                </span>
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__controls"
+              >
+                <span
+                  class="pf-v5-c-menu-toggle__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-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-v5-c-toolbar__content pf-m-chip-container"
+    >
+      <div
+        class="pf-v5-c-toolbar__group"
+      >
+        <div
+          class="pf-v5-c-toolbar__item pf-m-chip-group"
+        >
+          <div
+            aria-labelledby="pf-random-id-1"
+            class="pf-v5-c-chip-group pf-m-category"
+            data-ouia-component-type="PF5/ChipGroup"
+            data-ouia-safe="true"
+            role="group"
+          >
+            <div
+              class="pf-v5-c-chip-group__main"
+            >
+              <span
+                class="pf-v5-c-chip-group__label"
+                id="pf-random-id-1"
+              >
+                Test Checkbox Filter
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-1"
+                class="pf-v5-c-chip-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-chip-group__list-item"
+                >
+                  <div
+                    class="pf-v5-c-chip"
+                    data-ouia-component-id="OUIA-Generated-Chip-1"
+                    data-ouia-component-type="PF5/Chip"
+                    data-ouia-safe="true"
+                  >
+                    <span
+                      class="pf-v5-c-chip__content"
+                    >
+                      <span
+                        class="pf-v5-c-chip__text"
+                        id="pf-random-id-2"
+                      >
+                        Workspace one
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v5-c-chip__actions"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="close"
+                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
+                        class="pf-v5-c-button pf-m-plain"
+                        data-ouia-component-id="close"
+                        data-ouia-component-type="PF5/Button"
+                        data-ouia-safe="true"
+                        id="remove_pf-random-id-2"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-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>
+                      </button>
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-toolbar__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-link pf-m-inline"
+          data-ouia-component-id="DataViewToolbar-clear-all-filters"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          Clear filters
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewCheckboxFilter/index.ts

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

package/src/DataViewFilters/DataViewFilters.tsx

@@ -1,9 +1,16 @@
-import React, { useMemo, useState, useRef, useEffect, ReactElement } from 'react';
+import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
 import {
   Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 
+export interface DataViewFilterOption {
+  /** Filter option label */
+  label: ReactNode;
+  /** Filter option value */
+  value: string;
+}
+
 // helper interface to generate attribute menu
 interface DataViewFilterIdentifiers {
   filterId: string;
@@ -57,6 +64,19 @@ export const DataViewFilters = <T extends object>({
     filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
   }, [ filterItems ]);
 
+  const handleClickOutside = (event: MouseEvent) => 
+    isAttributeMenuOpen &&
+    !attributeMenuRef.current?.contains(event.target as Node) &&
+    !attributeToggleRef.current?.contains(event.target as Node)
+    && setIsAttributeMenuOpen(false);
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isAttributeMenuOpen ]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const attributeToggle = (
     <MenuToggle
       ref={attributeToggleRef}
@@ -102,9 +122,9 @@ export const DataViewFilters = <T extends object>({
             isVisible={isAttributeMenuOpen}
           />
         </div>
-        {React.Children.map(children, (child) => (
-          React.isValidElement(child) ? (
-            React.cloneElement(child as ReactElement<{
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as ReactElement<{
               showToolbarItem: boolean;
               onChange: (_e: unknown, values: unknown) => void;
               value: unknown;
@@ -114,9 +134,8 @@ export const DataViewFilters = <T extends object>({
               value: values?.[child.props.filterId],
               ...child.props
             })
-          ) : child
-        ))}
-
+            : child
+        )}
       </ToolbarGroup>
     </ToolbarToggleGroup>
   );

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -31,6 +31,7 @@ export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
   ...props
 }: DataViewTextFilterProps) => (
   <ToolbarFilter
+    key={ouiaId}
     data-ouia-component-id={ouiaId}
     chips={value.length > 0 ? [ { key: title, node: value } ] : []}
     deleteChip={() => onChange?.(undefined, '')}

package/src/Hooks/filters.ts

@@ -16,15 +16,19 @@ export const useDataViewFilters = <T extends object>({
 }: UseDataViewFiltersProps<T>) => {
   const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
 
-  const getInitialFilters = useCallback((): T => isUrlSyncEnabled ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-    const urlValue = searchParams?.get(key);
-    loadedFilters[key as keyof T] = urlValue
-      ? (urlValue as T[keyof T] | T[keyof T])
-      : initialFilters[key as keyof T];
-    return loadedFilters;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, { ...initialFilters }) : initialFilters, [ isUrlSyncEnabled, JSON.stringify(initialFilters), searchParams?.toString() ]);
+  const getInitialFilters = useCallback((): T => isUrlSyncEnabled
+    ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+      const urlValue = searchParams?.get(key);
+      const isArrayFilter = Array.isArray(initialFilters[key]);
 
+      // eslint-disable-next-line no-nested-ternary
+      loadedFilters[key] = urlValue
+        ? (isArrayFilter && !Array.isArray(urlValue) ? [ urlValue ] : urlValue)
+        : initialFilters[key];
+
+      return loadedFilters;
+    }, { ...initialFilters })
+    : initialFilters, [ isUrlSyncEnabled, initialFilters, searchParams ]);
   const [ filters, setFilters ] = useState<T>(getInitialFilters());
 
   const updateSearchParams = useCallback(
@@ -32,11 +36,8 @@ export const useDataViewFilters = <T extends object>({
       if (isUrlSyncEnabled) {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([ key, value ]) => {
-          if (value) {
-            params.set(key, Array.isArray(value) ? value.join(',') : value);
-          } else {
-            params.delete(key);
-          }
+          params.delete(key);
+          (Array.isArray(value) ? value : [ value ]).forEach((val) => value && params.append(key, val));
         });
         setSearchParams?.(params);
       }

package/src/Hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './pagination';
 export * from './selection';
 export * from './filters';
+export * from './sort';

package/src/Hooks/sort.test.tsx

@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewSort, UseDataViewSortProps, DataViewSortConfig, DataViewSortParams } from './sort';
+
+describe('useDataViewSort', () => {
+  const initialSort: DataViewSortConfig = { sortBy: 'name', direction: 'asc' };
+
+  it('should initialize with provided initial sort config', () => {
+    const { result } = renderHook(() => useDataViewSort({ initialSort }));
+    expect(result.current).toEqual(expect.objectContaining(initialSort));
+  });
+
+  it('should initialize with empty sort config if no initialSort is provided', () => {
+    const { result } = renderHook(() => useDataViewSort());
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: undefined, direction: 'asc' }));
+  });
+
+  it('should update sort state when onSort is called', () => {
+    const { result } = renderHook(() => useDataViewSort({ initialSort }));
+    act(() => {
+      result.current.onSort(undefined, 'age', 'desc');
+    });
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'age', direction: 'desc' }));
+  });
+
+  it('should sync with URL search params if isUrlSyncEnabled', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewSortProps = {
+      initialSort,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewSort(props));
+
+    expect(setSearchParams).toHaveBeenCalledTimes(1);
+    expect(result.current).toEqual(expect.objectContaining(initialSort));
+  });
+
+  it('should validate direction and fallback to default direction if invalid direction is provided', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set(DataViewSortParams.SORT_BY, 'name');
+    searchParams.set(DataViewSortParams.DIRECTION, 'invalid-direction');
+    const { result } = renderHook(() => useDataViewSort({ searchParams, defaultDirection: 'desc' }));
+
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'name', direction: 'desc' }));
+  });
+
+  it('should update search params when URL sync is enabled and sort changes', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewSortProps = {
+      initialSort,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewSort(props));
+    act(() => {
+      expect(setSearchParams).toHaveBeenCalledTimes(1);
+      result.current.onSort(undefined, 'priority', 'desc');
+    });
+
+    expect(setSearchParams).toHaveBeenCalledTimes(2);
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'priority', direction: 'desc' }));
+  });
+
+  it('should prioritize searchParams values', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set(DataViewSortParams.SORT_BY, 'category');
+    searchParams.set(DataViewSortParams.DIRECTION, 'desc');
+
+    const { result } = renderHook(
+      (props: UseDataViewSortProps) => useDataViewSort(props),
+      { initialProps: { initialSort, searchParams } }
+    );
+
+    expect(result.current).toEqual(expect.objectContaining({
+      sortBy: 'category',
+      direction: 'desc',
+    }));
+  });
+});

package/src/Hooks/sort.ts

@@ -0,0 +1,87 @@
+import { ISortBy } from "@patternfly/react-table";
+import { useState, useEffect, useMemo } from "react";
+
+export enum DataViewSortParams {
+  SORT_BY = 'sortBy',
+  DIRECTION = 'direction'
+};
+
+const validateDirection = (direction: string | null | undefined, defaultDirection: ISortBy['direction']): ISortBy['direction'] => (
+  direction === 'asc' || direction === 'desc' ? direction : defaultDirection
+);
+
+export interface DataViewSortConfig {
+  /** Attribute to sort the entries by */
+  sortBy: string | undefined;
+  /** Sort direction */
+  direction: ISortBy['direction'];
+};
+
+export interface UseDataViewSortProps {
+  /** Initial sort config */
+  initialSort?: DataViewSortConfig;
+  /** Current search parameters as a string */
+  searchParams?: URLSearchParams;
+  /** Function to set search parameters */
+  setSearchParams?: (params: URLSearchParams) => void;
+  /** Default direction */
+  defaultDirection?: ISortBy['direction'];
+  /** Sort by URL param name */
+  sortByParam?: string;
+  /** Direction URL param name */
+  directionParam?: string;
+};
+
+export const useDataViewSort = (props?: UseDataViewSortProps) => {
+  const {
+    initialSort,
+    searchParams,
+    setSearchParams,
+    defaultDirection = 'asc',
+    sortByParam = DataViewSortParams.SORT_BY,
+    directionParam = DataViewSortParams.DIRECTION
+  } = props ?? {};
+
+  const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
+
+  const [ state, setState ] = useState<DataViewSortConfig>({
+    sortBy: searchParams?.get(sortByParam) ?? initialSort?.sortBy,
+    direction: validateDirection(searchParams?.get(directionParam) as ISortBy['direction'], initialSort?.direction),
+  });
+
+  const updateSearchParams = (sortBy: string, direction: ISortBy['direction']) => {
+    if (isUrlSyncEnabled && sortBy) {
+      const params = new URLSearchParams(searchParams);
+      params.set(sortByParam, `${sortBy}`);
+      params.set(directionParam, `${direction}`);
+      setSearchParams?.(params);
+    }
+  };
+
+  useEffect(() => {
+    state.sortBy && state.direction && updateSearchParams(state.sortBy, state.direction);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const currentSortBy = searchParams?.get(sortByParam) || state.sortBy;
+    const currentDirection = searchParams?.get(directionParam) as ISortBy['direction'] || state.direction;
+    const validDirection = validateDirection(currentDirection, defaultDirection);
+    currentSortBy !== state.sortBy || validDirection !== state.direction && setState({ sortBy: currentSortBy, direction: validDirection });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ searchParams?.toString() ]);
+
+  const onSort = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newSortBy: string,
+    newSortDirection: ISortBy['direction']
+  ) => {
+    setState({ sortBy: newSortBy, direction: newSortDirection });
+    updateSearchParams(newSortBy, newSortDirection);
+  };
+
+  return {
+    ...state,
+    onSort
+  };
+};

package/src/index.ts

@@ -25,5 +25,8 @@ export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
+
 export { default as DataView } from './DataView';
 export * from './DataView';