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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { StackProps } from '@patternfly/react-core';
 import { DataViewSelection } from '../InternalContext';
 export declare const DataViewState: {
@@ -19,5 +19,5 @@ export interface DataViewProps extends StackProps {
     activeState?: DataViewState | string;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
-export declare const DataView: React.FC<DataViewProps>;
+export declare const DataView: FC<DataViewProps>;
 export default DataView;

package/dist/cjs/DataView/DataView.js

@@ -10,12 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataView = exports.DataViewState = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const InternalContext_1 = require("../InternalContext");
 exports.DataViewState = {
@@ -25,12 +23,11 @@ exports.DataViewState = {
 };
 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 ((0, jsx_runtime_1.jsx)(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack` }, props, { children: react_1.Children.map(children, (child, index) => ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}`, children: 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)));
+    return ((0, jsx_runtime_1.jsx)(InternalContext_1.InternalContextProvider, { selection: selection, activeState: activeState, children: (0, jsx_runtime_1.jsx)(DataViewImplementation, Object.assign({}, props, { children: children })) }));
 };
 exports.DataView = DataView;
 exports.default = exports.DataView;

package/dist/cjs/DataView/DataView.test.js

@@ -3,8 +3,8 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 const DataView_1 = __importDefault(require("./DataView"));
 const layoutItemStyling = {
     width: '100%',
@@ -14,9 +14,6 @@ const layoutItemStyling = {
 };
 describe('DataView component', () => {
     test('should render correctly', () => {
-        expect((0, react_2.render)(react_1.default.createElement(DataView_1.default, null,
-            react_1.default.createElement("div", { style: layoutItemStyling }, "Header"),
-            react_1.default.createElement("div", { style: layoutItemStyling }, "Data representation"),
-            react_1.default.createElement("div", { style: layoutItemStyling }, "Footer")))).toMatchSnapshot();
+        expect((0, react_1.render)((0, jsx_runtime_1.jsxs)(DataView_1.default, { children: [(0, jsx_runtime_1.jsx)("div", { style: layoutItemStyling, children: "Header" }), (0, jsx_runtime_1.jsx)("div", { style: layoutItemStyling, children: "Data representation" }), (0, jsx_runtime_1.jsx)("div", { style: layoutItemStyling, children: "Footer" })] }))).toMatchSnapshot();
     });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { MenuProps } from '@patternfly/react-core';
 import { DataViewFilterOption } from '../DataViewFilters';
 export declare const isDataViewFilterOption: (obj: unknown) => obj is DataViewFilterOption;
@@ -25,5 +25,5 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
     /** Custom OUIA ID */
     ouiaId?: string;
 }
-export declare const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps>;
+export declare const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps>;
 export default DataViewCheckboxFilter;

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.js

@@ -10,12 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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;
@@ -27,11 +25,11 @@ const isDataViewFilterOption = (obj) => !!obj &&
 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'
+    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 normalizeOptions = (0, react_1.useMemo)(() => options.map(option => typeof option === 'string'
         ? { label: option, value: option }
         : option), [options]);
     const handleToggleClick = (event) => {
@@ -52,19 +50,16 @@ const DataViewCheckboxFilter = (_a) => {
         menuRef.current && toggleRef.current &&
         !menuRef.current.contains(event.target) && !toggleRef.current.contains(event.target)
         && setIsOpen(false);
-    react_1.default.useEffect(() => {
+    (0, react_1.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 => {
+    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 },
-        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 })));
+        }), 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));
 };
 exports.DataViewCheckboxFilter = DataViewCheckboxFilter;
 exports.default = exports.DataViewCheckboxFilter;

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

@@ -3,8 +3,8 @@ 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 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"));
 describe('DataViewCheckboxFilter component', () => {
@@ -19,7 +19,7 @@ describe('DataViewCheckboxFilter component', () => {
         ],
     };
     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)) }));
