@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/MultipleFileUpload/MultipleFileUploadMain.tsx

@@ -21,6 +21,8 @@ export interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElem
   infoText?: React.ReactNode;
   /** Flag to prevent the upload button from being rendered */
   isUploadButtonHidden?: boolean;
+  /** Visible text label for the upload button */
+  browseButtonText?: string;
 }
 
 export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadMainProps> = ({
@@ -30,6 +32,7 @@ export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadM
   titleTextSeparator,
   infoText,
   isUploadButtonHidden,
+  browseButtonText = 'Upload',
   ...props
 }: MultipleFileUploadMainProps) => {
   const showTitle = !!titleIcon || !!titleText || !!titleTextSeparator;
@@ -37,7 +40,7 @@ export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadM
   return (
     <div className={css(styles.multipleFileUploadMain, className)} {...props}>
       {showTitle && <MultipleFileUploadTitle icon={titleIcon} text={titleText} textSeparator={titleTextSeparator} />}
-      {isUploadButtonHidden || <MultipleFileUploadButton />}
+      {isUploadButtonHidden || <MultipleFileUploadButton browseButtonText={browseButtonText} />}
       {!!infoText && <MultipleFileUploadInfo>{infoText}</MultipleFileUploadInfo>}
     </div>
   );

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 import { ExpandableSection } from '../ExpandableSection';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -65,11 +66,21 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
 
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
-      <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
-          {children}
-        </ul>
-      </ExpandableSection>
+      <GenerateId prefix="pf-expandable-section-">
+        {(expandableSectionId) => (
+          <ExpandableSection
+            contentId={`${expandableSectionId}-content`}
+            toggleId={`${expandableSectionId}-toggle`}
+            toggleContent={toggle}
+            isExpanded={isOpen}
+            onToggle={toggleExpandableSection}
+          >
+            <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+              {children}
+            </ul>
+          </ExpandableSection>
+        )}
+      </GenerateId>
     </div>
   );
 };

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -88,7 +88,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
       const reader = new FileReader();
       reader.onload = () => resolve(reader.result);
       reader.onerror = () => reject(reader.error);
