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

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown, MenuToggle, ToolbarFilter, TreeView } from '@patternfly/react-core';
+import { useState, useRef, useEffect } from 'react';
+import { createUseStyles } from 'react-jss';
+/** This style is needed so the tree filter dropdown looks like the basic filter dropdow */
+const useStyles = createUseStyles({
+    dataViewTreeFilterTreeView: {
+        '& .pf-v6-c-tree-view__node::after': {
+            borderRadius: 0,
+            borderRightStyle: 'none',
+            borderLeftStyle: 'none'
+        },
+        '& .pf-v6-c-tree-view__content': {
+            borderRadius: 0
+        }
+    }
+});
+// Generic helper to collect items from tree based on predicate
+const collectTreeItems = (items, predicate, leafOnly = false) => {
+    const collected = [];
+    const collect = (item) => {
+        var _a;
+        const isLeaf = !item.children || item.children.length === 0;
+        if (predicate(item) && (!leafOnly || isLeaf)) {
+            collected.push(item);
+        }
+        (_a = item.children) === null || _a === void 0 ? void 0 : _a.forEach(child => collect(child));
+    };
+    items.forEach(item => collect(item));
+    return collected;
+};
+// Helper function to get all checked items (not just leaf nodes)
+const getAllCheckedItems = (items) => collectTreeItems(items, item => { var _a; return ((_a = item.checkProps) === null || _a === void 0 ? void 0 : _a.checked) === true; }, false);
+// Get all checked leaf items (returns array of names)
+const getAllCheckedLeafItems = (items) => collectTreeItems(items, item => { var _a; return ((_a = item.checkProps) === null || _a === void 0 ? void 0 : _a.checked) === true; }, true).map(item => String(item.name));
+// Helper function to expand all nodes in the tree
+const expandAllNodes = (items) => items.map(item => (Object.assign(Object.assign({}, item), { defaultExpanded: true, children: item.children ? expandAllNodes(item.children) : undefined })));
+// Helper function to set pre-selected items
+const setPreSelectedItems = (items, selectedIds) => items.map(item => {
+    var _a, _b;
+    const isSelected = selectedIds.includes(String(item.id));
+    const hasSelectedChildren = (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.some(child => selectedIds.includes(String(child.id)))) !== null && _b !== void 0 ? _b : false;
+    return Object.assign(Object.assign({}, item), { checkProps: item.checkProps ? Object.assign(Object.assign({}, item.checkProps), { checked: isSelected || hasSelectedChildren }) : undefined, children: item.children ? setPreSelectedItems(item.children, selectedIds) : undefined });
+});
+// Helper function to uncheck all items recursively
+const uncheckRecursive = (items) => items.map(item => (Object.assign(Object.assign({}, item), { checkProps: item.checkProps ? Object.assign(Object.assign({}, item.checkProps), { checked: false }) : undefined, children: item.children ? uncheckRecursive(item.children) : undefined })));
+export const DataViewTreeFilter = ({ filterId, title, chipTitle, value = [], onChange, showToolbarItem, ouiaId = 'DataViewTreeFilter', items, defaultExpanded = false, onSelect, defaultSelected = [] }) => {
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
+    const classes = useStyles();
+    const [isOpen, setIsOpen] = useState(false);
+    const [treeData, setTreeData] = useState(items || []);
+    const menuRef = useRef(null);
+    const isInitialMount = useRef(true);
+    const hasCalledInitialOnChange = useRef(false);
+    // Initialize tree data with defaultExpanded and defaultSelected (only on first mount)
+    useEffect(() => {
+        if (!items) {
+            return;
+        }
+        let initializedData = [...items];
+        // Apply default expansion
+        if (defaultExpanded) {
+            initializedData = expandAllNodes(initializedData);
+        }
+        // Apply pre-selected items only on initial mount
+        if (isInitialMount.current && defaultSelected.length > 0) {
+            initializedData = setPreSelectedItems(initializedData, defaultSelected);
+        }
+        setTreeData(initializedData);
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+        }
+    }, [items, defaultExpanded]);
+    // Call onChange and onSelect after tree data is initialized with default selections
+    useEffect(() => {
+        if (!hasCalledInitialOnChange.current && defaultSelected.length > 0 && treeData.length > 0) {
+            const selectedValues = getAllCheckedLeafItems(treeData);
+            // Only call if there are actually selected values
+            if (selectedValues.length > 0) {
+                // Calculate both values synchronously before calling callbacks
+                const selectedItems = getAllCheckedItems(treeData);
+                // useEffect already runs after render, so this is safe
+                if (onChange) {
+                    onChange(undefined, selectedValues);
+                }
+                if (onSelect) {
+                    onSelect(selectedItems);
+                }
+                hasCalledInitialOnChange.current = true;
+            }
+        }
+    }, [treeData, onChange, onSelect, defaultSelected.length]);
+    // Sync tree checkboxes when value prop changes (when clearAllFilters is called)
+    useEffect(() => {
+        if (value.length === 0) {
+            setTreeData(currentTreeData => {
+                if (currentTreeData.length === 0) {
+                    return currentTreeData;
+                }
+                const currentCheckedItems = getAllCheckedLeafItems(currentTreeData);
+                // Only update if there are checked items that need to be unchecked
+                if (currentCheckedItems.length > 0) {
+                    return uncheckRecursive(currentTreeData);
+                }
+                return currentTreeData;
+            });
+        }
+    }, [value]);
+    // Check if all children are checked (recursive)
+    const areAllChildrenChecked = (item) => {
+        var _a, _b;
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return ((_b = item.checkProps) === null || _b === void 0 ? void 0 : _b.checked) === true;
+        }
+        return item.children.every(child => areAllChildrenChecked(child));
+    };
+    // Check if some children are checked (recursive)
+    const areSomeChildrenChecked = (item) => {
+        var _a, _b;
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return ((_b = item.checkProps) === null || _b === void 0 ? void 0 : _b.checked) === true;
+        }
+        return item.children.some(child => areSomeChildrenChecked(child));
+    };
+    // Find tree item by name
+    const findItemByName = (items, name) => {
+        for (const item of items) {
+            if (item.name === name) {
+                return item;
+            }
+            if (item.children) {
+                const found = findItemByName(item.children, name);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    };
+    // Find parent item by child ID
+    const findParentById = (items, childId) => {
+        var _a;
+        for (const item of items) {
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.some(child => child.id === childId)) {
+                return item;
+            }
+            if (item.children) {
+                const found = findParentById(item.children, childId);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    };
+    // Update parent checkbox states based on children (recursive)
+    const onCheckParentHandle = (childId) => {
+        const parent = findParentById(treeData, childId);
+        if (!parent) {
+            return;
+        }
+        if (parent.checkProps) {
+            const allChildrenChecked = areAllChildrenChecked(parent);
+            const someChildrenChecked = areSomeChildrenChecked(parent);
+            if (allChildrenChecked) {
+                parent.checkProps.checked = true;
+            }
+            else if (someChildrenChecked) {
+                parent.checkProps.checked = null;
+            }
+            else {
+                parent.checkProps.checked = false;
+            }
+        }
+        if (parent.id) {
+            onCheckParentHandle(parent.id);
+        }
+    };
+    // Check/uncheck item and all its children (recursive)
+    const onCheckHandle = (treeViewItem, checked) => {
+        var _a;
+        if (treeViewItem.checkProps) {
+            treeViewItem.checkProps.checked = checked;
+        }
+        (_a = treeViewItem.children) === null || _a === void 0 ? void 0 : _a.forEach(child => onCheckHandle(child, checked));
+    };
+    // Handle checkbox change event
+    const onCheck = (event, treeViewItem) => {
+        const checked = event.target.checked;
+        onCheckHandle(treeViewItem, checked);
+        if (treeViewItem.id) {
+            onCheckParentHandle(treeViewItem.id);
+        }
+        setTreeData(prev => [...prev]);
+        const selectedValues = getAllCheckedLeafItems(treeData);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, selectedValues);
+        if (onSelect) {
+            const selectedItems = getAllCheckedItems(treeData);
+            onSelect(selectedItems);
+        }
+    };
+    // Clear a specific filter by name (when label chip is removed)
+    const onFilterSelectorClear = (itemName) => {
+        const treeViewItem = findItemByName(treeData, itemName);
+        if (!treeViewItem) {
+            return;
+        }
+        onCheckHandle(treeViewItem, false);
+        if (treeViewItem.id) {
+            onCheckParentHandle(treeViewItem.id);
+        }
+    };
+    // Uncheck all items in the tree
+    const uncheckAllItems = () => {
+        const updatedTreeData = uncheckRecursive(treeData);
+        setTreeData(updatedTreeData);
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined, []);
+    };
+    const dropdown = (_jsx(Dropdown, { ref: menuRef, isOpen: isOpen, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsOpen(!isOpen), isExpanded: isOpen, children: title })), ouiaId: ouiaId, shouldFocusToggleOnSelect: true, children: _jsx(TreeView, { hasAnimations: true, data: treeData, onCheck: onCheck, hasCheckboxes: true, className: classes.dataViewTreeFilterTreeView }) }));
+    return (_jsx(ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.map(item => ({ key: item, node: item })), deleteLabel: (_, label) => {
+            const labelKey = typeof label === 'string' ? label : label.key;
+            onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== labelKey));
+            onFilterSelectorClear(labelKey);
+        }, deleteLabelGroup: uncheckAllItems, categoryName: categoryName, showToolbarItem: showToolbarItem, children: dropdown }, filterId));
+};
+export default DataViewTreeFilter;

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.test.js

