@patternfly/react-data-view 6.1.0 → 6.2.0

package/dist/cjs/DataViewToolbar/DataViewToolbar.d.ts

@@ -12,6 +12,8 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
     pagination?: React.ReactNode;
     /** React node to display actions */
     actions?: React.ReactNode;
+    /** React node to display toggle group */
+    toggleGroup?: React.ReactNode;
     /** React node to display filters */
     filters?: React.ReactNode;
     /** React node to display custom filter labels */

package/dist/cjs/DataViewToolbar/DataViewToolbar.js

@@ -38,7 +38,7 @@ exports.DataViewToolbar = void 0;
 const react_1 = __importStar(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "toggleGroup", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
     const defaultClearFilters = (0, react_1.useRef)(react_1.default.createElement(react_core_1.ToolbarItem, null,
         react_1.default.createElement(react_core_1.Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true }, "Clear filters")));
     return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props),
@@ -46,6 +46,7 @@ const DataViewToolbar = (_a) => {
             bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
             filters && (react_1.default.createElement(react_core_1.ToolbarItem, null, filters)),
             actions && (react_1.default.createElement(react_core_1.ToolbarItem, null, actions)),
+            toggleGroup && (react_1.default.createElement(react_core_1.ToolbarItem, null, toggleGroup)),
             pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

package/dist/cjs/Hooks/filters.js

@@ -7,8 +7,8 @@ const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearchParams
     const isUrlSyncEnabled = (0, react_1.useMemo)(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
     const getInitialFilters = (0, react_1.useCallback)(() => isUrlSyncEnabled
         ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-            const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
             const isArrayFilter = Array.isArray(initialFilters[key]);
+            const urlValue = isArrayFilter ? searchParams === null || searchParams === void 0 ? void 0 : searchParams.getAll(key) : searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
             // eslint-disable-next-line no-nested-ternary
             loadedFilters[key] = urlValue
                 ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)

package/dist/cjs/Hooks/filters.test.js

@@ -42,6 +42,31 @@ describe('useDataViewFilters', () => {
         (0, react_1.act)(() => result.current.onSetFilters({ search: 'new search' }));
         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 = {
+            initialFilters: { test: '' },
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.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 = {
+            initialFilters: { test: [] },
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)(props));
+        expect(result.current.filters).toEqual({ test: ['foo', 'bar'] });
+    });
     it('should reset filters to default values when clearAllFilters is called', () => {
         const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
         (0, react_1.act)(() => result.current.clearAllFilters());

package/dist/esm/DataViewToolbar/DataViewToolbar.d.ts

@@ -12,6 +12,8 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
     pagination?: React.ReactNode;
     /** React node to display actions */
     actions?: React.ReactNode;
+    /** React node to display toggle group */
+    toggleGroup?: React.ReactNode;
     /** React node to display filters */
     filters?: React.ReactNode;
     /** React node to display custom filter labels */

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 export const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "toggleGroup", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
     const defaultClearFilters = useRef(React.createElement(ToolbarItem, null,
         React.createElement(Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true }, "Clear filters")));
     return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props),
@@ -20,6 +20,7 @@ export const DataViewToolbar = (_a) => {
             bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
             filters && (React.createElement(ToolbarItem, null, filters)),
             actions && (React.createElement(ToolbarItem, null, actions)),
+            toggleGroup && (React.createElement(ToolbarItem, null, toggleGroup)),
             pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

package/dist/esm/Hooks/filters.js

@@ -4,8 +4,8 @@ export const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearc
     const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
     const getInitialFilters = useCallback(() => isUrlSyncEnabled
         ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-            const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
             const isArrayFilter = Array.isArray(initialFilters[key]);
+            const urlValue = isArrayFilter ? searchParams === null || searchParams === void 0 ? void 0 : searchParams.getAll(key) : searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
             // eslint-disable-next-line no-nested-ternary
             loadedFilters[key] = urlValue
                 ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)

package/dist/esm/Hooks/filters.test.js

@@ -40,6 +40,31 @@ describe('useDataViewFilters', () => {
         act(() => result.current.onSetFilters({ search: 'new search' }));
         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 = {
+            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 = {
+            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/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/dataview/dataview.test.tsx","../src/dataview/dataview.tsx","../src/dataview/index.ts","../src/dataviewcheckboxfilter/dataviewcheckboxfilter.test.tsx","../src/dataviewcheckboxfilter/dataviewcheckboxfilter.tsx","../src/dataviewcheckboxfilter/index.ts","../src/datavieweventscontext/datavieweventscontext.test.tsx","../src/datavieweventscontext/datavieweventscontext.tsx","../src/datavieweventscontext/index.ts","../src/dataviewfilters/dataviewfilters.test.tsx","../src/dataviewfilters/dataviewfilters.tsx","../src/dataviewfilters/index.tsx","../src/dataviewtable/dataviewtable.test.tsx","../src/dataviewtable/dataviewtable.tsx","../src/dataviewtable/index.ts","../src/dataviewtablebasic/dataviewtablebasic.test.tsx","../src/dataviewtablebasic/dataviewtablebasic.tsx","../src/dataviewtablebasic/index.ts","../src/dataviewtablehead/dataviewtablehead.test.tsx","../src/dataviewtablehead/dataviewtablehead.tsx","../src/dataviewtablehead/index.ts","../src/dataviewtabletree/dataviewtabletree.test.tsx","../src/dataviewtabletree/dataviewtabletree.tsx","../src/dataviewtabletree/index.ts","../src/dataviewtextfilter/dataviewtextfilter.test.tsx","../src/dataviewtextfilter/dataviewtextfilter.tsx","../src/dataviewtextfilter/index.ts","../src/dataviewtoolbar/dataviewtoolbar.test.tsx","../src/dataviewtoolbar/dataviewtoolbar.tsx","../src/dataviewtoolbar/index.ts","../src/hooks/filters.test.tsx","../src/hooks/filters.ts","../src/hooks/index.ts","../src/hooks/pagination.test.tsx","../src/hooks/pagination.ts","../src/hooks/selection.test.tsx","../src/hooks/selection.ts","../src/hooks/sort.test.tsx","../src/hooks/sort.ts","../src/internalcontext/internalcontext.test.tsx","../src/internalcontext/internalcontext.tsx","../src/internalcontext/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -43,17 +43,17 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.0",
+    "@patternfly/documentation-framework": "^6.5.20",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/patternfly-a11y": "^5.0.0",
-    "@types/react": "^18.3.18",
+    "@patternfly/patternfly-a11y": "^5.1.0",
+    "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.28.1",
-    "react-router-dom": "^6.28.1",
+    "react-router": "^6.30.0",
+    "react-router-dom": "^6.30.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.4.5"
   }

package/patternfly-docs/content/extensions/data-view/examples/Toolbar/AllSelectedExample.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Pagination, ToggleGroup, ToggleGroupItem, Tooltip } from '@patternfly/react-core';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups';
+
+const TOGGLE_ALL = 'all';
+const TOGGLE_SELECTED = 'selected';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+};
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const [ selectedToggle, setSelectedToggle ] = useState(TOGGLE_ALL);
+  const { selected, onSelect } = selection;
+  const { page, perPage, onSetPage } = pagination;
+
+  const pageRows = useMemo(() => (selectedToggle === TOGGLE_SELECTED ? selected : rows).slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage, selectedToggle, selected ]);
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, rows);
+  };
+    
+  const handleItemClick = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, _isSelected: boolean) => {
+    const id = event.currentTarget.id;
+    
+    if (id === TOGGLE_SELECTED && selected.length === 0) {
+      return;
+    }
+  
+    if (selectedToggle !== id) {
+      setSelectedToggle(id);
+      onSetPage(undefined, 1);
+    }
+  };
+
+  useEffect(() => {
+    if (selected.length === 0) {
+      setSelectedToggle(TOGGLE_ALL);
+    }
+  }, [ selected ]);
+
+  return (
+    <DataView selection={selection}>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+        toggleGroup={
+          <ToggleGroup aria-label="Toggle group to switch between all / selected table rows">
+            <ToggleGroupItem
+              text="All"
+              buttonId={TOGGLE_ALL}
+              isSelected={selectedToggle === TOGGLE_ALL}
+              onChange={handleItemClick}
+            />
+            <ToggleGroupItem
+              id="selected-row-switch"
+              text="Selected"
+              buttonId={TOGGLE_SELECTED}
+              isSelected={selectedToggle === TOGGLE_SELECTED}
+              onChange={handleItemClick}
+              aria-disabled={selected.length === 0}
+            />
+          </ToggleGroup>
+        }
+        pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} 
+      />
+      
+      {selected.length === 0 && (<Tooltip
+        id="selected-row-switch-tooltip"
+        content="Select at least one row to enable this filter"
+        triggerRef={() => document.getElementById('selected-row-switch') as HTMLButtonElement}
+      />)}
+  
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
+    </DataView>
+  );
+};

