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

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>
       )