@@ -0,0 +1,171 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import DataViewTreeFilter from './DataViewTreeFilter';
+import DataViewToolbar from '../DataViewToolbar';
+describe('DataViewTreeFilter component', () => {
+    const treeItems = [
+        {
+            name: 'Linux',
+            id: 'os-linux',
+            checkProps: { 'aria-label': 'linux-check', checked: false },
+            children: [
+                {
+                    name: 'Ubuntu 22.04',
+                    id: 'os-ubuntu',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'RHEL 9',
+                    id: 'os-rhel',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'Debian 12',
+                    id: 'os-debian',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'CentOS 8',
+                    id: 'os-centos',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'Fedora 38',
+                    id: 'os-fedora',
+                    checkProps: { checked: false }
+                }
+            ],
+            defaultExpanded: true
+        },
+        {
+            name: 'Windows',
+            id: 'os-windows',
+            checkProps: { 'aria-label': 'windows-check', checked: false },
+            children: [
+                {
+                    name: 'Windows Server 2022',
+                    id: 'os-windows-2022',
+                    checkProps: { checked: false }
+                }
+            ]
+        },
+        {
+            name: 'macOS',
+            id: 'os-macos',
+            checkProps: { 'aria-label': 'macos-check', checked: false },
+            children: [
+                {
+                    name: 'macOS Ventura',
+                    id: 'os-macos-ventura',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'macOS Sonoma',
+                    id: 'os-macos-sonoma',
+                    checkProps: { checked: false }
+                }
+            ]
+        }
+    ];
+    const defaultProps = {
+        filterId: 'test-tree-filter',
+        title: 'Test Tree Filter',
+        value: ['Linux'],
+        items: treeItems
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render correctly', () => {
+        const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(screen.getByText('Short name')).toBeInTheDocument();
+        expect(screen.getByText('Test Tree Filter')).toBeInTheDocument();
+    });
+    describe('defaultExpanded', () => {
+        it('should have expanded items by default', () => __awaiter(void 0, void 0, void 0, function* () {
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toHaveClass('pf-v6-c-tree-view__node-text');
+                expect(node).toBeInTheDocument();
+            });
+        }));
+    });
+    describe('onChange callback', () => {
+        it('onChange should be called on toggle of node', () => __awaiter(void 0, void 0, void 0, function* () {
+            const mockOnChange = jest.fn();
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onChange: mockOnChange }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = screen.getByText('Ubuntu 22.04');
+            yield userEvent.click(node);
+            yield waitFor(() => {
+                expect(mockOnChange).toHaveBeenCalled();
+            });
+        }));
+    });
+    describe('onSelect callback', () => {
+        it('onSelect should return list of selected items when item is selected', () => __awaiter(void 0, void 0, void 0, function* () {
+            const mockOnSelect = jest.fn();
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onSelect: mockOnSelect }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = screen.getByText('Ubuntu 22.04');
+            yield userEvent.click(node);
+            yield waitFor(() => {
+                expect(mockOnSelect).toHaveBeenCalled();
+                expect(mockOnSelect).toHaveBeenCalledWith(expect.arrayContaining([
+                    expect.objectContaining({
+                        name: 'Ubuntu 22.04',
+                        id: 'os-ubuntu'
+                    })
+                ]));
+            });
+        }));
+    });
+    describe('rendering all items', () => {
+        it('all tree items should be rendered', () => __awaiter(void 0, void 0, void 0, function* () {
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                expect(screen.getByText('Linux')).toBeInTheDocument();
+                expect(screen.getByText('Windows')).toBeInTheDocument();
+                expect(screen.getByText('macOS')).toBeInTheDocument();
+                expect(screen.getByText('Ubuntu 22.04')).toBeInTheDocument();
+                expect(screen.getByText('RHEL 9')).toBeInTheDocument();
+                expect(screen.getByText('Debian 12')).toBeInTheDocument();
+                expect(screen.getByText('CentOS 8')).toBeInTheDocument();
+                expect(screen.getByText('Fedora 38')).toBeInTheDocument();
+                expect(screen.getByText('Windows Server 2022')).toBeInTheDocument();
+                expect(screen.getByText('macOS Ventura')).toBeInTheDocument();
+                expect(screen.getByText('macOS Sonoma')).toBeInTheDocument();
+            });
+        }));
+    });
+});

