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

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.d.ts

@@ -10,6 +10,8 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
     value?: string[];
     /** Filter title displayed in the toolbar */
     title: string;
+    /** Label for the applied filter chip / category; defaults to title */
+    chipTitle?: string;
     /** Placeholder text of the menu */
     placeholder?: string;
     /** Filter options displayed */

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.js

@@ -24,11 +24,12 @@ const isDataViewFilterOption = (obj) => !!obj &&
     typeof obj.value === 'string';
 exports.isDataViewFilterOption = isDataViewFilterOption;
 const DataViewCheckboxFilter = (_a) => {
-    var { filterId, title, value = [], onChange, placeholder, options = [], showToolbarItem, showIcon = !placeholder, showBadge = !placeholder, ouiaId = 'DataViewCheckboxFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "placeholder", "options", "showToolbarItem", "showIcon", "showBadge", "ouiaId"]);
+    var { filterId, title, chipTitle, value = [], onChange, placeholder, options = [], showToolbarItem, showIcon = !placeholder, showBadge = !placeholder, ouiaId = 'DataViewCheckboxFilter' } = _a, props = __rest(_a, ["filterId", "title", "chipTitle", "value", "onChange", "placeholder", "options", "showToolbarItem", "showIcon", "showBadge", "ouiaId"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const toggleRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
     const normalizeOptions = (0, react_1.useMemo)(() => options.map(option => typeof option === 'string'
         ? { label: option, value: option }
         : option), [options]);
@@ -59,7 +60,7 @@ const DataViewCheckboxFilter = (_a) => {
     return ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.map(item => {
             const activeOption = normalizeOptions.find(option => option.value === item);
             return ({ key: activeOption === null || activeOption === void 0 ? void 0 : activeOption.value, node: activeOption === null || activeOption === void 0 ? void 0 : activeOption.label });
-        }), deleteLabel: (_, label) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))), categoryName: title, showToolbarItem: showToolbarItem, children: (0, jsx_runtime_1.jsx)(react_core_1.Popper, { trigger: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) : undefined, badge: value.length > 0 && showBadge ? (0, jsx_runtime_1.jsx)(react_core_1.Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true, children: value.length }) : undefined, style: { width: '200px' }, children: placeholder !== null && placeholder !== void 0 ? placeholder : title }), triggerRef: toggleRef, popper: (0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, { children: normalizeOptions.map(option => ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true, children: option.label }, option.value))) }) }) })), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen }) }, ouiaId));
+        }), deleteLabel: (_, label) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))), categoryName: categoryName, showToolbarItem: showToolbarItem, children: (0, jsx_runtime_1.jsx)(react_core_1.Popper, { trigger: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) : undefined, badge: value.length > 0 && showBadge ? (0, jsx_runtime_1.jsx)(react_core_1.Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true, children: value.length }) : undefined, style: { width: '200px' }, children: placeholder !== null && placeholder !== void 0 ? placeholder : title }), triggerRef: toggleRef, popper: (0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, { children: normalizeOptions.map(option => ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true, children: option.label }, option.value))) }) }) })), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen }) }, ouiaId));
 };
 exports.DataViewCheckboxFilter = DataViewCheckboxFilter;
 exports.default = exports.DataViewCheckboxFilter;

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

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

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.test.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
 const DataViewCheckboxFilter_1 = __importDefault(require("./DataViewCheckboxFilter"));
 const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+require("@testing-library/jest-dom");
 describe('DataViewCheckboxFilter component', () => {
     const defaultProps = {
         filterId: 'test-checkbox-filter',
@@ -15,11 +16,16 @@ describe('DataViewCheckboxFilter component', () => {
         options: [
             { label: 'Workspace one', value: 'workspace-one' },
             { label: 'Workspace two', value: 'workspace-two' },
-            { label: 'Workspace three', value: 'workspace-three' },
-        ],
+            { label: 'Workspace three', value: 'workspace-three' }
+        ]
     };
     it('should render correctly', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewCheckboxFilter_1.default, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewCheckboxFilter_1.default, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(react_1.screen.getByText('Short name')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
+    });
 });

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.d.ts

@@ -8,6 +8,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
     value?: string;
     /** Filter title displayed in the toolbar */
     title: string;
+    /** Label for the applied filter chip / category; defaults to title */
+    chipTitle?: string;
     /** Callback for when the input value changes */
     onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
     /** Controls visibility of the filter in the toolbar */

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.js

@@ -16,7 +16,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const DataViewTextFilter = (_a) => {
-    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"]);
+    var { filterId, title, chipTitle, 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", "chipTitle", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
     (0, react_1.useEffect)(() => {
         if (!enableShortcut) {
             return;
@@ -44,7 +45,7 @@ const DataViewTextFilter = (_a) => {
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [showToolbarItem, filterId, enableShortcut]);
-    return ((0, jsx_runtime_1.jsx)(react_core_1.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: (0, jsx_runtime_1.jsx)(react_core_1.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));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.length > 0 ? [{ key: categoryName, node: value }] : [], deleteLabel: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: categoryName, showToolbarItem: showToolbarItem, children: (0, jsx_runtime_1.jsx)(react_core_1.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));
 };
 exports.DataViewTextFilter = DataViewTextFilter;
 exports.default = exports.DataViewTextFilter;

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.test.js

@@ -20,6 +20,11 @@ describe('DataViewTextFilter component', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(react_1.screen.getByText('Short name')).toBeInTheDocument();
+        expect(react_1.screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
+    });
     it('should focus the search input when "/" key is pressed and filter is visible', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, Object.assign({}, defaultProps, { showToolbarItem: true })) }));
         const input = document.getElementById('test-filter');

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

@@ -7,6 +7,8 @@ export interface DataViewTreeFilterProps {
     value?: string[];
     /** Filter title displayed in the toolbar */
     title: string;
+    /** Label for the applied filter chip / category; defaults to title */
+    chipTitle?: string;
     /** Callback for when the selection changes */
     onChange?: (event?: React.MouseEvent, values?: string[]) => void;
     /** Controls visibility of the filter in the toolbar */

package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.js

@@ -47,7 +47,8 @@ const setPreSelectedItems = (items, selectedIds) => items.map(item => {
 });
 // 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 DataViewTreeFilter = ({ filterId, title, chipTitle, value = [], onChange, showToolbarItem, ouiaId = 'DataViewTreeFilter', items, defaultExpanded = false, onSelect, defaultSelected = [] }) => {
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
     const classes = useStyles();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [treeData, setTreeData] = (0, react_1.useState)(items || []);
@@ -223,7 +224,7 @@ const DataViewTreeFilter = ({ filterId, title, value = [], onChange, showToolbar
             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));
+        }, deleteLabelGroup: uncheckAllItems, categoryName: categoryName, showToolbarItem: showToolbarItem, children: dropdown }, filterId));
 };
 exports.DataViewTreeFilter = DataViewTreeFilter;
 exports.default = exports.DataViewTreeFilter;

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

@@ -96,6 +96,11 @@ describe('DataViewTreeFilter component', () => {
         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();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTreeFilter_1.default, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(react_1.screen.getByText('Short name')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Test Tree Filter')).toBeInTheDocument();
+    });
     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 }) }));

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.d.ts

@@ -10,6 +10,8 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
     value?: string[];
     /** Filter title displayed in the toolbar */
     title: string;
+    /** Label for the applied filter chip / category; defaults to title */
+    chipTitle?: string;
     /** Placeholder text of the menu */
     placeholder?: string;
     /** Filter options displayed */

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.js

@@ -20,11 +20,12 @@ export const isDataViewFilterOption = (obj) => !!obj &&
     'value' in obj &&
     typeof obj.value === 'string';
 export const DataViewCheckboxFilter = (_a) => {
-    var { filterId, title, value = [], onChange, placeholder, options = [], showToolbarItem, showIcon = !placeholder, showBadge = !placeholder, ouiaId = 'DataViewCheckboxFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "placeholder", "options", "showToolbarItem", "showIcon", "showBadge", "ouiaId"]);
+    var { filterId, title, chipTitle, value = [], onChange, placeholder, options = [], showToolbarItem, showIcon = !placeholder, showBadge = !placeholder, ouiaId = 'DataViewCheckboxFilter' } = _a, props = __rest(_a, ["filterId", "title", "chipTitle", "value", "onChange", "placeholder", "options", "showToolbarItem", "showIcon", "showBadge", "ouiaId"]);
     const [isOpen, setIsOpen] = useState(false);
     const toggleRef = useRef(null);
     const menuRef = useRef(null);
     const containerRef = useRef(null);
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
     const normalizeOptions = useMemo(() => options.map(option => typeof option === 'string'
         ? { label: option, value: option }
         : option), [options]);
@@ -55,6 +56,6 @@ export const DataViewCheckboxFilter = (_a) => {
     return (_jsx(ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.map(item => {
             const activeOption = normalizeOptions.find(option => option.value === item);
             return ({ key: activeOption === null || activeOption === void 0 ? void 0 : activeOption.value, node: activeOption === null || activeOption === void 0 ? void 0 : activeOption.label });
-        }), deleteLabel: (_, label) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))), categoryName: title, showToolbarItem: showToolbarItem, children: _jsx(Popper, { trigger: _jsx(MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? _jsx(FilterIcon, {}) : undefined, badge: value.length > 0 && showBadge ? _jsx(Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true, children: value.length }) : undefined, style: { width: '200px' }, children: placeholder !== null && placeholder !== void 0 ? placeholder : title }), triggerRef: toggleRef, popper: _jsx(Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props, { children: _jsx(MenuContent, { children: _jsx(MenuList, { children: normalizeOptions.map(option => (_jsx(MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true, children: option.label }, option.value))) }) }) })), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen }) }, ouiaId));
+        }), deleteLabel: (_, label) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))), categoryName: categoryName, showToolbarItem: showToolbarItem, children: _jsx(Popper, { trigger: _jsx(MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? _jsx(FilterIcon, {}) : undefined, badge: value.length > 0 && showBadge ? _jsx(Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true, children: value.length }) : undefined, style: { width: '200px' }, children: placeholder !== null && placeholder !== void 0 ? placeholder : title }), triggerRef: toggleRef, popper: _jsx(Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props, { children: _jsx(MenuContent, { children: _jsx(MenuList, { children: normalizeOptions.map(option => (_jsx(MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true, children: option.label }, option.value))) }) }) })), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen }) }, ouiaId));
 };
 export default DataViewCheckboxFilter;

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

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

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.test.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import DataViewCheckboxFilter from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';
+import '@testing-library/jest-dom';
 describe('DataViewCheckboxFilter component', () => {
     const defaultProps = {
         filterId: 'test-checkbox-filter',
@@ -10,11 +11,16 @@ describe('DataViewCheckboxFilter component', () => {
         options: [
             { label: 'Workspace one', value: 'workspace-one' },
             { label: 'Workspace two', value: 'workspace-two' },
-            { label: 'Workspace three', value: 'workspace-three' },
-        ],
+            { label: 'Workspace three', value: 'workspace-three' }
+        ]
     };
     it('should render correctly', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewCheckboxFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewCheckboxFilter, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(screen.getByText('Short name')).toBeInTheDocument();
+        expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
+    });
 });

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

@@ -8,6 +8,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
     value?: string;
     /** Filter title displayed in the toolbar */
     title: string;
+    /** Label for the applied filter chip / category; defaults to title */
+    chipTitle?: string;
     /** Callback for when the input value changes */
     onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
     /** Controls visibility of the filter in the toolbar */

package/dist/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -13,7 +13,8 @@ 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', enableShortcut = true } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    var { filterId, title, chipTitle, 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", "chipTitle", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
     useEffect(() => {
         if (!enableShortcut) {
             return;
@@ -41,6 +42,6 @@ export const DataViewTextFilter = (_a) => {
             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));
+    return (_jsx(ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.length > 0 ? [{ key: categoryName, node: value }] : [], deleteLabel: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: categoryName, 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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DataViewTextFilter from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
@@ -15,6 +15,11 @@ describe('DataViewTextFilter component', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(screen.getByText('Short name')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
+    });
     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');

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

@@ -7,6 +7,8 @@ export interface DataViewTreeFilterProps {
     value?: string[];
     /** Filter title displayed in the toolbar */
     title: string;
+    /** Label for the applied filter chip / category; defaults to title */
+    chipTitle?: string;
     /** Callback for when the selection changes */
     onChange?: (event?: React.MouseEvent, values?: string[]) => void;
     /** Controls visibility of the filter in the toolbar */

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.js

@@ -44,7 +44,8 @@ const setPreSelectedItems = (items, selectedIds) => items.map(item => {
 });
 // 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 = [] }) => {
+export const DataViewTreeFilter = ({ filterId, title, chipTitle, value = [], onChange, showToolbarItem, ouiaId = 'DataViewTreeFilter', items, defaultExpanded = false, onSelect, defaultSelected = [] }) => {
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
     const classes = useStyles();
     const [isOpen, setIsOpen] = useState(false);
     const [treeData, setTreeData] = useState(items || []);
@@ -220,6 +221,6 @@ export const DataViewTreeFilter = ({ filterId, title, value = [], onChange, show
             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));
+        }, deleteLabelGroup: uncheckAllItems, categoryName: categoryName, showToolbarItem: showToolbarItem, children: dropdown }, filterId));
 };
 export default DataViewTreeFilter;

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

@@ -91,6 +91,11 @@ describe('DataViewTreeFilter component', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(screen.getByText('Short name')).toBeInTheDocument();
+        expect(screen.getByText('Test Tree Filter')).toBeInTheDocument();
+    });
     describe('defaultExpanded', () => {
         it('should have expanded items by default', () => __awaiter(void 0, void 0, void 0, function* () {
             render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.5.0-prerelease.1",
+  "version": "6.5.0-prerelease.2",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -78,7 +78,7 @@ const MyTable: React.FunctionComponent = () => {
         }
         filters={ 
           <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
-            <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
+            <DataViewTextFilter filterId="name" title='Name' chipTitle='Repo' placeholder='Filter by name' />
             <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
             <DataViewCheckboxFilter filterId="workspace" title='Workspace' placeholder='Filter by workspace' options={filterOptions} />
           </DataViewFilters>

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -1,23 +1,32 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';
+import '@testing-library/jest-dom';
 
 describe('DataViewCheckboxFilter component', () => {
   const defaultProps: DataViewCheckboxFilterProps = {
     filterId: 'test-checkbox-filter',
     title: 'Test Checkbox Filter',
-    value: [ 'workspace-one' ],
+    value: ['workspace-one'],
     options: [
       { label: 'Workspace one', value: 'workspace-one' },
       { label: 'Workspace two', value: 'workspace-two' },
-      { label: 'Workspace three', value: 'workspace-three' },
-    ],
+      { label: 'Workspace three', value: 'workspace-three' }
+    ]
   };
 
   it('should render correctly', () => {
-    const { container } = render(
-      <DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
-    );
+    const { container } = render(<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />);
     expect(container).toMatchSnapshot();
   });
+
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(
+      <DataViewToolbar
+        filters={<DataViewCheckboxFilter {...defaultProps} chipTitle="Short name" />}
+      />
+    );
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
+  });
 });

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -32,6 +32,8 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
   value?: string[];
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Placeholder text of the menu */
   placeholder?: string;
   /** Filter options displayed */
@@ -51,6 +53,7 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
 export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = [],
   onChange,
   placeholder,
@@ -65,6 +68,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   const toggleRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const categoryName = chipTitle ?? title;
 
   const normalizeOptions = useMemo(
     () =>
@@ -120,7 +124,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
       deleteLabel={(_, label) =>
         onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
       }
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}
     >
       <Popper

package/src/DataViewTextFilter/DataViewTextFilter.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
@@ -22,6 +22,16 @@ describe('DataViewTextFilter component', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(<DataViewToolbar
+      filters={
+        <DataViewTextFilter {...defaultProps} chipTitle="Short name" />
+      }
+    />);
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
+  });
+
   it('should focus the search input when "/" key is pressed and filter is visible', () => {
     render(<DataViewToolbar
       filters={ 

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -9,6 +9,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   value?: string;
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Callback for when the input value changes */
   onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
   /** Controls visibility of the filter in the toolbar */
@@ -24,6 +26,7 @@ export interface DataViewTextFilterProps extends SearchInputProps {
 export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = '',
   onChange,
   onClear = () => onChange?.(undefined, ''),
@@ -33,6 +36,8 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   enableShortcut = true,
   ...props
 }: DataViewTextFilterProps) => {
+  const categoryName = chipTitle ?? title;
+
   useEffect(() => {
     if (!enableShortcut) {
       return;
@@ -68,9 +73,9 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
     <ToolbarFilter
       key={ouiaId}
       data-ouia-component-id={ouiaId}
-      labels={value.length > 0 ? [ { key: title, node: value } ] : []}
+      labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []}
       deleteLabel={() => onChange?.(undefined, '')}
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}
     >
       <SearchInput

package/src/DataViewTreeFilter/DataViewTreeFilter.test.tsx

@@ -87,6 +87,17 @@ describe('DataViewTreeFilter component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(
+      <DataViewToolbar
+        filters={<DataViewTreeFilter {...defaultProps} chipTitle="Short name" />}
+      />
+    );
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByText('Test Tree Filter')).toBeInTheDocument();
+  });
+
   describe('defaultExpanded', () => {
     it('should have expanded items by default', async () => {
       render(

package/src/DataViewTreeFilter/DataViewTreeFilter.tsx

@@ -89,6 +89,8 @@ export interface DataViewTreeFilterProps {
   value?: string[];
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Callback for when the selection changes */
   onChange?: (event?: React.MouseEvent, values?: string[]) => void;
   /** Controls visibility of the filter in the toolbar */
@@ -108,6 +110,7 @@ export interface DataViewTreeFilterProps {
 export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = [],
   onChange,
   showToolbarItem,
@@ -117,6 +120,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
   onSelect,
   defaultSelected = []
 }: DataViewTreeFilterProps) => {
+  const categoryName = chipTitle ?? title;
   const classes = useStyles();
   const [isOpen, setIsOpen] = useState(false);
   const [treeData, setTreeData] = useState<TreeViewDataItem[]>(items || []);
@@ -351,7 +355,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
         onFilterSelectorClear(labelKey);
       }}
       deleteLabelGroup={uncheckAllItems}
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}>
       {dropdown}
     </ToolbarFilter>