@patternfly/react-core 4.268.0 → 4.268.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.268.0",
+  "version": "4.268.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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "4464f97977ce3984b4e589711f26993f1f64a23f"
+  "gitHead": "a25b3ab583bd808d640a1c7ebb14d9296d701b2b"
 }

package/src/components/LabelGroup/LabelGroup.tsx

@@ -156,15 +156,14 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
       ...rest
     } = this.props;
     const { isOpen } = this.state;
-    const numChildren = React.Children.count(children);
+    const renderedChildren = React.Children.toArray(children);
+    const numChildren = renderedChildren.length;
     const collapsedTextResult = fillTemplate(collapsedText as string, {
-      remaining: React.Children.count(children) - numLabels
+      remaining: numChildren - numLabels
     });
 
     const renderLabelGroup = (id: string) => {
-      const labelArray = !isOpen
-        ? React.Children.toArray(children).slice(0, numLabels)
-        : React.Children.toArray(children);
+      const labelArray = !isOpen ? renderedChildren.slice(0, numLabels) : renderedChildren;
 
       const content = (
         <React.Fragment>

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -3,7 +3,7 @@ import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { GenerateId, KeyTypes } from '../../helpers';
-import { SearchAttribute } from './SearchInput';
+import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
@@ -13,7 +13,7 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
    */
   advancedSearchDelimiter?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the advanced search menu. */
   className?: string;
   /* Additional elements added after the attributes in the form.
@@ -161,7 +161,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
 
   const buildFormGroups = () => {
     const formGroups = [] as React.ReactNode[];
-    attributes.forEach((attribute: string | SearchAttribute, index: number) => {
+    attributes.forEach((attribute: string | SearchInputSearchAttribute, index: number) => {
       const display = typeof attribute === 'string' ? attribute : attribute.display;
       const queryAttr = typeof attribute === 'string' ? attribute : attribute.attr;
       if (index === 0) {

package/src/components/SearchInput/SearchInput.tsx

@@ -17,7 +17,7 @@ import { Popper } from '../../helpers';
  * be passed in as an object within an array to the search input component's attribute properrty.
  */
 
-export interface SearchAttribute {
+export interface SearchInputSearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
    * It should have no spaces and be unique for every attribute.
    */
@@ -32,11 +32,11 @@ export interface SearchAttribute {
  * the search input component's expandableInput property.
  */
 
-export interface ExpandableInput {
+export interface SearchInputExpandable {
   /** Flag to indicate if the search input is expanded. */
   isExpanded: boolean;
   /** Callback function to toggle the expandable search input. */
-  onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
 }
@@ -58,11 +58,11 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** An accessible label for the search input. */
   'aria-label'?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the search input. */
   className?: string;
   /** Object that makes the search input expandable/collapsible. */
-  expandableInput?: ExpandableInput;
+  expandableInput?: SearchInputExpandable;
   /* Additional elements added after the attributes in the form.
    * The new form elements can be wrapped in a form group component for automatic formatting. */
   formAdditionalItems?: React.ReactNode;
@@ -285,7 +285,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const onExpandHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     setSearchValue('');
-    onToggleExpand(isExpanded, event);
+    onToggleExpand(event, isExpanded);
     setFocusAfterExpandChange(true);
   };
 

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

@@ -239,7 +239,7 @@ test('onToggleExpand is called if the expandable toggle is clicked', async () =>
   await user.click(screen.getByRole('button'));
 
   expect(mockOnToggleExpand).toHaveBeenCalledTimes(1);
-  expect(mockOnToggleExpand).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
+  expect(mockOnToggleExpand).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }), true);
 });
 
 test('toggleAriaLabel is applied to the expandable toggle', () => {

package/src/components/SearchInput/examples/SearchInput.md

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
+propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 beta: true
 ---
 

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -9,7 +9,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const onToggleExpand = (isExpanded: boolean) => {
+  const onToggleExpand = (_event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => {
     setIsExpanded(!isExpanded);
   };
 

package/src/components/SimpleList/SimpleList.tsx

@@ -16,6 +16,8 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   ) => void;
   /** Indicates whether component is controlled by its internal state */
   isControlled?: boolean;
+  /** aria-label for the <ul> element that wraps the SimpleList items. */
+  'aria-label'?: string;
 }
 
 export interface SimpleListState {
@@ -57,7 +59,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, onSelect, isControlled, ...props } = this.props;
+    const { children, className, onSelect, isControlled, 'aria-label': ariaLabel, ...props } = this.props;
 
     let isGrouped = false;
     if (children) {
@@ -74,7 +76,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
       >
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
-          {!isGrouped && <ul>{children}</ul>}
+          {!isGrouped && <ul aria-label={ariaLabel}>{children}</ul>}
         </div>
       </SimpleListContext.Provider>
     );

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

@@ -31,6 +31,11 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders aria-labelled content', () => {
+    const { asFragment } = render(<SimpleList aria-label="This is a simple list">{items}</SimpleList>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('renders grouped content', () => {
     const { asFragment } = render(
       <SimpleList>

package/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap

@@ -1,5 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SimpleList renders aria-labelled content 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-simple-list"
+  >
+    <ul
+      aria-label="This is a simple list"
+    >
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 1
+        </button>
+      </li>
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 2
+        </button>
+      </li>
+      <li
+        class=""
+      >
+        <button
+          class="pf-c-simple-list__item-link"
+          type="button"
+        >
+          Item 3
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SimpleList renders content 1`] = `
 <DocumentFragment>
   <div