@patternfly/react-data-view 6.1.0-prerelease.1 → 6.1.0

package/dist/cjs/DataView/DataView.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
-export interface DataViewProps {
+import { StackProps } from '@patternfly/react-core';
+import { DataViewSelection } from '../InternalContext';
+export declare const DataViewState: {
+    readonly empty: "empty";
+    readonly loading: "loading";
+    readonly error: "error";
+};
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** Selection context configuration */
+    selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState | string;
 }
+export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;
 export default DataView;

package/dist/cjs/DataView/DataView.js

@@ -14,12 +14,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = void 0;
+exports.DataView = exports.DataViewState = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const DataView = (_a) => {
+const InternalContext_1 = require("../InternalContext");
+exports.DataViewState = {
+    empty: 'empty',
+    loading: 'loading',
+    error: 'error'
+};
+const DataViewImplementation = (_a) => {
     var { children, ouiaId = 'DataView' } = _a, props = __rest(_a, ["children", "ouiaId"]);
-    return (react_1.default.createElement(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack}` }, props), react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+    return (react_1.default.createElement(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack` }, props), react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+};
+const DataView = (_a) => {
+    var { children, selection, activeState } = _a, props = __rest(_a, ["children", "selection", "activeState"]);
+    return (react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: selection, activeState: activeState },
+        react_1.default.createElement(DataViewImplementation, Object.assign({}, props), children)));
 };
 exports.DataView = DataView;
 exports.default = exports.DataView;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MenuProps } from '@patternfly/react-core';
+import { DataViewFilterOption } from '../DataViewFilters';
+export declare const isDataViewFilterOption: (obj: unknown) => obj is DataViewFilterOption;
+/** extends MenuProps */
+export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect' | 'onChange'> {
+    /** Unique key for the filter attribute */
+    filterId: string;
+    /** Array of current filter values */
+    value?: string[];
+    /** Filter title displayed in the toolbar */
+    title: string;
+    /** Placeholder text of the menu */
+    placeholder?: string;
+    /** Filter options displayed */
+    options: (DataViewFilterOption | string)[];
+    /** Callback for updating when item selection changes. */
+    onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+    /** Controls visibility of the filter in the toolbar */
+    showToolbarItem?: boolean;
+    /** Controls visibility of the filter icon */
+    showIcon?: boolean;
+    /** Controls visibility of the selected items badge */
+    showBadge?: boolean;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps>;
+export default DataViewCheckboxFilter;

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.js