+        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();
     });
 });

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

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 export declare const EventTypes: {
     readonly rowClick: "rowClick";
 };
@@ -10,7 +10,7 @@ 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 DataViewEventsContext: import("react").Context<DataViewEventsContextValue>;
+export declare const DataViewEventsProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const useDataViewEventsContext: () => DataViewEventsContextValue;
 export default DataViewEventsContext;

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.js

@@ -1,30 +1,8 @@
 "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"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 exports.EventTypes = {
     rowClick: 'rowClick'
 };
@@ -54,7 +32,7 @@ const DataViewEventsProvider = ({ children }) => {
             callback(...payload);
         });
     }, [subscriptions]);
-    return (react_1.default.createElement(exports.DataViewEventsContext.Provider, { value: { subscribe, trigger } }, children));
+    return ((0, jsx_runtime_1.jsx)(exports.DataViewEventsContext.Provider, { value: { subscribe, trigger }, children: children }));
 };
 exports.DataViewEventsProvider = DataViewEventsProvider;
 const useDataViewEventsContext = () => (0, react_1.useContext)(exports.DataViewEventsContext);

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

@@ -1,9 +1,7 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_2 = require("@testing-library/react");
 const DataViewEventsContext_1 = require("./DataViewEventsContext");
 let id = 0;
