@patternfly/react-data-view 6.2.0 → 6.3.0

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, useState, useRef, useMemo, useEffect, MouseEvent as ReactMouseEvent } from 'react';
 import {
   Badge,
   Menu,
@@ -48,7 +48,7 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
   ouiaId?: string;
 }
 
-export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
+export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   filterId,
   title,
   value = [],
@@ -61,12 +61,12 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
   ouiaId = 'DataViewCheckboxFilter',
   ...props
 }: DataViewCheckboxFilterProps) => {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [ isOpen, setIsOpen ] = useState(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const normalizeOptions = React.useMemo(
+  const normalizeOptions = useMemo(
     () =>
       options.map(option =>
         typeof option === 'string'
@@ -76,7 +76,7 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
     [ options ]
   );
 
-  const handleToggleClick = (event: React.MouseEvent) => {
+  const handleToggleClick = (event: ReactMouseEvent) => {
     event.stopPropagation();
     setTimeout(() => {
       const firstElement = menuRef.current?.querySelector('li > button:not(:disabled)') as HTMLElement;
@@ -85,7 +85,7 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
     setIsOpen(prev => !prev);
   };
 
-  const handleSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+  const handleSelect = (event?: ReactMouseEvent, itemId?: string | number) => {
     const activeItem = String(itemId);
     const isSelected = value.includes(activeItem);
 
@@ -102,7 +102,7 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
     && setIsOpen(false);
 
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('click', handleClickOutside);
     return () => {
       window.removeEventListener('click', handleClickOutside);

package/src/DataViewEventsContext/DataViewEventsContext.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect } from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
 
@@ -19,7 +19,7 @@ describe('DataViewEventsContext', () => {
     const TestComponent = () => {
       const { subscribe, trigger } = useDataViewEventsContext();
 
-      React.useEffect(() => {
+      useEffect(() => {
         const unsubscribe = subscribe(EventTypes.rowClick, callback);
         return () => unsubscribe();
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -46,7 +46,7 @@ describe('DataViewEventsContext', () => {
     const TestComponent = () => {
       const { subscribe, trigger } = useDataViewEventsContext();
 
-      React.useEffect(() => {
+      useEffect(() => {
         const unsubscribe = subscribe(EventTypes.rowClick, callback);
         unsubscribe();
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -75,7 +75,7 @@ describe('DataViewEventsContext', () => {
     const TestComponent = () => {
       const { subscribe, trigger } = useDataViewEventsContext();
 
-      React.useEffect(() => {
+      useEffect(() => {
         const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
         const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
         

package/src/DataViewEventsContext/DataViewEventsContext.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   PropsWithChildren,
   createContext,
   useCallback,

package/src/DataViewFilters/DataViewFilters.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import DataViewFilters from './DataViewFilters';
 import DataViewToolbar from '../DataViewToolbar';
 import DataViewTextFilter from '../DataViewTextFilter';
@@ -8,14 +7,34 @@ describe('DataViewFilters component', () => {
   const mockOnChange = jest.fn();
 
   it('should render correctly', () => {
-    const { container } = render(<DataViewToolbar
-      filters={
-        <DataViewFilters onChange={mockOnChange} values={{}}>
-          <DataViewTextFilter filterId="one" title="One" />
-          <DataViewTextFilter filterId="two" title="Two" />
-        </DataViewFilters>
-      }
-    />);
+    const { container } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{}}>
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
     expect(container).toMatchSnapshot();
   });
+
+  it('should call onChange with correct key and value when filter changes', () => {
+    const mockOnChange = jest.fn();
+    const { getByLabelText } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{}}>
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+    const input = getByLabelText('One filter');
+    input.focus();
+    fireEvent.input(input, { target: { value: 'abc' } });
+    expect(mockOnChange).toHaveBeenCalledWith('one', { one: 'abc' });
+  });
 });

package/src/DataViewFilters/DataViewFilters.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
+import { Children, isValidElement, cloneElement, useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
 import {
   Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
 } from '@patternfly/react-core';
@@ -50,14 +50,14 @@ export const DataViewFilters = <T extends object>({
   const attributeContainerRef = useRef<HTMLDivElement>(null);
 
   const childrenHash = useMemo(() => JSON.stringify(
-    React.Children.map(children, (child) =>
-      React.isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child
+    Children.map(children, (child) =>
+      isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child
     )
   ), [ children ]);
 
-  const filterItems: DataViewFilterIdentifiers[] = useMemo(() => React.Children.toArray(children)
+  const filterItems: DataViewFilterIdentifiers[] = useMemo(() => Children.toArray(children)
     .map(child =>
-      React.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined
+      isValidElement(child) ? { filterId: String((child.props as any).filterId), title: String((child.props as any).title) } : undefined
     ).filter((item): item is DataViewFilterIdentifiers => !!item), [ childrenHash ]);  // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -122,17 +122,17 @@ export const DataViewFilters = <T extends object>({
             isVisible={isAttributeMenuOpen}
           />
         </div>
-        {React.Children.map(children, (child) =>
-          React.isValidElement(child)
-            ? React.cloneElement(child as ReactElement<{
+        {Children.map(children, (child) =>
+          isValidElement(child)
+            ? cloneElement(child as ReactElement<{
               showToolbarItem: boolean;
               onChange: (_e: unknown, values: unknown) => void;
               value: unknown;
             }>, {
-              showToolbarItem: activeAttributeMenu === child.props.title,
-              onChange: (event, value) => onChange?.(event, { [child.props.filterId]: value } as Partial<T>),
-              value: values?.[child.props.filterId],
-              ...child.props
+              showToolbarItem: activeAttributeMenu === (child.props as any).title,
+              onChange: (event, value) => onChange?.((child.props as any).filterId, { [(child.props as any).filterId]: value } as Partial<T>),
+              value: values?.[(child.props as any).filterId],
+              ...(child.props as any)
             })
             : child
         )}

package/src/DataViewTable/DataViewTable.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { DataViewTable, DataViewTrTree } from './DataViewTable';
 

package/src/DataViewTable/DataViewTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import {
   TdProps,
   ThProps,
@@ -50,7 +50,7 @@ export type DataViewTableProps =
       isTreeTable?: false;
     } & DataViewTableBasicProps);
 
-export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+export const DataViewTable: FC<DataViewTableProps> = (props) => (
   props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
 );
 

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { DataView } from '../DataView';
 import { DataViewTableBasic } from './DataViewTableBasic';

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import {
   Table,
   TableProps,
@@ -25,7 +25,7 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   ouiaId?: string;
 }
 
-export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
+export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',

package/src/DataViewTableHead/DataViewTableHead.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { Table } from '@patternfly/react-table';
 import { DataViewTableHead } from './DataViewTableHead';

package/src/DataViewTableHead/DataViewTableHead.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import {
   Th,
   Thead,
@@ -18,7 +18,7 @@ export interface DataViewTableHeadProps extends TheadProps {
   ouiaId?: string;
 }
 
-export const DataViewTableHead: React.FC<DataViewTableHeadProps> = ({
+export const DataViewTableHead: FC<DataViewTableHeadProps> = ({
   isTreeTable = false,
   columns,
   ouiaId = 'DataViewTableHead',

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
 import { DataView } from '../DataView';

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { FC, useState, useMemo, ReactNode } from 'react';
 import {
   Table,
   TableProps,
@@ -71,7 +71,7 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   ouiaId?: string;
 }
 
-export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
+export const DataViewTableTree: FC<DataViewTableTreeProps> = ({
   columns,
   rows,
   headStates,
@@ -84,8 +84,8 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
 }: DataViewTableTreeProps) => {
   const { selection, activeState } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
-  const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
-  const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
+  const [ expandedNodeIds, setExpandedNodeIds ] = useState<string[]>([]);
+  const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = useState<string[]>([]);
 
   const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
   const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
@@ -98,7 +98,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
       posinset = 1,
       rowIndex = 0,
       isHidden = false
-    ): React.ReactNode[] => {
+    ): ReactNode[] => {
       if (!node) {
         return [];
       }

package/src/DataViewTextFilter/DataViewTextFilter.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { SearchInput, SearchInputProps, ToolbarFilter, ToolbarFilterProps } from '@patternfly/react-core';
 
 /** extends SearchInputProps */
@@ -19,7 +19,7 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   ouiaId?: string;
 }
 
-export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
+export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   filterId,
   title,
   value = '',

package/src/DataViewToolbar/DataViewToolbar.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import DataViewToolbar from './DataViewToolbar';
 import { Pagination } from '@patternfly/react-core';

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useRef } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
 
 /** extends ToolbarProps */
@@ -21,7 +21,7 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
   customLabelGroupContent?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>

package/src/InternalContext/InternalContext.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom'; 
 import { useInternalContext, DataViewSelection } from './InternalContext';

package/src/InternalContext/InternalContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
+import { FC, createContext, PropsWithChildren, useContext, useMemo } from 'react';
 import { DataViewState } from '../DataView';
 
 export interface DataViewSelection {
@@ -31,7 +31,7 @@ export const InternalContext = createContext<InternalContextValue>({
 
 export type InternalProviderProps = PropsWithChildren<InternalContextProps>
 
-export const InternalContextProvider: React.FC<InternalProviderProps> = ({
+export const InternalContextProvider: FC<InternalProviderProps> = ({
   children,
   selection,
   activeState

package/tsconfig.json

@@ -9,7 +9,7 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */