@patternfly/react-data-view 6.1.0 → 6.3.0-prerelease.3

package/src/Hooks/filters.test.tsx

@@ -53,6 +53,33 @@ describe('useDataViewFilters', () => {
     expect(setSearchParams).toHaveBeenCalled();
   });
 
+  it('should sync with URL search params with non array value', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set('test', 'foo');
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<{ test: string }> = {
+      initialFilters: { test: '' },
+      searchParams,
+      setSearchParams,
+    };
+    const { result } = renderHook(() => useDataViewFilters(props));
+    expect(result.current.filters).toEqual({ test: 'foo' });
+  })  
+  it('should sync with URL search params with array value', () => {
+
+    const searchParams = new URLSearchParams();
+    searchParams.append('test', 'foo');
+    searchParams.append('test', 'bar');
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<{ test: string[] }> = {
+      initialFilters: { test: [] },
+      searchParams,
+      setSearchParams,
+    };
+    const { result } = renderHook(() => useDataViewFilters(props));
+    expect(result.current.filters).toEqual({ test: [ 'foo', 'bar' ] });
+  })  
+
   it('should reset filters to default values when clearAllFilters is called', () => {
     const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
     act(() => result.current.clearAllFilters());

package/src/Hooks/filters.ts

@@ -18,8 +18,8 @@ export const useDataViewFilters = <T extends object>({
 
   const getInitialFilters = useCallback((): T => isUrlSyncEnabled
     ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-      const urlValue = searchParams?.get(key);
       const isArrayFilter = Array.isArray(initialFilters[key]);
+      const urlValue = isArrayFilter ? searchParams?.getAll(key) : searchParams?.get(key);
 
       // eslint-disable-next-line no-nested-ternary
       loadedFilters[key] = urlValue

package/src/InternalContext/InternalContext.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom'; 
 import { useInternalContext, DataViewSelection } from './InternalContext';

package/src/InternalContext/InternalContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
+import { FC, createContext, PropsWithChildren, useContext, useMemo } from 'react';
 import { DataViewState } from '../DataView';
 
 export interface DataViewSelection {
@@ -31,7 +31,7 @@ export const InternalContext = createContext<InternalContextValue>({
 
 export type InternalProviderProps = PropsWithChildren<InternalContextProps>
 
-export const InternalContextProvider: React.FC<InternalProviderProps> = ({
+export const InternalContextProvider: FC<InternalProviderProps> = ({
   children,
   selection,
   activeState

package/tsconfig.json

@@ -9,7 +9,7 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */