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

package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTreeFilter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = require("react");
+const react_jss_1 = require("react-jss");
+/** This style is needed so the tree filter dropdown looks like the basic filter dropdow */
+const useStyles = (0, react_jss_1.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 })));
+const DataViewTreeFilter = ({ filterId, title, value = [], onChange, showToolbarItem, ouiaId = 'DataViewTreeFilter', items, defaultExpanded = false, onSelect, defaultSelected = [] }) => {
+    const classes = useStyles();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [treeData, setTreeData] = (0, react_1.useState)(items || []);
+    const menuRef = (0, react_1.useRef)(null);
+    const isInitialMount = (0, react_1.useRef)(true);
+    const hasCalledInitialOnChange = (0, react_1.useRef)(false);
+    // Initialize tree data with defaultExpanded and defaultSelected (only on first mount)
+    (0, react_1.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
+    (0, react_1.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)
+    (0, react_1.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 = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { ref: menuRef, isOpen: isOpen, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { ref: toggleRef, onClick: () => setIsOpen(!isOpen), isExpanded: isOpen, children: title })), ouiaId: ouiaId, shouldFocusToggleOnSelect: true, children: (0, jsx_runtime_1.jsx)(react_core_1.TreeView, { hasAnimations: true, data: treeData, onCheck: onCheck, hasCheckboxes: true, className: classes.dataViewTreeFilterTreeView }) }));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.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: title, showToolbarItem: showToolbarItem, children: dropdown }, filterId));
+};
+exports.DataViewTreeFilter = DataViewTreeFilter;
+exports.default = exports.DataViewTreeFilter;

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

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

package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.test.js

@@ -0,0 +1,171 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const DataViewTreeFilter_1 = __importDefault(require("./DataViewTreeFilter"));
+const DataViewToolbar_1 = __importDefault(require("../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 } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTreeFilter_1.default, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+    describe('defaultExpanded', () => {
+        it('should have expanded items by default', () => __awaiter(void 0, void 0, void 0, function* () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTreeFilter_1.default, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = react_1.screen.getByRole('button', { name: /operating system/i });
+            yield user_event_1.default.click(openMenu);
+            yield (0, react_1.waitFor)(() => {
+                const node = react_1.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();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTreeFilter_1.default, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onChange: mockOnChange }) }));
+            const openMenu = react_1.screen.getByRole('button', { name: /operating system/i });
+            yield user_event_1.default.click(openMenu);
+            yield (0, react_1.waitFor)(() => {
+                const node = react_1.screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = react_1.screen.getByText('Ubuntu 22.04');
+            yield user_event_1.default.click(node);
+            yield (0, react_1.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();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTreeFilter_1.default, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onSelect: mockOnSelect }) }));
+            const openMenu = react_1.screen.getByRole('button', { name: /operating system/i });
+            yield user_event_1.default.click(openMenu);
+            yield (0, react_1.waitFor)(() => {
+                const node = react_1.screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = react_1.screen.getByText('Ubuntu 22.04');
+            yield user_event_1.default.click(node);
+            yield (0, react_1.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* () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTreeFilter_1.default, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = react_1.screen.getByRole('button', { name: /operating system/i });
+            yield user_event_1.default.click(openMenu);
+            yield (0, react_1.waitFor)(() => {
+                expect(react_1.screen.getByText('Linux')).toBeInTheDocument();
+                expect(react_1.screen.getByText('Windows')).toBeInTheDocument();
+                expect(react_1.screen.getByText('macOS')).toBeInTheDocument();
+                expect(react_1.screen.getByText('Ubuntu 22.04')).toBeInTheDocument();
+                expect(react_1.screen.getByText('RHEL 9')).toBeInTheDocument();
+                expect(react_1.screen.getByText('Debian 12')).toBeInTheDocument();
+                expect(react_1.screen.getByText('CentOS 8')).toBeInTheDocument();
+                expect(react_1.screen.getByText('Fedora 38')).toBeInTheDocument();
+                expect(react_1.screen.getByText('Windows Server 2022')).toBeInTheDocument();
+                expect(react_1.screen.getByText('macOS Ventura')).toBeInTheDocument();
+                expect(react_1.screen.getByText('macOS Sonoma')).toBeInTheDocument();
+            });
+        }));
+    });
+});

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

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

package/dist/cjs/DataViewTreeFilter/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var DataViewTreeFilter_1 = require("./DataViewTreeFilter");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTreeFilter_1).default; } });
+__exportStar(require("./DataViewTreeFilter"), exports);