@@ -0,0 +1,70 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewCheckboxFilter = exports.isDataViewFilterOption = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const isToolbarLabel = (label) => typeof label === 'object' && 'key' in label;
+const isDataViewFilterOption = (obj) => !!obj &&
+    typeof obj === 'object' &&
+    'label' in obj &&
+    'value' in 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"]);
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const toggleRef = react_1.default.useRef(null);
+    const menuRef = react_1.default.useRef(null);
+    const containerRef = react_1.default.useRef(null);
+    const normalizeOptions = react_1.default.useMemo(() => options.map(option => typeof option === 'string'
+        ? { label: option, value: option }
+        : option), [options]);
+    const handleToggleClick = (event) => {
+        event.stopPropagation();
+        setTimeout(() => {
+            var _a;
+            const firstElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li > button:not(:disabled)');
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }, 0);
+        setIsOpen(prev => !prev);
+    };
+    const handleSelect = (event, itemId) => {
+        const activeItem = String(itemId);
+        const isSelected = value.includes(activeItem);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, isSelected ? value.filter(item => item !== activeItem) : [activeItem, ...value]);
+    };
+    const handleClickOutside = (event) => isOpen &&
+        menuRef.current && toggleRef.current &&
+        !menuRef.current.contains(event.target) && !toggleRef.current.contains(event.target)
+        && setIsOpen(false);
+    react_1.default.useEffect(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (react_1.default.createElement(react_core_1.ToolbarFilter, { key: ouiaId, "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 },
+        react_1.default.createElement(react_core_1.Popper, { trigger: react_1.default.createElement(react_core_1.MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? react_1.default.createElement(react_icons_1.FilterIcon, null) : undefined, badge: value.length > 0 && showBadge ? react_1.default.createElement(react_core_1.Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true }, value.length) : undefined, style: { width: '200px' } }, placeholder !== null && placeholder !== void 0 ? placeholder : title), triggerRef: toggleRef, popper: react_1.default.createElement(react_core_1.Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props),
+                react_1.default.createElement(react_core_1.MenuContent, null,
+                    react_1.default.createElement(react_core_1.MenuList, null, normalizeOptions.map(option => (react_1.default.createElement(react_core_1.MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, key: option.value, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true }, option.label)))))), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen })));
+};
+exports.DataViewCheckboxFilter = DataViewCheckboxFilter;
+exports.default = exports.DataViewCheckboxFilter;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataViewCheckboxFilter_1 = __importDefault(require("./DataViewCheckboxFilter"));
+const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+describe('DataViewCheckboxFilter component', () => {
+    const defaultProps = {
+        filterId: 'test-checkbox-filter',
+        title: 'Test Checkbox Filter',
+        value: ['workspace-one'],
+        options: [
+            { label: 'Workspace one', value: 'workspace-one' },
+            { label: 'Workspace two', value: 'workspace-two' },
+            { label: 'Workspace three', value: 'workspace-three' },
+        ],
+    };
+    it('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { filters: react_1.default.createElement(DataViewCheckboxFilter_1.default, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewCheckboxFilter/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 DataViewCheckboxFilter_1 = require("./DataViewCheckboxFilter");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewCheckboxFilter_1).default; } });
+__exportStar(require("./DataViewCheckboxFilter"), exports);

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+export declare const EventTypes: {
+    readonly rowClick: "rowClick";
+};
+export type DataViewEvent = typeof EventTypes[keyof typeof EventTypes];
+type Callback = (...args: any[]) => void;
+type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
+type Trigger = (event: DataViewEvent, ...payload: any[]) => void;
+export interface DataViewEventsContextValue {
+    subscribe: Subscribe;
+    trigger: Trigger;
+}
+export declare const DataViewEventsContext: React.Context<DataViewEventsContextValue>;
+export declare const DataViewEventsProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const useDataViewEventsContext: () => DataViewEventsContextValue;
+export default DataViewEventsContext;

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.js

@@ -0,0 +1,62 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewEventsContext = exports.DataViewEventsProvider = exports.DataViewEventsContext = exports.EventTypes = void 0;
+const react_1 = __importStar(require("react"));
+exports.EventTypes = {
+    rowClick: 'rowClick'
+};
+exports.DataViewEventsContext = (0, react_1.createContext)({
+    subscribe: () => () => null,
+    trigger: () => null
+});
+const DataViewEventsProvider = ({ children }) => {
+    const [subscriptions, setSubscriptions] = (0, react_1.useState)({
+        [exports.EventTypes.rowClick]: {}
+    });
+    const subscribe = (event, callback) => {
+        const id = crypto.randomUUID();
+        // set new subscription
+        setSubscriptions(prevSubscriptions => (Object.assign(Object.assign({}, prevSubscriptions), { [event]: Object.assign(Object.assign({}, prevSubscriptions[event]), { [id]: callback }) })));
+        // return unsubscribe function
+        return () => {
+            setSubscriptions(prevSubscriptions => {
+                const updatedSubscriptions = Object.assign({}, prevSubscriptions);
+                delete updatedSubscriptions[event][id];
+                return updatedSubscriptions;
+            });
+        };
+    };
+    const trigger = (0, react_1.useCallback)((event, ...payload) => {
+        Object.values(subscriptions[event]).forEach(callback => {
+            callback(...payload);
+        });
+    }, [subscriptions]);
+    return (react_1.default.createElement(exports.DataViewEventsContext.Provider, { value: { subscribe, trigger } }, children));
+};
+exports.DataViewEventsProvider = DataViewEventsProvider;
+const useDataViewEventsContext = () => (0, react_1.useContext)(exports.DataViewEventsContext);
+exports.useDataViewEventsContext = useDataViewEventsContext;
+exports.default = exports.DataViewEventsContext;

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

@@ -0,0 +1 @@
+export {};

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.test.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataViewEventsContext_1 = require("./DataViewEventsContext");
+let id = 0;
+beforeAll(() => {
+    Object.defineProperty(global, 'crypto', {
+        value: {
+            randomUUID: jest.fn(() => `mocked-uuid-${id++}`),
+        },
+    });
+});
+describe('DataViewEventsContext', () => {
+    test('should provide context value and allow subscriptions', () => {
+        const callback = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
+            react_1.default.useEffect(() => {
+                const unsubscribe = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback);
+                return () => unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
+            react_1.default.createElement(TestComponent, null)));
+        react_2.fireEvent.click(getByText('Trigger'));
+        expect(callback).toHaveBeenCalledWith('some payload');
+    });
+    test('should handle unsubscribing correctly', () => {
+        const callback = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
+            react_1.default.useEffect(() => {
+                const unsubscribe = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback);
+                unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
+            react_1.default.createElement(TestComponent, null)));
+        react_2.fireEvent.click(getByText('Trigger'));
+        expect(callback).not.toHaveBeenCalled();
+    });
+    test('should handle multiple subscriptions and trigger events correctly', () => {
+        const callback1 = jest.fn();
+        const callback2 = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
+            react_1.default.useEffect(() => {
+                const unsubscribe1 = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback1);
+                const unsubscribe2 = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback2);
+                return () => {
+                    unsubscribe1();
+                    unsubscribe2();
+                };
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
+            react_1.default.createElement(TestComponent, null)));
+        react_2.fireEvent.click(getByText('Trigger'));
+        expect(callback1).toHaveBeenCalledWith('some payload');
+        expect(callback2).toHaveBeenCalledWith('some payload');
+    });
+});

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

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