@@ -19,15 +17,14 @@ describe('DataViewEventsContext', () => {
         const callback = jest.fn();
         const TestComponent = () => {
             const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
-            react_1.default.useEffect(() => {
+            (0, react_1.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"));
+            return ((0, jsx_runtime_1.jsx)("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload'), children: "Trigger" }));
         };
-        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
-            react_1.default.createElement(TestComponent, null)));
+        const { getByText } = (0, react_2.render)((0, jsx_runtime_1.jsx)(DataViewEventsContext_1.DataViewEventsProvider, { children: (0, jsx_runtime_1.jsx)(TestComponent, {}) }));
         react_2.fireEvent.click(getByText('Trigger'));
         expect(callback).toHaveBeenCalledWith('some payload');
     });
@@ -35,15 +32,14 @@ describe('DataViewEventsContext', () => {
         const callback = jest.fn();
         const TestComponent = () => {
             const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
-            react_1.default.useEffect(() => {
+            (0, react_1.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"));
+            return ((0, jsx_runtime_1.jsx)("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload'), children: "Trigger" }));
         };
-        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
-            react_1.default.createElement(TestComponent, null)));
+        const { getByText } = (0, react_2.render)((0, jsx_runtime_1.jsx)(DataViewEventsContext_1.DataViewEventsProvider, { children: (0, jsx_runtime_1.jsx)(TestComponent, {}) }));
         react_2.fireEvent.click(getByText('Trigger'));
         expect(callback).not.toHaveBeenCalled();
     });
@@ -52,7 +48,7 @@ describe('DataViewEventsContext', () => {
         const callback2 = jest.fn();
         const TestComponent = () => {
             const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
-            react_1.default.useEffect(() => {
+            (0, react_1.useEffect)(() => {
                 const unsubscribe1 = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback1);
                 const unsubscribe2 = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback2);
                 return () => {
@@ -61,10 +57,9 @@ describe('DataViewEventsContext', () => {
                 };
                 // eslint-disable-next-line react-hooks/exhaustive-deps
             }, []);
-            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+            return ((0, jsx_runtime_1.jsx)("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload'), children: "Trigger" }));
         };
-        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
-            react_1.default.createElement(TestComponent, null)));
+        const { getByText } = (0, react_2.render)((0, jsx_runtime_1.jsx)(DataViewEventsContext_1.DataViewEventsProvider, { children: (0, jsx_runtime_1.jsx)(TestComponent, {}) }));
         react_2.fireEvent.click(getByText('Trigger'));
         expect(callback1).toHaveBeenCalledWith('some payload');
         expect(callback2).toHaveBeenCalledWith('some payload');

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ToolbarToggleGroupProps } from '@patternfly/react-core';
 export interface DataViewFilterOption {
     /** Filter option label */
@@ -21,5 +21,5 @@ export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarTogg
     /** 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 declare const DataViewFilters: <T extends object>({ children, ouiaId, toggleIcon, breakpoint, onChange, values, ...props }: DataViewFiltersProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default DataViewFilters;

package/dist/cjs/DataViewFilters/DataViewFilters.js

@@ -1,27 +1,4 @@
 "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)
@@ -35,20 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewFilters = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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"]);
+    var { children, ouiaId = 'DataViewFilters', toggleIcon = (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), 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
+    const childrenHash = (0, react_1.useMemo)(() => JSON.stringify(react_1.Children.map(children, (child) => (0, react_1.isValidElement)(child) ? { type: child.type, key: child.key, props: child.props } : child)), [children]);
+    const filterItems = (0, react_1.useMemo)(() => react_1.Children.toArray(children)
+        .map(child => (0, react_1.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]);
@@ -65,21 +43,15 @@ const DataViewFilters = (_a) => {
             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 attributeToggle = ((0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { ref: attributeToggleRef, onClick: () => setIsAttributeMenuOpen(!isAttributeMenuOpen), isExpanded: isAttributeMenuOpen, icon: toggleIcon, children: activeAttributeMenu }));
+    const attributeMenu = ((0, jsx_runtime_1.jsx)(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))));
+        }, children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, { children: filterItems.map(item => ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { itemId: item.filterId, children: item.title }, item.filterId))) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, Object.assign({ "data-ouia-component-id": ouiaId, toggleIcon: toggleIcon, breakpoint: breakpoint }, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, { variant: "filter-group", children: [(0, jsx_runtime_1.jsx)("div", { ref: attributeContainerRef, children: (0, jsx_runtime_1.jsx)(react_core_1.Popper, { trigger: attributeToggle, triggerRef: attributeToggleRef, popper: attributeMenu, popperRef: attributeMenuRef, appendTo: attributeContainerRef.current || undefined, isVisible: isAttributeMenuOpen }) }), react_1.Children.map(children, (child) => (0, react_1.isValidElement)(child)
+                    ? (0, react_1.cloneElement)(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(child.props.filterId, { [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.js

@@ -3,17 +3,23 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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" })) }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsxs)(DataViewFilters_1.default, { onChange: mockOnChange, values: {}, children: [(0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, { filterId: "one", title: "One" }), (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, { filterId: "two", title: "Two" })] }) }));
         expect(container).toMatchSnapshot();
     });
+    it('should call onChange with correct key and value when filter changes', () => {
+        const mockOnChange = jest.fn();
+        const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsxs)(DataViewFilters_1.default, { onChange: mockOnChange, values: {}, children: [(0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, { filterId: "one", title: "One" }), (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, { filterId: "two", title: "Two" })] }) }));
+        const input = getByLabelText('One filter');
+        input.focus();
+        react_1.fireEvent.input(input, { target: { value: 'abc' } });
+        expect(mockOnChange).toHaveBeenCalledWith('one', { one: 'abc' });
+    });
 });

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
 import { DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasicProps } from '../DataViewTableBasic';
@@ -45,5 +45,5 @@ export type DataViewTableProps = ({
 } & DataViewTableTreeProps) | ({
     isTreeTable?: false;
 } & DataViewTableBasicProps);
-export declare const DataViewTable: React.FC<DataViewTableProps>;
+export declare const DataViewTable: FC<DataViewTableProps>;
 export default DataViewTable;

package/dist/cjs/DataViewTable/DataViewTable.js

@@ -1,10 +1,7 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const DataViewTableTree_1 = require("../DataViewTableTree");
 const DataViewTableBasic_1 = require("../DataViewTableBasic");
 const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
@@ -13,6 +10,6 @@ const isDataViewTdObject = (value) => value != null && typeof value === 'object'
 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)));
+const DataViewTable = (props) => (props.isTreeTable ? (0, jsx_runtime_1.jsx)(DataViewTableTree_1.DataViewTableTree, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(DataViewTableBasic_1.DataViewTableBasic, Object.assign({}, props)));
 exports.DataViewTable = DataViewTable;
 exports.default = exports.DataViewTable;

package/dist/cjs/DataViewTable/DataViewTable.test.js

@@ -1,10 +1,7 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 const DataViewTable_1 = require("./DataViewTable");
 const repositories = [
     { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
@@ -47,11 +44,11 @@ const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Las
 const ouiaId = 'TableExample';
 describe('DataViewTable component', () => {
     test('should render a basic table correctly', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewTable_1.DataViewTable, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewTable_1.DataViewTable, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
         expect(container).toMatchSnapshot();
     });
     test('should render a tree table correctly', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: treeRows }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: treeRows }));
         expect(container).toMatchSnapshot();
     });
 });

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
@@ -15,5 +15,5 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     /** Custom OUIA ID */
     ouiaId?: string;
 }
-export declare const DataViewTableBasic: React.FC<DataViewTableBasicProps>;
+export declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -1,27 +1,4 @@
 "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)
@@ -35,7 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewTableBasic = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_table_1 = require("@patternfly/react-table");
 const InternalContext_1 = require("../InternalContext");
 const DataViewTableHead_1 = require("../DataViewTableHead");
@@ -48,24 +26,20 @@ const DataViewTableBasic = (_a) => {
     const activeBodyState = (0, react_1.useMemo)(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
     const renderedRows = (0, react_1.useMemo)(() => rows.map((row, rowIndex) => {
         const rowIsObject = (0, DataViewTable_1.isDataViewTrObject)(row);
-        return (react_1.default.createElement(react_table_1.Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props))),
-            isSelectable && (react_1.default.createElement(react_table_1.Td, { key: `select-${rowIndex}`, select: {
-                    rowIndex,
-                    onSelect: (_event, isSelecting) => {
-                        onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
-                    },
-                    isSelected: (isSelected === null || isSelected === void 0 ? void 0 : isSelected(row)) || false,
-                    isDisabled: (isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(row)) || false,
-                } })),
-            (rowIsObject ? row.row : row).map((cell, colIndex) => {
-                var _a;
-                const cellIsObject = (0, DataViewTable_1.isDataViewTdObject)(cell);
-                return (react_1.default.createElement(react_table_1.Td, Object.assign({ key: colIndex }, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}` }), cellIsObject ? cell.cell : cell));
-            })));
+        return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { children: [isSelectable && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
+                        rowIndex,
+                        onSelect: (_event, isSelecting) => {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
+                        },
+                        isSelected: (isSelected === null || isSelected === void 0 ? void 0 : isSelected(row)) || false,
+                        isDisabled: (isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(row)) || false,
+                    } }, `select-${rowIndex}`)), (rowIsObject ? row.row : row).map((cell, colIndex) => {
+                    var _a;
+                    const cellIsObject = (0, DataViewTable_1.isDataViewTdObject)(cell);
+                    return ((0, jsx_runtime_1.jsx)(react_table_1.Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
+                })] }), rowIndex));
     }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId]);
-    return (react_1.default.createElement(react_table_1.Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
-        activeHeadState || react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId }),
-        activeBodyState || react_1.default.createElement(react_table_1.Tbody, null, renderedRows)));
+    return ((0, jsx_runtime_1.jsxs)(react_table_1.Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props, { children: [activeHeadState || (0, jsx_runtime_1.jsx)(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId }), activeBodyState || (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: renderedRows })] })));
 };
 exports.DataViewTableBasic = DataViewTableBasic;
 exports.default = exports.DataViewTableBasic;