-      reader.onprogress = data => {
+      reader.onprogress = (data) => {
         if (data.lengthComputable) {
           setLoadPercentage((data.loaded / data.total) * 100);
         }
@@ -103,7 +103,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     } else {
       onReadStarted(file);
       readFile(file)
-        .then(data => {
+        .then((data) => {
           setLoadResult('success');
           setLoadPercentage(100);
           onReadFinished(file);

package/src/components/MultipleFileUpload/MultipleFileUploadTitleTextSeparator.tsx

@@ -9,11 +9,9 @@ export interface MultipleFileUploadTitleTextSeparatorProps extends React.HTMLPro
   className?: string;
 }
 
-export const MultipleFileUploadTitleTextSeparator: React.FunctionComponent<MultipleFileUploadTitleTextSeparatorProps> = ({
-  className,
-  children,
-  ...props
-}: MultipleFileUploadTitleTextSeparatorProps) => (
+export const MultipleFileUploadTitleTextSeparator: React.FunctionComponent<
+  MultipleFileUploadTitleTextSeparatorProps
+> = ({ className, children, ...props }: MultipleFileUploadTitleTextSeparatorProps) => (
   <div className={css(styles.multipleFileUploadTitleTextSeparator, className)} {...props}>
     {children}
   </div>

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadButton.test.tsx

@@ -17,4 +17,9 @@ describe('MultipleFileUploadButton', () => {
     const { asFragment } = render(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders with label applied to the button', () => {
+    const { asFragment } = render(<MultipleFileUploadButton browseButtonText="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap

@@ -57,3 +57,22 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`MultipleFileUploadButton renders with label applied to the button 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-multiple-file-upload__upload"
+  >
+    <button
+      aria-disabled="false"
+      class="pf-v5-c-button pf-m-secondary"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-4"
+      data-ouia-component-type="PF5/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -9,8 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-1-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-1-toggle"
         type="button"
       >
         <span
@@ -46,8 +48,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-1-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-1-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -70,8 +74,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-3-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-3-toggle"
         type="button"
       >
         <span
@@ -121,8 +127,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-3-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-3-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -145,8 +153,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-2-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-2-toggle"
         type="button"
       >
         <span
@@ -184,8 +194,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-2-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-2-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -208,8 +220,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-0-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-0-toggle"
         type="button"
       >
         <span
@@ -245,8 +259,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-0-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-0-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -18,11 +18,11 @@ Multiple file upload is able to:
   - Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
   - If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
 
-### Restricting file size and type
+## Restricting file size and type
 
 As with singular file upload, any [props accepted by react-dropzone's Dropzone component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
 
-#### IMPORTANT: A note about security
+### IMPORTANT: A note about security
 
 Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.
 

package/src/components/Nav/Nav.tsx

@@ -64,7 +64,7 @@ export interface NavContextProps {
 export const navContextDefaults = {};
 export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
 
-export class Nav extends React.Component<
+class Nav extends React.Component<
   NavProps,
   { isScrollable: boolean; ouiaStateId: string; flyoutRef: React.Ref<HTMLLIElement> | null }
 > {
@@ -175,3 +175,5 @@ export class Nav extends React.Component<
     );
   }
 }
+
+export { Nav };

package/src/components/Nav/NavExpandable.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
-import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { getUniqueId } from '../../helpers/util';
@@ -41,7 +40,7 @@ interface NavExpandableState {
   ouiaStateId: string;
 }
 
-export class NavExpandable extends React.Component<NavExpandableProps, NavExpandableState> {
+class NavExpandable extends React.Component<NavExpandableProps, NavExpandableState> {
   static displayName = 'NavExpandable';
   static defaultProps: PickOptional<NavExpandableProps> = {
     srText: '',
@@ -145,7 +144,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
             </PageSidebarContext.Consumer>
             <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
               {srText && (
-                <h2 className={css(a11yStyles.screenReader)} id={this.id}>
+                <h2 className="pf-v5-screen-reader" id={this.id}>
                   {srText}
                 </h2>
               )}
@@ -159,3 +158,5 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
     );
   }
 }
+
+export { NavExpandable };

package/src/components/Nav/NavItem.tsx

@@ -120,7 +120,10 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
     // We only want the NavItem to handle closing a flyout menu if only the first level flyout is open.
     // Otherwise, MenuItem should handle closing its flyouts
-    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1) {
+    if (
+      (key === 'Escape' || key === 'ArrowLeft') &&
+      popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1
+    ) {
       if (flyoutVisible) {
         event.stopPropagation();
         event.preventDefault();

package/src/components/Nav/NavList.tsx

@@ -20,7 +20,7 @@ export interface NavListProps
   ariaRightScroll?: string;
 }
 
-export class NavList extends React.Component<NavListProps> {
+class NavList extends React.Component<NavListProps> {
   static displayName = 'NavList';
   static contextType = NavContext;
   context!: React.ContextType<typeof NavContext>;
@@ -149,3 +149,5 @@ export class NavList extends React.Component<NavListProps> {
     );
   }
 }
+
+export { NavList };

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       hidden=""
     >
       <h2
-        class="pf-v5-u-screen-reader"
+        class="pf-v5-screen-reader"
         id="''"
       >
         ''

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

@@ -494,7 +494,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           hidden=""
         >
           <h2
-            class="pf-v5-u-screen-reader"
+            class="pf-v5-screen-reader"
             id="grp-1"
           >
             Section 1 - Example sub-navigation
@@ -1096,7 +1096,7 @@ exports[`Nav Nav List with flyout 1`] = `
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
       <div>
         Flyout test

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -31,7 +31,9 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   ...props
 }: NotificationDrawerListItemProps) => {
   const onKeyDown = (event: React.KeyboardEvent) => {
-    if (!(event.target as HTMLElement).parentElement.classList.contains('pf-v5-c-notification-drawer__list-item-action')) {
+    if (
+      !(event.target as HTMLElement).parentElement.classList.contains('pf-v5-c-notification-drawer__list-item-action')
+    ) {
       // Accessibility function. Click on the list item when pressing Enter or Space on it.
       if (event.key === 'Enter' || event.key === ' ') {
         (event.target as HTMLElement).click();

package/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx

@@ -7,7 +7,6 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
-import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 import maxLines from '@patternfly/react-tokens/dist/esm/c_notification_drawer__list_item_header_title_max_lines';
 
@@ -87,7 +86,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
       ref={titleRef}
       className={css(styles.notificationDrawerListItemHeaderTitle, truncateTitle && styles.modifiers.truncate)}
     >
-      {srTitle && <span className={css(a11yStyles.screenReader)}>{srTitle}</span>}
+      {srTitle && <span className="pf-v5-screen-reader">{srTitle}</span>}
       {title}
     </HeadingLevel>
   );

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap

@@ -57,7 +57,7 @@ exports[`NotificationDrawerListItemHeader list item header with srTitle applied
       class="pf-v5-c-notification-drawer__list-item-header-title"
     >
       <span
-        class="pf-v5-u-screen-reader"
+        class="pf-v5-screen-reader"
       >
         screen reader title
       </span>

package/src/components/NumberInput/NumberInput.tsx

@@ -139,7 +139,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             {...(isDisabled && { isDisabled })}
             {...(onChange && { onChange: (event, _value) => onChange(event) })}
             onBlur={handleBlur}
-            {...(!onChange && { readOnlyVariant: "default" })}
+            {...(!onChange && { readOnlyVariant: 'default' })}
             onKeyDown={keyDownHandler}
             validated={validated}
           />

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -28,7 +28,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
       <NumberInput
         value={input1Value}
         onMinus={() => onMinus(input1Value, setInput1Value)}
-        onChange={event => onChange(event, setInput1Value)}
+        onChange={(event) => onChange(event, setInput1Value)}
         onPlus={() => onPlus(input1Value, setInput1Value)}
         inputName="input1"
         inputAriaLabel="number input 1"
@@ -41,7 +41,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
       <NumberInput
         value={input2Value}
         onMinus={() => onMinus(input2Value, setInput2Value)}
-        onChange={event => onChange(event, setInput2Value)}
+        onChange={(event) => onChange(event, setInput2Value)}
         onPlus={() => onPlus(input2Value, setInput2Value)}
         inputName="input2"
         inputAriaLabel="number input 2"
@@ -54,7 +54,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
       <NumberInput
         value={input3Value}
         onMinus={() => onMinus(input3Value, setInput3Value)}
-        onChange={event => onChange(event, setInput3Value)}
+        onChange={(event) => onChange(event, setInput3Value)}
         onPlus={() => onPlus(input3Value, setInput3Value)}
         inputName="input3"
         inputAriaLabel="number input 3"
@@ -67,7 +67,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
       <NumberInput
         value={input4Value}
         onMinus={() => onMinus(input4Value, setInput4Value)}
-        onChange={event => onChange(event, setInput4Value)}
+        onChange={(event) => onChange(event, setInput4Value)}
         onPlus={() => onPlus(input4Value, setInput4Value)}
         inputName="input4"
         inputAriaLabel="number input 4"

package/src/components/NumberInput/examples/NumberInputWithStatus.tsx

@@ -26,7 +26,7 @@ export const NumberInputWithStatus: React.FunctionComponent = () => {
     validate(value);
   };
 
-  const validate = newVal => {
+  const validate = (newVal) => {
     const diff = Math.abs(5 - newVal);
     if (diff > 3) {
       setValidated(ValidatedOptions.error);

package/src/components/OverflowMenu/OverflowMenu.tsx

@@ -22,7 +22,7 @@ export interface OverflowMenuState extends React.HTMLProps<HTMLDivElement> {
   breakpointRef: HTMLElement;
 }
 
-export class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
+class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
   static displayName = 'OverflowMenu';
   constructor(props: OverflowMenuProps) {
     super(props);
@@ -100,3 +100,5 @@ export class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMen
 }
 
 OverflowMenu.contextType = OverflowMenuContext;
+
+export { OverflowMenu };

package/src/components/OverflowMenu/OverflowMenuContent.tsx

@@ -18,7 +18,7 @@ export const OverflowMenuContent: React.FunctionComponent<OverflowMenuContentPro
   isPersistent
 }: OverflowMenuContentProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (!value.isBelowBreakpoint || isPersistent) && (
         <div className={css(styles.overflowMenuContent, className)}>{children}</div>
       )

package/src/components/OverflowMenu/OverflowMenuControl.tsx

@@ -19,7 +19,7 @@ export const OverflowMenuControl: React.FunctionComponent<OverflowMenuControlPro
   ...props
 }: OverflowMenuControlProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (value.isBelowBreakpoint || hasAdditionalOptions) && (
         <div className={css(styles.overflowMenuControl, className)} {...props}>
           {' '}

package/src/components/OverflowMenu/OverflowMenuGroup.tsx

@@ -22,7 +22,7 @@ export const OverflowMenuGroup: React.FunctionComponent<OverflowMenuGroupProps>
   ...props
 }: OverflowMenuGroupProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (isPersistent || !value.isBelowBreakpoint) && (
         <div
           className={css(

package/src/components/OverflowMenu/OverflowMenuItem.tsx

@@ -18,7 +18,7 @@ export const OverflowMenuItem: React.FunctionComponent<OverflowMenuItemProps> =
   isPersistent = false
 }: OverflowMenuItemProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (isPersistent || !value.isBelowBreakpoint) && (
         <div className={css(styles.overflowMenuItem, className)}> {children} </div>
       )