@patternfly/react-core 4.232.8 → 4.232.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.8",
+  "version": "4.232.11",
   "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",
@@ -50,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.8",
-    "@patternfly/react-styles": "^4.82.8",
-    "@patternfly/react-tokens": "^4.84.8",
+    "@patternfly/react-icons": "^4.83.11",
+    "@patternfly/react-styles": "^4.82.11",
+    "@patternfly/react-tokens": "^4.84.11",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,21 +60,21 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "4.208.1",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
+    "rollup": "^2.78.0",
     "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6de8ebec5d18b45829ee732afa363e871a82c05a"
+  "gitHead": "3b4fe0a85d88aa9616d7a6768d187d6fc87abb32"
 }

package/src/components/Page/PageBreadcrumb.tsx

@@ -28,6 +28,8 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageBreadcrumb has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true. */
+  'aria-label'?: string;
 }
 
 export const PageBreadcrumb = ({
@@ -39,10 +41,18 @@ export const PageBreadcrumb = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageBreadcrumbProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageBreadcrumb: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <section
       className={css(
@@ -57,6 +67,7 @@ export const PageBreadcrumb = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
       {...props}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

package/src/components/Page/PageGroup.tsx

@@ -25,6 +25,8 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageGroup has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the page group. Required when the hasOverflowScroll prop is set to true. */
+  'aria-label'?: string;
 }
 
 export const PageGroup = ({
@@ -35,10 +37,18 @@ export const PageGroup = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageGroupProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageGroup: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <div
       {...props}
@@ -53,6 +63,7 @@ export const PageGroup = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
     >
       {children}
     </div>

package/src/components/Page/PageNavigation.tsx

@@ -28,6 +28,8 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageNavigation has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the page navigation. Required when the hasOverflowScroll prop is set to true. */
+  'aria-label'?: string;
 }
 
 export const PageNavigation = ({
@@ -39,10 +41,18 @@ export const PageNavigation = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageNavigationProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <div
       className={css(
@@ -57,6 +67,7 @@ export const PageNavigation = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
       {...props}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

package/src/components/Page/PageSection.tsx

@@ -61,6 +61,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageSection has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true.
+   * This prop should also be passed in if a heading is not being used to describe the content of the page section.
+   */
+  'aria-label'?: string;
 }
 
 const variantType = {
@@ -93,10 +97,18 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageSection: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <section
       {...props}
@@ -117,6 +129,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
       {!isWidthLimited && children}

package/src/components/Page/__tests__/PageBreadcrumb.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 
 describe('page breadcrumb', () => {
@@ -31,4 +31,44 @@ describe('page breadcrumb', () => {
     const { asFragment } = render(<PageBreadcrumb hasOverflowScroll>test</PageBreadcrumb>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders without an aria-label by default', () => {
+    render(<PageBreadcrumb>test</PageBreadcrumb>);
+
+    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+  });
+
+  test('Renders with the passed aria-label applied', () => {
+    render(<PageBreadcrumb aria-label="Test label">test</PageBreadcrumb>);
+
+    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+  });
+
+  test('Does not log a warning in the console by default', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageBreadcrumb>test</PageBreadcrumb>);
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(
+      <PageBreadcrumb hasOverflowScroll aria-label="Test label">
+        test
+      </PageBreadcrumb>
+    );
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageBreadcrumb hasOverflowScroll>test</PageBreadcrumb>);
+
+    expect(consoleWarning).toHaveBeenCalled();
+  });
 });

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageGroup } from '../PageGroup';
 
 describe('page group', () => {
@@ -27,4 +27,44 @@ describe('page group', () => {
     const { asFragment } = render(<PageGroup hasOverflowScroll>test</PageGroup>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders without an aria-label by default', () => {
+    render(<PageGroup>test</PageGroup>);
+
+    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+  });
+
+  test('Renders with the passed aria-label applied', () => {
+    render(<PageGroup aria-label="Test label">test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+  });
+
+  test('Does not log a warning in the console by default', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageGroup>test</PageGroup>);
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(
+      <PageGroup hasOverflowScroll aria-label="Test label">
+        test
+      </PageGroup>
+    );
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageGroup hasOverflowScroll>test</PageGroup>);
+
+    expect(consoleWarning).toHaveBeenCalled();
+  });
 });

package/src/components/Page/__tests__/PageNavigation.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageNavigation } from '../PageNavigation';
 
 describe('page navigation', () => {
@@ -31,4 +31,44 @@ describe('page navigation', () => {
     const { asFragment } = render(<PageNavigation hasOverflowScroll>test</PageNavigation>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders without an aria-label by default', () => {
+    render(<PageNavigation>test</PageNavigation>);
+
+    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+  });
+
+  test('Renders with the passed aria-label applied', () => {
+    render(<PageNavigation aria-label="Test label">test</PageNavigation>);
+
+    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+  });
+
+  test('Does not log a warning in the console by default', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageNavigation>test</PageNavigation>);
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(
+      <PageNavigation hasOverflowScroll aria-label="Test label">
+        test
+      </PageNavigation>
+    );
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageNavigation hasOverflowScroll>test</PageNavigation>);
+
+    expect(consoleWarning).toHaveBeenCalled();
+  });
 });

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageSection, PageSectionTypes } from '../PageSection';
 
 jest.mock('../Page');
