@patternfly/react-core 4.220.2 → 4.221.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.220.2",
+  "version": "4.221.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.71.2",
-    "@patternfly/react-styles": "^4.70.2",
-    "@patternfly/react-tokens": "^4.72.2",
+    "@patternfly/react-icons": "^4.72.2",
+    "@patternfly/react-styles": "^4.71.2",
+    "@patternfly/react-tokens": "^4.73.2",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.194.4",
+    "@patternfly/patternfly": "4.196.6",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "a8c59ffa9bb424d46036dabe35c777b999fb11d6"
+  "gitHead": "eeeefa74fca5d5c4739cc6113028a2cca51f0fb7"
 }

package/src/components/DataList/DataList.tsx

@@ -20,6 +20,13 @@ export enum DataListWrapModifier {
   breakWord = 'breakWord'
 }
 
+export interface SelectableRowObject {
+  /** Determines if only one of the selectable rows should be selectable at a time */
+  type: 'multiple' | 'single';
+  /** Callback that executes when the screen reader accessible element receives a change event */
+  onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
+}
+
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'onDragStart' | 'ref'> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
@@ -47,6 +54,8 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** @deprecated Order of items in a draggable DataList */
   itemOrder?: string[];
+  /** @beta Object that causes the data list to render hidden inputs which improve selectable item a11y */
+  selectableRow?: SelectableRowObject;
 }
 
 interface DataListState {
@@ -60,6 +69,7 @@ interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
   updateSelectedDataListItem: (id: string) => void;
+  selectableRow?: SelectableRowObject;
   isDraggable: boolean;
   dragStart: (e: React.DragEvent) => void;
   dragEnd: (e: React.DragEvent) => void;
@@ -308,6 +318,7 @@ export class DataList extends React.Component<DataListProps, DataListState> {
       onDragFinish,
       gridBreakpoint,
       itemOrder,
+      selectableRow,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -330,6 +341,7 @@ export class DataList extends React.Component<DataListProps, DataListState> {
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
+          selectableRow,
           isDraggable: this.html5DragDrop,
           dragStart: this.dragStart,
           dragEnd: this.dragEnd,

package/src/components/DataList/DataListItem.tsx

@@ -16,6 +16,8 @@ export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>,
   'aria-labelledby': string;
   /** Unique id for the DataList item */
   id?: string;
+  /** @beta Aria label to apply to the selectable input if one is rendered */
+  selectableInputAriaLabel?: string;
 }
 
 export interface DataListItemChildProps {
@@ -52,13 +54,22 @@ export class DataListItem extends React.Component<DataListItemProps> {
     'aria-labelledby': ''
   };
   render() {
-    const { children, isExpanded, className, id, 'aria-labelledby': ariaLabelledBy, ...props } = this.props;
+    const {
+      children,
+      isExpanded,
+      className,
+      id,
+      'aria-labelledby': ariaLabelledBy,
+      selectableInputAriaLabel,
+      ...props
+    } = this.props;
     return (
       <DataListContext.Consumer>
         {({
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
+          selectableRow,
           isDraggable,
           dragStart,
           dragEnd,
@@ -98,6 +109,14 @@ export class DataListItem extends React.Component<DataListItemProps> {
             onDragStart: dragStart
           };
 
+          const isSelected = selectedDataListItemId === id;
+
+          const selectableInputAriaProps = selectableInputAriaLabel
+            ? { 'aria-label': selectableInputAriaLabel }
+            : { 'aria-labelledby': ariaLabelledBy };
+
+          const selectableInputType = selectableRow?.type === 'multiple' ? 'checkbox' : 'radio';
+
           return (
             <li
               id={id}
@@ -105,15 +124,25 @@ export class DataListItem extends React.Component<DataListItemProps> {
                 styles.dataListItem,
                 isExpanded && styles.modifiers.expanded,
                 isSelectable && styles.modifiers.selectable,
-                selectedDataListItemId && selectedDataListItemId === id && styles.modifiers.selected,
+                selectedDataListItemId && isSelected && styles.modifiers.selected,
                 className
               )}
               aria-labelledby={ariaLabelledBy}
               {...(isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown })}
-              {...(isSelectable && selectedDataListItemId === id && { 'aria-selected': true })}
+              {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
               {...dragProps}
             >
+              {selectableRow && (
+                <input
+                  className="pf-screen-reader"
+                  type={selectableInputType}
+                  checked={isSelected}
+                  onChange={event => selectableRow.onChange(id, event)}
+                  tabIndex={-1}
+                  {...selectableInputAriaProps}
+                />
+              )}
               {React.Children.map(
                 children,
                 child =>

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { DataList } from '../DataList';
 import { DataListItem } from '../DataListItem';
@@ -47,6 +48,135 @@ describe('DataList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toBeInTheDocument();
+  });
+
+  test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => {
+    render(
+      <DataList aria-label="this is a simple list">
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).not.toBeInTheDocument();
+  });
+
+  test('List hidden input renders as a radio when selectableRow.type is radio', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'single', onChange: () => {} }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableRadioInput = screen.getByRole('radio', { hidden: true });
+    const selectableCheckboxInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableRadioInput).toBeInTheDocument();
+    expect(selectableCheckboxInput).not.toBeInTheDocument();
+  });
+
+  test('List calls selectableRow.onChange when the selectable input changes', () => {
+    const mock = jest.fn();
+
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    userEvent.click(selectableInput);
+
+    expect(mock).toHaveBeenCalled();
+  });
+
+  test('List does not call selectableRow.onChange when the selectable input is not changed', () => {
+    const mock = jest.fn();
+
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
+        <DataListItem>
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    expect(mock).not.toHaveBeenCalled();
+  });
+
+  test('Item applies selectableInputAriaLabel to the hidden input', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem selectableInputAriaLabel="Data list item label test">
+          <DataListItemRow aria-labelledby="test-id">
+            <p id="test-id">Test</p>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Data list item label test');
+  });
+
+  test('Item defaults to labelling its input using its aria-labelledby prop', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem aria-labelledby="test-id">
+          <p id="test-id">Test cell content</p>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Test cell content');
+  });
+
+  test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
+    render(
+      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+        <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
+          <p id="test-id">Test cell content</p>
+        </DataListItem>
+      </DataList>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Data list item label test');
+  });
+
   test('Item default', () => {
     const { asFragment } = render(
       <DataListItem key="item-id-1" aria-labelledby="item-1">

package/src/components/DataList/examples/DataList.md

@@ -5,6 +5,7 @@ cssPrefix: pf-c-data-list
 propComponents:
   [
     'DataList',
+    'SelectableRowObject',
     'DataListAction',
     'DataListCell',
     'DataListCheck',

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -37,12 +37,17 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setSelectedDataListItemId(id);
   };
 
+  const handleInputChange = (id: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setSelectedDataListItemId(id);
+  };
+
   return (
     <React.Fragment>
       <DataList
         aria-label="selectable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
+        selectableRow={{ type: 'single', onChange: handleInputChange }}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>

package/src/components/InputGroup/InputGroup.tsx

@@ -10,19 +10,25 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content rendered inside the input group. */
   children: React.ReactNode;
+  /** @hide A reference object to attach to the input box */
+  innerRef?: React.RefObject<any>;
 }
 
 export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
   className = '',
   children,
+  innerRef,
   ...props
 }: InputGroupProps) => {
   const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
   const idItem = React.Children.toArray(children).find(
     (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
   ) as React.ReactElement<{ id: string }>;
+
+  const inputGroupRef = innerRef || React.useRef(null);
+
   return (
-    <div className={css(styles.inputGroup, className)} {...props}>
+    <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
       {idItem
         ? React.Children.map(children, (child: any) =>
             formCtrls.includes(child.type.displayName)

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { GenerateId, KEY_CODES } from '../../helpers';
 import { SearchAttribute } from './SearchInput';
+import { Panel, PanelMain, PanelMainBody } from '../Panel';
+import { css } from '@patternfly/react-styles';
 
 export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+  /** Additional classes added to the Advanced search menu */
+  className?: string;
   /** Value of the search input */
   value?: string;
   /** Ref of the div wrapping the whole search input **/
@@ -46,6 +49,7 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
 }
 
 export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps> = ({
+  className,
   parentRef,
   parentInputRef,
   value = '',
@@ -200,24 +204,26 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   };
 
   return isSearchMenuOpen ? (
-    <div className={styles.searchInputMenu}>
-      <div className={styles.searchInputMenuBody}>
-        <Form>
-          {buildFormGroups()}
-          {formAdditionalItems ? formAdditionalItems : null}
-          <ActionGroup>
-            <Button variant="primary" type="submit" onClick={onSearchHandler}>
-              {submitSearchButtonLabel}
-            </Button>
-            {!!onClear && (
-              <Button variant="link" type="reset" onClick={onClear}>
-                {resetButtonLabel}
+    <Panel variant="raised" className={css(className)}>
+      <PanelMain>
+        <PanelMainBody>
+          <Form>
+            {buildFormGroups()}
+            {formAdditionalItems ? formAdditionalItems : null}
+            <ActionGroup>
+              <Button variant="primary" type="submit" onClick={onSearchHandler} isDisabled={!value}>
+                {submitSearchButtonLabel}
               </Button>
-            )}
-          </ActionGroup>
-        </Form>
-      </div>
-    </div>
+              {!!onClear && (
+                <Button variant="link" type="reset" onClick={onClear}>
+                  {resetButtonLabel}
+                </Button>
+              )}
+            </ActionGroup>
+          </Form>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
   ) : null;
 };
 AdvancedSearchMenu.displayName = 'SearchInput';