package/dist/cjs/DataViewEventsContext/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 DataViewEventsContext_1 = require("./DataViewEventsContext");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewEventsContext_1).default; } });
+__exportStar(require("./DataViewEventsContext"), exports);

package/dist/cjs/DataViewFilters/DataViewFilters.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { ToolbarToggleGroupProps } from '@patternfly/react-core';
+export interface DataViewFilterOption {
+    /** Filter option label */
+    label: ReactNode;
+    /** Filter option value */
+    value: string;
+}
+/** extends ToolbarToggleGroupProps */
+export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarToggleGroupProps, 'toggleIcon' | 'breakpoint' | 'onChange'> {
+    /** Content rendered inside the data view */
+    children: React.ReactNode;
+    /** Optional onChange callback shared across filters */
+    onChange?: (key: string, newValues: Partial<T>) => void;
+    /** Optional values shared across filters */
+    values?: T;
+    /** Icon for the toolbar toggle group */
+    toggleIcon?: ToolbarToggleGroupProps['toggleIcon'];
+    /** Breakpoint for the toolbar toggle group */
+    breakpoint?: ToolbarToggleGroupProps['breakpoint'];
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewFilters: <T extends object>({ children, ouiaId, toggleIcon, breakpoint, onChange, values, ...props }: DataViewFiltersProps<T>) => React.JSX.Element;
+export default DataViewFilters;

package/dist/cjs/DataViewFilters/DataViewFilters.js

@@ -0,0 +1,85 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewFilters = void 0;
+const react_1 = __importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+;
+const DataViewFilters = (_a) => {
+    var { children, ouiaId = 'DataViewFilters', toggleIcon = react_1.default.createElement(react_icons_1.FilterIcon, null), breakpoint = 'xl', onChange, values } = _a, props = __rest(_a, ["children", "ouiaId", "toggleIcon", "breakpoint", "onChange", "values"]);
+    const [activeAttributeMenu, setActiveAttributeMenu] = (0, react_1.useState)('');
+    const [isAttributeMenuOpen, setIsAttributeMenuOpen] = (0, react_1.useState)(false);
+    const attributeToggleRef = (0, react_1.useRef)(null);
+    const attributeMenuRef = (0, react_1.useRef)(null);
+    const attributeContainerRef = (0, react_1.useRef)(null);
+    const childrenHash = (0, react_1.useMemo)(() => JSON.stringify(react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child)), [children]);
+    const filterItems = (0, react_1.useMemo)(() => react_1.default.Children.toArray(children)
+        .map(child => react_1.default.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined).filter((item) => !!item), [childrenHash]); // eslint-disable-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(() => {
+        filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
+    }, [filterItems]);
+    const handleClickOutside = (event) => {
+        var _a, _b;
+        return isAttributeMenuOpen &&
+            !((_a = attributeMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            !((_b = attributeToggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))
+            && setIsAttributeMenuOpen(false);
+    };
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isAttributeMenuOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+    const attributeToggle = (react_1.default.createElement(react_core_1.MenuToggle, { ref: attributeToggleRef, onClick: () => setIsAttributeMenuOpen(!isAttributeMenuOpen), isExpanded: isAttributeMenuOpen, icon: toggleIcon }, activeAttributeMenu));
+    const attributeMenu = (react_1.default.createElement(react_core_1.Menu, { ref: attributeMenuRef, onSelect: (_ev, itemId) => {
+            const selectedItem = filterItems.find(item => item.filterId === itemId);
+            selectedItem && setActiveAttributeMenu(selectedItem.title);
+            setIsAttributeMenuOpen(false);
+        } },
+        react_1.default.createElement(react_core_1.MenuContent, null,
+            react_1.default.createElement(react_core_1.MenuList, null, filterItems.map(item => (react_1.default.createElement(react_core_1.MenuItem, { key: item.filterId, itemId: item.filterId }, item.title)))))));
+    return (react_1.default.createElement(react_core_1.ToolbarToggleGroup, Object.assign({ "data-ouia-component-id": ouiaId, toggleIcon: toggleIcon, breakpoint: breakpoint }, props),
+        react_1.default.createElement(react_core_1.ToolbarGroup, { variant: "filter-group" },
+            react_1.default.createElement("div", { ref: attributeContainerRef },
+                react_1.default.createElement(react_core_1.Popper, { trigger: attributeToggle, triggerRef: attributeToggleRef, popper: attributeMenu, popperRef: attributeMenuRef, appendTo: attributeContainerRef.current || undefined, isVisible: isAttributeMenuOpen })),
+            react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
+                ? react_1.default.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))
+                : child))));
+};
+exports.DataViewFilters = DataViewFilters;
+exports.default = exports.DataViewFilters;

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