package/dist/esm/DataViewTreeFilter/index.d.ts

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

package/dist/esm/DataViewTreeFilter/index.js

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

package/dist/esm/Hooks/selection.d.ts

@@ -1,12 +1,12 @@
-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 declare const useDataViewSelection: (props?: UseDataViewSelectionProps) => {
-    selected: any[];
-    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
-    isSelected: (item: any) => boolean;
-    setSelected: (items: any[]) => void;
+export declare const useDataViewSelection: <T = any>(props?: UseDataViewSelectionProps<T>) => {
+    selected: T[];
+    onSelect: (isSelecting: boolean, items?: T[] | T) => void;
+    isSelected: (item: T) => boolean;
+    setSelected: (items: T[]) => void;
 };

package/dist/esm/index.d.ts

@@ -1,8 +1,12 @@
 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';
+export { default as DataViewTh } from './DataViewTh';
+export * from './DataViewTh';
 export { default as DataViewTextFilter } from './DataViewTextFilter';
 export * from './DataViewTextFilter';
 export { default as DataViewTableTree } from './DataViewTableTree';
@@ -13,6 +17,8 @@ export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
+export { default as DataViewFilters } from './DataViewFilters';
+export * from './DataViewFilters';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';

package/dist/esm/index.js

@@ -2,8 +2,12 @@
 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';
+export { default as DataViewTh } from './DataViewTh';
+export * from './DataViewTh';
 export { default as DataViewTextFilter } from './DataViewTextFilter';
 export * from './DataViewTextFilter';
 export { default as DataViewTableTree } from './DataViewTableTree';
@@ -14,6 +18,8 @@ export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
+export { default as DataViewFilters } from './DataViewFilters';
+export * from './DataViewFilters';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';

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/DataViewTh/DataViewTh.tsx","../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.9.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/DataViewTh/DataViewTh.tsx","../src/DataViewTh/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/DataViewTreeFilter/DataViewTreeFilter.test.tsx","../src/DataViewTreeFilter/DataViewTreeFilter.tsx","../src/DataViewTreeFilter/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.9.3"}

package/generate-fed-package-json.js

@@ -1,6 +1,7 @@
 const fse = require('fs-extra');
 const { globSync } = require('glob');
 const path = require('path');
+const { default: getDynamicModuleMap } = require('../../scripts/parse-dynamic-modules.mjs');
 
 const root = process.cwd();
 
@@ -60,12 +61,29 @@ async function generatePackages(files) {
   return Promise.all(cmds);
 }
 
+async function generateDynamicModuleMap() {
+  const moduleMap = getDynamicModuleMap(root);
+  // eslint-disable-next-line no-console
+  console.log('Generating dynamic module map for', Object.keys(moduleMap).length, 'modules');
+
+  if (Object.keys(moduleMap).length === 0) {
+    return Promise.resolve();
+  }
+
+  const moduleMapSorted = Object.keys(moduleMap)
+    .sort()
+    .reduce((acc, key) => ({ ...acc, [key]: moduleMap[key] }), {});
+
+  return fse.writeJSON(path.resolve(root, 'dist/dynamic-modules.json'), moduleMapSorted, { spaces: 2 });
+}
+
 async function run(files) {
   try {
     await generatePackages(files);
     if (indexTypings.length === 1) {
       copyTypings(indexTypings, root);
     }
+    await generateDynamicModuleMap();
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(error);

package/generate-index.js

@@ -6,7 +6,7 @@ const root = process.cwd();
 
 const ENV_AGNOSTIC_ROOT = `${root}/src`
 
-const sourceFiles = globSync(path.resolve(__dirname, './src/*/index.ts'))
+const sourceFiles = globSync(path.resolve(__dirname, './src/*/index.{ts,tsx}'))
 
 async function generateIndex(files) {
   // ensure the dynamic root exists
@@ -19,7 +19,7 @@ async function generateIndex(files) {
     stream.write('// this file is autogenerated by generate-index.js, modifying it manually will have no effect\n');
 
     files.forEach(file => {
-      const name = file.replace('/index.ts', '').split('/').pop();
+      const name = file.replace(/\/index\.(ts|tsx)$/, '').split('/').pop();
       // do not generate default exports for Hooks/
       name !== 'Hooks' && stream.write(`\nexport { default as ${name} } from './${name}';\n`);
       stream.write(`export * from './${name}';\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0",
+  "version": "6.5.0-prerelease.2",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -47,14 +47,14 @@
     "@patternfly/patternfly": "^6.4.0",
     "@patternfly/react-code-editor": "^6.4.0",
     "@patternfly/patternfly-a11y": "^5.1.0",
-    "@types/react": "^18.3.23",
+    "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.9.2"
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2",
+    "rimraf": "^6.1.2",
+    "typescript": "^5.9.3"
   }
 }

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

@@ -22,15 +22,17 @@ import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic
 
 **Note:** Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view)
 
-If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.
+The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
 
----
+--- 
 
-The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
+## How to structure and implement the data view
+
+The **data view** extension provides a modular architecture that lets you efficiently create consistent data views, either by using predefined sub-components and hooks or by defining your own custom implementations.
 
 ### Layout
 
-A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/layouts/stack).
+A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/foundations-and-styles/layouts/stack).
 
 The data view toolbars and sub-components that display the data (like a card view or table) are always passed as `children` to the `<DataView>` component.
 
@@ -61,3 +63,7 @@ This example uses the `<DataViewEventsProvider>` to display details about a sele
 ```js file="./EventsExample.tsx"
 
 ```
+
+---
+
+If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.

package/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx

@@ -244,7 +244,8 @@ const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selected
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={repositories.length} 
             {...pagination}