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

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,6 +1,8 @@
 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';

package/dist/cjs/index.js

@@ -18,11 +18,14 @@ 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.DataViewFilters = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHead = exports.DataViewTableTree = exports.DataViewTextFilter = exports.DataViewTh = 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);

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

@@ -35,6 +35,8 @@
   "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",

package/dist/esm/DataViewTextFilter/DataViewTextFilter.d.ts

@@ -16,6 +16,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
     trimValue?: boolean;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** Enable keyboard shortcut (/) to focus the filter. Defaults to true. */
+    enableShortcut?: boolean;
 }
 export declare const DataViewTextFilter: FC<DataViewTextFilterProps>;
 export default DataViewTextFilter;

package/dist/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -10,9 +10,37 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { SearchInput, ToolbarFilter } from '@patternfly/react-core';
 export const DataViewTextFilter = (_a) => {
-    var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId"]);
+    var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter', enableShortcut = true } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    useEffect(() => {
+        if (!enableShortcut) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            // Only handle "/" key when not typing in an input, textarea, or contenteditable element
+            if (event.key === '/' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                const target = event.target;
+                const isInputElement = target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.isContentEditable;
+                // Only focus if the filter is visible and we're not already in an input field
+                if (showToolbarItem && !isInputElement) {
+                    // Find the input element by its ID (searchInputId prop)
+                    const inputElement = document.getElementById(filterId);
+                    if (inputElement) {
+                        event.preventDefault();
+                        inputElement.focus();
+                    }
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [showToolbarItem, filterId, enableShortcut]);
     return (_jsx(ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.length > 0 ? [{ key: title, node: value }] : [], deleteLabel: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem, children: _jsx(SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props)) }, ouiaId));
 };
 export default DataViewTextFilter;

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

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/esm/DataViewTextFilter/DataViewTextFilter.test.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DataViewTextFilter from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
 describe('DataViewTextFilter component', () => {
@@ -14,4 +15,86 @@ describe('DataViewTextFilter component', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should focus the search input when "/" key is pressed and filter is visible', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true })) }));
+        const input = document.getElementById('test-filter');
+        expect(input).toBeInTheDocument();
+        // Simulate pressing "/" key by creating and dispatching a KeyboardEvent
+        const keyEvent = new KeyboardEvent('keydown', {
+            key: '/',
+            code: 'Slash',
+            bubbles: true,
+            cancelable: true,
+        });
+        window.dispatchEvent(keyEvent);
+        // Check that the input has focus
+        expect(document.activeElement).toBe(input);
+    });
+    it('should not focus the search input when "/" key is pressed if filter is not visible', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: false })) }));
+        const input = document.getElementById('test-filter');
+        // Simulate pressing "/" key
+        const keyEvent = new KeyboardEvent('keydown', {
+            key: '/',
+            code: 'Slash',
+            bubbles: true,
+            cancelable: true,
+        });
+        window.dispatchEvent(keyEvent);
+        if (input) {
+            expect(document.activeElement).not.toBe(input);
+        }
+    });
+    it('should not focus the search input when "/" key is pressed while typing in another input', () => {
+        const { container } = render(_jsxs("div", { children: [_jsx("input", { "data-testid": "other-input" }), _jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true })) })] }));
+        const otherInput = container.querySelector('[data-testid="other-input"]');
+        // Focus the other input first
+        otherInput.focus();
+        expect(document.activeElement).toBe(otherInput);
+        // Simulate pressing "/" key while focused on the other input
+        // The event target should be the input element
+        const keyEvent = new KeyboardEvent('keydown', {
+            key: '/',
+            code: 'Slash',
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperty(keyEvent, 'target', {
+            value: otherInput,
+            enumerable: true,
+        });
+        window.dispatchEvent(keyEvent);
+        // The search input should not be focused since we're already in an input field
+        expect(document.activeElement).toBe(otherInput);
+    });
+    it('should not focus the search input when enableShortcut is false', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true, enableShortcut: false })) }));
+        const input = document.getElementById('test-filter');
+        expect(input).toBeInTheDocument();
+        // Simulate pressing "/" key
+        const keyEvent = new KeyboardEvent('keydown', {
+            key: '/',
+            code: 'Slash',
+            bubbles: true,
+            cancelable: true,
+        });
+        window.dispatchEvent(keyEvent);
+        // The input should not be focused since the shortcut is disabled
+        expect(document.activeElement).not.toBe(input);
+    });
+    it('should focus the search input when enableShortcut is true (default)', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true })) }));
+        const input = document.getElementById('test-filter');
+        expect(input).toBeInTheDocument();
+        // Simulate pressing "/" key
+        const keyEvent = new KeyboardEvent('keydown', {
+            key: '/',
+            code: 'Slash',
+            bubbles: true,
+            cancelable: true,
+        });
+        window.dispatchEvent(keyEvent);
+        // The input should be focused since the shortcut is enabled by default
+        expect(document.activeElement).toBe(input);
+    });
 });

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