@@ -88,3 +88,43 @@ test('Verify page section overflow scroll', () => {
   const { asFragment } = render(<PageSection hasOverflowScroll>test</PageSection>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders without an aria-label by default', () => {
+  render(<PageSection>test</PageSection>);
+
+  expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+});
+
+test('Renders with the passed aria-label applied', () => {
+  render(<PageSection aria-label="Test label">test</PageSection>);
+
+  expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+});
+
+test('Does not log a warning in the console by default', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<PageSection>test</PageSection>);
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+});
+
+test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(
+    <PageSection hasOverflowScroll aria-label="Test label">
+      test
+    </PageSection>
+  );
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+});
+
+test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<PageSection hasOverflowScroll>test</PageSection>);
+
+  expect(consoleWarning).toHaveBeenCalled();
+});

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

@@ -6,193 +6,33 @@ propComponents: ['SearchInput', 'SearchAttribute']
 beta: true
 ---
 
-import { SearchInput } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 ## Examples
 
 ### Basic
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class BasicSearchInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value
-      });
-    };
-  }
-
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={evt => this.onChange('', evt)}
-      />
-    );
-  }
-}
+```ts file='./SearchInputBasic.tsx'
 ```
 
 ### Match with result count
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class SearchInputWithResultCount extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      resultsCount: 0
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value,
-        resultsCount: 3
-      });
-    };
-
-    this.onClear = event => {
-      this.setState({
-        value: '',
-        resultsCount: 0
-      });
-    };
-  }
-
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        resultsCount={this.state.resultsCount}
-      />
-    );
-  }
-}
+```ts file='./SearchInputWithResultCount.tsx'
 ```
 
 ### Match with navigable options
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-class SearchInputWithNavigableOptions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      resultsCount: 0,
-      currentResult: 1,
-      isPreviousNavigationButtonDisabled: false,
-      isNextNavigationButtonDisabled: false
-    };
-
-    this.onChange = (value, event) => {
-      this.setState({
-        value: value,
-        resultsCount: 3
-      });
-    };
-
-    this.onClear = event => {
-      this.setState({
-        value: '',
-        resultsCount: 0,
-        currentResult: 1
-      });
-    };
-
-    this.onNext = event => {
-      this.setState(prevState => {
-        const newCurrentResult = prevState.currentResult + 1;
-        return {
-          currentResult: newCurrentResult <= prevState.resultsCount ? newCurrentResult : prevState.resultsCount
-        };
-      });
-    };
-
-    this.onPrevious = event => {
-      this.setState(prevState => {
-        const newCurrentResult = prevState.currentResult - 1;
-        return {
-          currentResult: newCurrentResult > 0 ? newCurrentResult : 1
-        };
-      });
-    };
-  }
-  render() {
-    return (
-      <SearchInput
-        placeholder="Find by name"
-        value={this.state.value}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        isNextNavigationButtonDisabled={this.state.currentResult === 3}
-        isPreviousNavigationButtonDisabled={this.state.currentResult === 1}
-        resultsCount={`${this.state.currentResult} / ${this.state.resultsCount}`}
-        onNextClick={this.onNext}
-        onPreviousClick={this.onPrevious}
-      />
-    );
-  }
-}
+```ts file='./SearchInputWithNavigableOptions.tsx'
 ```
 
 ### With submit button
 
-```js
-import React from 'react';
-import { SearchInput } from '@patternfly/react-core';
-
-SubmitButtonSearchInput = () => {
-  const [value, setValue] = React.useState('');
-
-  return (
-    <SearchInput
-      placeholder='Find by name'
-      value={value}
-      onChange={setValue}
-      onSearch={setValue}
-      onClear={() => setValue('')}
-    />
-  );
-}
-
+```ts file='./SearchInputWithSubmitButton.tsx'
 ```
 
 ### Focus search input using ref
 
-```js
-import React from 'react';
-import { SearchInput, Button } from '@patternfly/react-core';
-
-TextInputSelectAll = () => {
-  const [value, setValue] = React.useState('');
-  const ref = React.useRef(null);
-  return (
-    <React.Fragment>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
-      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
-    </React.Fragment>
-  );
-};
+```ts file='./SearchInputFocusSearch.tsx'
 ```
 
 ### Advanced
@@ -203,62 +43,5 @@ the following example. The search input component can also be used as a composab
 or other elements to build a completely custom advanced search form. This feature is demonstrated 
 in the search input's <a href="/components/search-input/react-demos">react demos</a>.
 
-```js
-import React from 'react';
-import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
-
-AdvancedSearchInput = () => {
-  const [value, setValue] = React.useState('username:player firstname:john');
-  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
-  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
-
-  const toggleDelimiter = checked => {
-    const newValue = value.replace(/:|=/g, checked ? '=' : ':');
-    setUseEqualsAsDelimiter(checked);
-    setValue(newValue);
-  };
-
-  return (
-    <>
-      <Checkbox
-        label="Use equal sign as search attribute delimiter"
-        isChecked={useEqualsAsDelimiter}
-        onChange={toggleDelimiter}
-        aria-label="change delimiter checkbox"
-        id="toggle-delimiter"
-        name="toggle-delimiter"
-      />
-      <Checkbox
-        label="Add custom footer element after the attributes in the menu"
-        isChecked={useCustomFooter}
-        onChange={value => setUseCustomFooter(value)}
-        aria-label="change use custom footer checkbox"
-        id="toggle-custom-footer"
-        name="toggle-custom-footer"
-      />
-      <br />
-      <SearchInput
-        attributes={[
-          { attr: 'username', display: 'Username' },
-          { attr: 'firstname', display: 'First name' }
-        ]}
-        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
-        value={value}
-        onChange={setValue}
-        onSearch={setValue}
-        onClear={() => setValue('')}
-        formAdditionalItems={
-          useCustomFooter ? (
-            <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
-                Link
-              </Button>
-            </FormGroup>
-          ) : null
-        }
-      />
-    </>
-  );
-};
+```ts file='./SearchInputAdvanced.tsx'
 ```