package/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md

@@ -15,8 +15,9 @@ sortValue: 2
 propComponents: ['DataViewToolbar', 'DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md
 ---
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { Pagination, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
@@ -140,3 +141,14 @@ This example demonstrates the setup and usage of filters within the data view. I
 ```js file="./FiltersExample.tsx"
 
 ```
+
+
+## All/selected data switch
+All/selected data switch allows users to toggle between displaying the entire table (All) and only the rows they have selected (Selected). If the user deselects the last selected row, the filter automatically switches back to All, displaying all table rows again. Until at least one row is selected, a tooltip with guidance is displayed, and the Selected button does not perform any action. The Selected button is intentionally not disabled for accessibility reasons but instead has `aria-disabled` set.
+
+### All/selected example
+This example demonstrates the setup and usage of All/selected row switch.
+
+```js file="./AllSelectedExample.tsx"
+
+```

package/release.config.js

@@ -10,5 +10,5 @@ module.exports = {
     '@semantic-release/npm'
   ],
   tagFormat: 'prerelease-v${version}',
-  dryRun: false
+  dryRun: true
 };

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -13,13 +13,15 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
   pagination?: React.ReactNode;
   /** React node to display actions */
   actions?: React.ReactNode;
+  /** React node to display toggle group */
+  toggleGroup?: React.ReactNode;
   /** React node to display filters */
   filters?: React.ReactNode;
   /** React node to display custom filter labels */
   customLabelGroupContent?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -45,6 +47,11 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
             {actions}
           </ToolbarItem>
         )}
+        {toggleGroup && (
+          <ToolbarItem>
+            {toggleGroup}
+          </ToolbarItem>
+        )}
         {pagination && (
           <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
             {pagination}

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