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

package/dist/esm/DataViewTh/DataViewTh.js

@@ -0,0 +1,215 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect, Fragment } from 'react';
+import { Th } from '@patternfly/react-table';
+import { Button, getLanguageDirection } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+import tableCellPaddingBlockEnd from '@patternfly/react-tokens/dist/esm/c_table_cell_PaddingBlockEnd';
+import tableCellPaddingInlineEnd from '@patternfly/react-tokens/dist/esm/c_table_cell_PaddingInlineEnd';
+import globalFontSizeBodyDefault from '@patternfly/react-tokens/dist/esm/t_global_font_size_body_default';
+const ResizeIcon = () => (_jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 1024 1024", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { fillRule: "evenodd", d: "M52.7,529.8l190.5,161.9c18.6,15.9,50.5,4.7,50.5-17.8v-324c0-22.4-31.8-33.6-50.5-17.8L52.7,494.2c-11.5,9.8-11.5,25.8,0,35.6ZM480.8,12.9h62.4v998.3h-62.4V12.9ZM971.3,529.8l-190.5,161.9c-18.6,15.9-50.5,4.7-50.5-17.8v-324c0-22.4,31.8-33.6,50.5-17.8l190.5,161.9c11.5,9.8,11.5,25.8,0,35.6Z" }) }));
+const useStyles = createUseStyles({
+    dataViewResizeableTh: {
+        [tableCellPaddingInlineEnd.name]: `calc(${globalFontSizeBodyDefault.var} * 2)`
+    },
+    dataViewResizableButton: {
+        position: 'absolute',
+        insetInlineEnd: `calc(${globalFontSizeBodyDefault.var} / 2)`,
+        insetBlockEnd: tableCellPaddingBlockEnd.var,
+        cursor: 'grab',
+        '&:active': {
+            cursor: 'grabbing'
+        }
+    }
+});
+export const DataViewTh = (_a) => {
+    var { content, resizableProps = {}, hasResizableColumns = false, thProps } = _a, props = __rest(_a, ["content", "resizableProps", "hasResizableColumns", "thProps"]);
+    const thRef = useRef(null);
+    const [width, setWidth] = useState((resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.width) ? resizableProps.width : 0);
+    // Tracks the current column width for the onResize callback, because the width state is not updated until after the resize is complete
+    const trackedWidth = useRef(0);
+    const classes = useStyles();
+    const isResizable = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.isResizable) || false;
+    const increment = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.increment) || 5;
+    const shiftIncrement = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.shiftIncrement) || 25;
+    const resizeButtonAriaLabel = resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.resizeButtonAriaLabel;
+    const onResize = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.onResize) || undefined;
+    const screenReaderText = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.screenReaderText) || `Column ${width.toFixed(0)} pixels`;
+    const dataViewThClassName = isResizable ? classes.dataViewResizeableTh : undefined;
+    const resizeButtonRef = useRef(null);
+    const setInitialVals = useRef(true);
+    const dragOffset = useRef(0);
+    const isResizing = useRef(false);
+    const isInView = useRef(true);
+    if (isResizable && !resizeButtonAriaLabel) {
+        // eslint-disable-next-line no-console
+        console.warn('DataViewTh: Missing resizeButtonAriaLabel. An aria label must be passed to each resizable column to provide a context specific label for its resize button.');
+    }
+    useEffect(() => {
+        if (!isResizable) {
+            return;
+        }
+        const observed = resizeButtonRef.current;
+        const observer = new IntersectionObserver(([entry]) => {
+            isInView.current = entry.isIntersecting;
+        }, { threshold: 0.3 });
+        if (observed) {
+            observer.observe(observed);
+        }
+        return () => {
+            if (observed) {
+                observer.unobserve(observed);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        var _a;
+        if ((isResizable || hasResizableColumns) && setInitialVals.current && width === 0) {
+            setWidth(((_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0);
+            setInitialVals.current = false;
+        }
+    }, [isResizable, hasResizableColumns, setInitialVals]);
+    const setDragOffset = (e) => {
+        var _a, _b;
+        const isRTL = getLanguageDirection(thRef.current) === 'rtl';
+        const startingMousePos = 'clientX' in e ? e.clientX : e.touches[0].clientX;
+        const startingColumnPos = (isRTL ? (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left : (_b = thRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) || 0;
+        dragOffset.current = startingColumnPos - startingMousePos;
+    };
+    const handleMousedown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener('mousemove', callbackMouseMove);
+        document.addEventListener('mouseup', callbackMouseUp);
+        // When a user begins resizing a column, set the drag offset so the drag motion aligns with the column edge
+        if (dragOffset.current === 0) {
+            setDragOffset(e);
+        }
+        isResizing.current = true;
+    };
+    const handleMouseMove = (e) => {
+        const mousePos = e.clientX;
+        handleControlMove(e, dragOffset.current + mousePos);
+    };
+    const handleTouchStart = (e) => {
+        e.stopPropagation();
+        document.addEventListener('touchmove', callbackTouchMove, { passive: false });
+        document.addEventListener('touchend', callbackTouchEnd);
+        // When a user begins resizing a column, set the drag offset so the drag motion aligns with the column edge
+        if (dragOffset.current === 0) {
+            setDragOffset(e);
+        }
+        isResizing.current = true;
+    };
+    const handleTouchMove = (e) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        const touchPos = e.touches[0].clientX;
+        handleControlMove(e, touchPos);
+    };
+    const handleControlMove = (e, controlPosition) => {
+        var _a, _b;
+        e.stopPropagation();
+        if (!isResizing.current) {
+            return;
+        }
+        const columnRect = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (columnRect === undefined) {
+            return;
+        }
+        const mousePos = controlPosition;
+        const isRTL = getLanguageDirection(thRef.current) === 'rtl';
+        let newSize = isRTL ? (columnRect === null || columnRect === void 0 ? void 0 : columnRect.right) - mousePos : mousePos - (columnRect === null || columnRect === void 0 ? void 0 : columnRect.left);
+        // Prevent the column from shrinking below a specified minimum width
+        if (resizableProps.minWidth && newSize < resizableProps.minWidth) {
+            newSize = resizableProps.minWidth;
+        }
+        (_b = thRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('min-width', newSize + 'px');
+        trackedWidth.current = newSize;
+        setWidth(newSize);
+    };
+    const handleMouseup = (e) => {
+        var _a;
+        if (!isResizing.current) {
+            return;
+        }
+        // Reset the isResizing and dragOffset values to their initial states
+        isResizing.current = false;
+        dragOffset.current = 0;
+        // Call the onResize callback with the new width
+        onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, trackedWidth.current);
+        // Handle scroll into view when column drag button is moved off screen
+        if (resizeButtonRef.current && !isInView.current) {
+            (_a = resizeButtonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        document.removeEventListener('mousemove', callbackMouseMove);
+        document.removeEventListener('mouseup', callbackMouseUp);
+    };
+    const handleTouchEnd = (e) => {
+        e.stopPropagation();
+        if (!isResizing) {
+            return;
+        }
+        // Reset the isResizing and dragOffset values to their initial states
+        isResizing.current = false;
+        dragOffset.current = 0;
+        // Call the onResize callback with the new width
+        onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, trackedWidth.current);
+        document.removeEventListener('touchmove', callbackTouchMove);
+        document.removeEventListener('touchend', callbackTouchEnd);
+    };
+    const callbackMouseMove = useCallback(handleMouseMove, []);
+    const callbackTouchEnd = useCallback(handleTouchEnd, []);
+    const callbackTouchMove = useCallback(handleTouchMove, []);
+    const callbackMouseUp = useCallback(handleMouseup, []);
+    const handleKeys = (e) => {
+        var _a, _b;
+        const key = e.key;
+        if (key === 'Tab') {
+            isResizing.current = false;
+        }
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
+            return;
+        }
+        e.preventDefault();
+        isResizing.current = true;
+        const isRTL = getLanguageDirection(thRef.current) === 'rtl';
+        const columnRect = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        let newSize = (columnRect === null || columnRect === void 0 ? void 0 : columnRect.width) || 0;
+        let delta = 0;
+        const _increment = e.shiftKey ? shiftIncrement : increment;
+        if (key === 'ArrowRight') {
+            if (isRTL) {
+                delta = -_increment;
+            }
+            else {
+                delta = _increment;
+            }
+        }
+        else if (key === 'ArrowLeft') {
+            if (isRTL) {
+                delta = _increment;
+            }
+            else {
+                delta = -_increment;
+            }
+        }
+        newSize = newSize + delta;
+        (_b = thRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('min-width', newSize + 'px');
+        setWidth(newSize);
+        onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, newSize);
+    };
+    const resizableContent = (_jsxs(Fragment, { children: [_jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: screenReaderText }), _jsx(Button, { ref: resizeButtonRef, variant: "plain", hasNoPadding: true, icon: _jsx(ResizeIcon, {}), onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, "aria-label": resizeButtonAriaLabel, className: classes.dataViewResizableButton })] }));
+    return (_jsx(Th, Object.assign({}, thProps, props, { style: width > 0 ? { minWidth: width } : undefined, ref: thRef, modifier: "truncate", className: dataViewThClassName }, (isResizable && { additionalContent: resizableContent }), { children: content })));
+};
+export default DataViewTh;

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

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

package/dist/esm/DataViewTh/index.js

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

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

@@ -0,0 +1,26 @@
+import { ToolbarFilterProps, TreeViewDataItem } from '@patternfly/react-core';
+import React, { FC } from 'react';
+export interface DataViewTreeFilterProps {
+    /** Unique key for the filter attribute */
+    filterId: string;
+    /** Array of current filter values */
+    value?: string[];
+    /** Filter title displayed in the toolbar */
+    title: string;
+    /** Callback for when the selection changes */
+    onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+    /** Controls visibility of the filter in the toolbar */
+    showToolbarItem?: ToolbarFilterProps['showToolbarItem'];
+    /** Custom OUIA ID */
+    ouiaId?: string;
+    /** Hierarchical data items for the tree structure */
+    items?: TreeViewDataItem[];
+    /** When true, expands all tree nodes by default */
+    defaultExpanded?: boolean;
+    /** Callback for when tree items are selected/deselected, provides all currently selected nodes */
+    onSelect?: (selectedItems: TreeViewDataItem[]) => void;
+    /** Array of pre-selected item id's to be checked on initial render */
+    defaultSelected?: string[];
+}
+export declare const DataViewTreeFilter: FC<DataViewTreeFilterProps>;
+export default DataViewTreeFilter;

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.js

@@ -0,0 +1,225 @@
+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, value = [], onChange, showToolbarItem, ouiaId = 'DataViewTreeFilter', items, defaultExpanded = false, onSelect, defaultSelected = [] }) => {
+    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: title, 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,166 @@
+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();
+    });
+    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

@@ -8,4 +8,5 @@ export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) =
     selected: any[];
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     isSelected: (item: any) => boolean;
+    setSelected: (items: any[]) => void;
 };