@@ -0,0 +1 @@
+export {};

package/dist/cjs/DataViewFilters/DataViewFilters.test.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataViewFilters_1 = __importDefault(require("./DataViewFilters"));
+const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+const DataViewTextFilter_1 = __importDefault(require("../DataViewTextFilter"));
+describe('DataViewFilters component', () => {
+    const mockOnChange = jest.fn();
+    it('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { filters: react_1.default.createElement(DataViewFilters_1.default, { onChange: mockOnChange, values: {} },
+                react_1.default.createElement(DataViewTextFilter_1.default, { filterId: "one", title: "One" }),
+                react_1.default.createElement(DataViewTextFilter_1.default, { filterId: "two", title: "Two" })) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewFilters/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 DataViewFilters_1 = require("./DataViewFilters");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewFilters_1).default; } });
+__exportStar(require("./DataViewFilters"), exports);

package/dist/cjs/DataViewTable/DataViewTable.d.ts

@@ -0,0 +1,49 @@
+import React, { ReactNode } from 'react';
+import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
+import { DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasicProps } from '../DataViewTableBasic';
+export type DataViewTh = ReactNode | {
+    /** Table head cell node */
+    cell: ReactNode;
+    /** Props passed to Th */
+    props?: ThProps;
+};
+export declare const isDataViewThObject: (value: DataViewTh) => value is {
+    cell: ReactNode;
+    props?: ThProps;
+};
+export interface DataViewTrObject {
+    /** Array of rows */
+    row: DataViewTd[];
+    /** Unique identifier of a row */
+    id?: string;
+    /** Props passed to Tr */
+    props?: TrProps;
+}
+export type DataViewTd = ReactNode | {
+    /** Table body cell node */
+    cell: ReactNode;
+    /** Props passed to Td */
+    props?: TdProps;
+};
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
+export declare const isDataViewTdObject: (value: DataViewTd) => value is {
+    cell: ReactNode;
+    props?: TdProps;
+};
+export declare const isDataViewTrObject: (value: DataViewTr) => value is {
+    row: DataViewTd[];
+    id?: string;
+};
+/** extends DataViewTrObject */
+export interface DataViewTrTree extends DataViewTrObject {
+    id: string;
+    children?: DataViewTrTree[];
+}
+export type DataViewTableProps = ({
+    isTreeTable: true;
+} & DataViewTableTreeProps) | ({
+    isTreeTable?: false;
+} & DataViewTableBasicProps);
+export declare const DataViewTable: React.FC<DataViewTableProps>;
+export default DataViewTable;

package/dist/cjs/DataViewTable/DataViewTable.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTable = exports.isDataViewTrObject = exports.isDataViewTdObject = exports.isDataViewThObject = void 0;
+const react_1 = __importDefault(require("react"));
+const DataViewTableTree_1 = require("../DataViewTableTree");
+const DataViewTableBasic_1 = require("../DataViewTableBasic");
+const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+exports.isDataViewThObject = isDataViewThObject;
+const isDataViewTdObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+exports.isDataViewTdObject = isDataViewTdObject;
+const isDataViewTrObject = (value) => value != null && typeof value === 'object' && 'row' in value;
+exports.isDataViewTrObject = isDataViewTrObject;
+const DataViewTable = (props) => (props.isTreeTable ? react_1.default.createElement(DataViewTableTree_1.DataViewTableTree, Object.assign({}, props)) : react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, Object.assign({}, props)));
+exports.DataViewTable = DataViewTable;
+exports.default = exports.DataViewTable;

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

@@ -0,0 +1 @@
+export {};