package/dist/cjs/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/cjs/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/cjs/index.js

@@ -18,14 +18,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = exports.DataViewCheckboxFilter = exports.DataViewEventsContext = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHead = exports.DataViewTableTree = exports.DataViewTextFilter = exports.DataViewToolbar = exports.InternalContext = void 0;
+exports.DataView = exports.DataViewCheckboxFilter = exports.DataViewEventsContext = exports.DataViewFilters = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHead = exports.DataViewTableTree = exports.DataViewTextFilter = exports.DataViewTh = exports.DataViewToolbar = exports.DataViewTreeFilter = exports.InternalContext = void 0;
 var InternalContext_1 = require("./InternalContext");
 Object.defineProperty(exports, "InternalContext", { enumerable: true, get: function () { return __importDefault(InternalContext_1).default; } });
 __exportStar(require("./InternalContext"), exports);
 __exportStar(require("./Hooks"), exports);
+var DataViewTreeFilter_1 = require("./DataViewTreeFilter");
+Object.defineProperty(exports, "DataViewTreeFilter", { enumerable: true, get: function () { return __importDefault(DataViewTreeFilter_1).default; } });
+__exportStar(require("./DataViewTreeFilter"), exports);
 var DataViewToolbar_1 = require("./DataViewToolbar");
 Object.defineProperty(exports, "DataViewToolbar", { enumerable: true, get: function () { return __importDefault(DataViewToolbar_1).default; } });
 __exportStar(require("./DataViewToolbar"), exports);
+var DataViewTh_1 = require("./DataViewTh");
+Object.defineProperty(exports, "DataViewTh", { enumerable: true, get: function () { return __importDefault(DataViewTh_1).default; } });
+__exportStar(require("./DataViewTh"), exports);
 var DataViewTextFilter_1 = require("./DataViewTextFilter");
 Object.defineProperty(exports, "DataViewTextFilter", { enumerable: true, get: function () { return __importDefault(DataViewTextFilter_1).default; } });
 __exportStar(require("./DataViewTextFilter"), exports);
@@ -41,6 +47,9 @@ __exportStar(require("./DataViewTableBasic"), exports);
 var DataViewTable_1 = require("./DataViewTable");
 Object.defineProperty(exports, "DataViewTable", { enumerable: true, get: function () { return __importDefault(DataViewTable_1).default; } });
 __exportStar(require("./DataViewTable"), exports);
+var DataViewFilters_1 = require("./DataViewFilters");
+Object.defineProperty(exports, "DataViewFilters", { enumerable: true, get: function () { return __importDefault(DataViewFilters_1).default; } });
+__exportStar(require("./DataViewFilters"), exports);
 var DataViewEventsContext_1 = require("./DataViewEventsContext");
 Object.defineProperty(exports, "DataViewEventsContext", { enumerable: true, get: function () { return __importDefault(DataViewEventsContext_1).default; } });
 __exportStar(require("./DataViewEventsContext"), exports);

package/dist/dynamic/DataViewTh/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewTh/index.js","module":"../../esm/DataViewTh/index.js","typings":"../../esm/DataViewTh/index.d.ts"}

package/dist/dynamic/DataViewTreeFilter/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewTreeFilter/index.js","module":"../../esm/DataViewTreeFilter/index.js","typings":"../../esm/DataViewTreeFilter/index.d.ts"}

package/dist/dynamic-modules.json