@@ -5,13 +5,13 @@ export interface DataViewThResizableProps {
     isResizable?: boolean;
     /** Callback after the column is resized. Returns the triggering event, the column id passed in via cell props, and the new width of the column. */
     onResize?: (event: ReactMouseEvent | MouseEvent | ReactKeyboardEvent | KeyboardEvent | TouchEvent, id: string | number | undefined, width: number) => void;
-    /** Width of the column */
+    /** Starting width in pixels of the column */
     width?: number;
-    /** Minimum width of the column */
+    /** Minimum resize width in pixels of the column */
     minWidth?: number;
-    /** Increment for keyboard navigation */
+    /** Increment in pixels for keyboard navigation */
     increment?: number;
-    /** Increment for keyboard navigation while shift is held */
+    /** Increment in pixels for keyboard navigation while shift is held */
     shiftIncrement?: number;
     /** Provides an accessible name for the resizable column via a human readable string. */
     resizeButtonAriaLabel?: string;

package/dist/esm/DataViewTh/DataViewTh.js

@@ -210,6 +210,13 @@ export const DataViewTh = (_a) => {
         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 })));
+    const classNames = [];
+    if (thProps === null || thProps === void 0 ? void 0 : thProps.className) {
+        classNames.push(thProps.className);
+    }
+    if (dataViewThClassName) {
+        classNames.push(dataViewThClassName);
+    }
+    return (_jsx(Th, Object.assign({ modifier: "truncate" }, thProps, props, { ref: thRef, style: width > 0 ? Object.assign(Object.assign({}, thProps === null || thProps === void 0 ? void 0 : thProps.style), { minWidth: width }) : thProps === null || thProps === void 0 ? void 0 : thProps.style, className: classNames.length > 0 ? classNames.join(' ') : undefined }, (isResizable && { additionalContent: resizableContent }), { children: content })));
 };
 export default DataViewTh;

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -12,9 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    dataViewToolbarPagination: {
+        flexBasis: '100%',
+        width: '100%'
+    },
+    dataViewToolbarPaginationWrapper: {
+        flexBasis: '100%',
+        width: '100%'
+    }
+});
 export const DataViewToolbar = (_a) => {
     var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "toggleGroup", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
+    const classes = useStyles();
     const defaultClearFilters = useRef(_jsx(ToolbarItem, { children: _jsx(Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true, children: "Clear filters" }) }));
-    return (_jsx(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props, { children: _jsxs(ToolbarContent, { children: [bulkSelect && (_jsx(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select`, children: bulkSelect })), filters && (_jsx(ToolbarItem, { children: filters })), actions && (_jsx(ToolbarItem, { children: actions })), toggleGroup && (_jsx(ToolbarItem, { children: toggleGroup })), pagination && (_jsx(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination`, children: pagination })), children] }) })));
+    return (_jsx(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props, { children: _jsxs(ToolbarContent, { children: [bulkSelect && (_jsx(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select`, children: bulkSelect })), filters && (_jsx(ToolbarItem, { children: filters })), actions && (_jsx(ToolbarItem, { children: actions })), toggleGroup && (_jsx(ToolbarItem, { children: toggleGroup })), pagination && (_jsx(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination`, className: classes.dataViewToolbarPagination, children: _jsx("div", { className: classes.dataViewToolbarPaginationWrapper, children: pagination }) })), children] }) })));
 };
 export default DataViewToolbar;

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';