@@ -0,0 +1,62 @@
+{
+  "DataView": "dist/dynamic/DataView",
+  "DataViewCheckboxFilter": "dist/dynamic/DataViewCheckboxFilter",
+  "DataViewCheckboxFilterProps": "dist/dynamic/DataViewCheckboxFilter",
+  "DataViewEvent": "dist/dynamic/DataViewEventsContext",
+  "DataViewEventsContext": "dist/dynamic/DataViewEventsContext",
+  "DataViewEventsContextValue": "dist/dynamic/DataViewEventsContext",
+  "DataViewEventsProvider": "dist/dynamic/DataViewEventsContext",
+  "DataViewFilterOption": "dist/dynamic/DataViewFilters",
+  "DataViewFilters": "dist/dynamic/DataViewFilters",
+  "DataViewFiltersProps": "dist/dynamic/DataViewFilters",
+  "DataViewImpementationProps": "dist/dynamic/DataView",
+  "DataViewPaginationProps": "dist/dynamic/Hooks",
+  "DataViewProps": "dist/dynamic/DataView",
+  "DataViewSelection": "dist/dynamic/InternalContext",
+  "DataViewSortConfig": "dist/dynamic/Hooks",
+  "DataViewSortParams": "dist/dynamic/Hooks",
+  "DataViewState": "dist/dynamic/DataView",
+  "DataViewTable": "dist/dynamic/DataViewTable",
+  "DataViewTableBasic": "dist/dynamic/DataViewTableBasic",
+  "DataViewTableBasicProps": "dist/dynamic/DataViewTableBasic",
+  "DataViewTableHead": "dist/dynamic/DataViewTableHead",
+  "DataViewTableHeadProps": "dist/dynamic/DataViewTableHead",
+  "DataViewTableProps": "dist/dynamic/DataViewTable",
+  "DataViewTableTree": "dist/dynamic/DataViewTableTree",
+  "DataViewTableTreeProps": "dist/dynamic/DataViewTableTree",
+  "DataViewTd": "dist/dynamic/DataViewTable",
+  "DataViewTextFilter": "dist/dynamic/DataViewTextFilter",
+  "DataViewTextFilterProps": "dist/dynamic/DataViewTextFilter",
+  "DataViewTh": "dist/dynamic/DataViewTh",
+  "DataViewThProps": "dist/dynamic/DataViewTh",
+  "DataViewThResizableProps": "dist/dynamic/DataViewTh",
+  "DataViewToolbar": "dist/dynamic/DataViewToolbar",
+  "DataViewToolbarProps": "dist/dynamic/DataViewToolbar",
+  "DataViewTr": "dist/dynamic/DataViewTable",
+  "DataViewTrObject": "dist/dynamic/DataViewTable",
+  "DataViewTrTree": "dist/dynamic/DataViewTable",
+  "DataViewTreeFilter": "dist/dynamic/DataViewTreeFilter",
+  "DataViewTreeFilterProps": "dist/dynamic/DataViewTreeFilter",
+  "EventTypes": "dist/dynamic/DataViewEventsContext",
+  "ExpandableContent": "dist/dynamic/DataViewTableBasic",
+  "InternalContext": "dist/dynamic/InternalContext",
+  "InternalContextProps": "dist/dynamic/InternalContext",
+  "InternalContextProvider": "dist/dynamic/InternalContext",
+  "InternalContextValue": "dist/dynamic/InternalContext",
+  "InternalProviderProps": "dist/dynamic/InternalContext",
+  "PaginationParams": "dist/dynamic/Hooks",
+  "UseDataViewFiltersProps": "dist/dynamic/Hooks",
+  "UseDataViewPaginationProps": "dist/dynamic/Hooks",
+  "UseDataViewSelectionProps": "dist/dynamic/Hooks",
+  "UseDataViewSortProps": "dist/dynamic/Hooks",
+  "isDataViewFilterOption": "dist/dynamic/DataViewCheckboxFilter",
+  "isDataViewTdObject": "dist/dynamic/DataViewTable",
+  "isDataViewThObject": "dist/dynamic/DataViewTable",
+  "isDataViewTrObject": "dist/dynamic/DataViewTable",
+  "useDataViewEventsContext": "dist/dynamic/DataViewEventsContext",
+  "useDataViewFilters": "dist/dynamic/Hooks",
+  "useDataViewPagination": "dist/dynamic/Hooks",
+  "useDataViewSelection": "dist/dynamic/Hooks",
+  "useDataViewSort": "dist/dynamic/Hooks",
+  "useInternalContext": "dist/dynamic/InternalContext"
+}

package/dist/esm/DataViewTable/DataViewTable.d.ts

@@ -1,8 +1,9 @@
 import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
 import { DataViewTableTreeProps } from '../DataViewTableTree';
-import { DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewTableBasicProps, ExpandableContent } from '../DataViewTableBasic';
 import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
+export type { ExpandableContent };
 export type DataViewTh = ReactNode | {
     /** Table head cell node */
     cell: ReactNode;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -2,12 +2,19 @@ import { FC } from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
+export interface ExpandableContent {
+    rowId: number;
+    columnId: number;
+    content: React.ReactNode;
+}
 /** extends TableProps */
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
+    /** Expanded rows content */
+    expandedRows?: ExpandableContent[];
     /** Table head states to be displayed when active */
     headStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Table body states to be displayed when active */
@@ -16,6 +23,10 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     ouiaId?: string;
     /** @hide Indicates if the table is resizable */
     hasResizableColumns?: boolean;
+    /** Toggles expandable */
+    isExpandable?: boolean;
+    /** Toggles sticky columns and header */
+    isSticky?: boolean;
 }
 export declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;