@patternfly/react-core 4.258.8 → 4.260.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.8",
+  "version": "4.260.0",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "caf942ac339aec701ec15dfc6cb48d4859b7c3e4"
+  "gitHead": "8d5d8dc62afaae1e70567b802bf617bf73df36a4"
 }

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -63,6 +63,8 @@ export interface ApplicationLauncherProps
   toggleId?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the application launcher when menuAppendTo is not inline. */
+  zIndex?: number;
 }
 
 export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
@@ -133,6 +135,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       searchNoResultsText,
       menuAppendTo,
       removeFindDomNode,
+      zIndex = 9999,
       ...props
     } = this.props;
     let renderableItems: React.ReactNode[] = [];
@@ -194,6 +197,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
             aria-label={ariaLabel}
             menuAppendTo={menuAppendTo}
             removeFindDomNode={removeFindDomNode}
+            zIndex={zIndex}
             toggle={
               <DropdownToggle
                 id={toggleId}

package/src/components/ContextSelector/ContextSelector.tsx

@@ -68,6 +68,8 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   id?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the context selector when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -96,7 +98,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     isPlain: false,
     isText: false,
     isFlipEnabled: true,
-    removeFindDomNode: false
+    removeFindDomNode: false,
+    zIndex: 9999
   };
   constructor(props: ContextSelectorProps) {
     super(props);
@@ -139,6 +142,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       isFlipEnabled,
       id,
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
 
@@ -235,6 +239,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
         appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
         isVisible={isOpen}
         removeFindDomNode={removeFindDomNode}
+        zIndex={zIndex}
       />
     );
   }

package/src/components/Dropdown/Dropdown.tsx

@@ -62,6 +62,8 @@ export interface DropdownProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the dropdown when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -79,6 +81,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   menuAppendTo = 'inline',
   isFlipEnabled = true,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -108,6 +111,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       menuAppendTo={menuAppendTo}
       isFlipEnabled={isFlipEnabled}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
       {...props}
     />
   </DropdownContext.Provider>

package/src/components/Dropdown/DropdownWithContext.tsx

@@ -78,6 +78,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       menuAppendTo,
       isFlipEnabled,
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
     const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
@@ -175,6 +176,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
               removeFindDomNode={removeFindDomNode}
+              zIndex={zIndex}
               popperMatchesTriggerWidth={false}
             />
           );

package/src/components/HelperText/__mocks__/HelperText.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HelperTextProps } from '../';
+
+export const HelperText = ({ children, isLiveRegion }: HelperTextProps) => (
+  <>
+    <div data-testid="helper-text-children-container">{children}</div>
+    <p>{`isLiveRegion: ${isLiveRegion}`}</p>
+  </>
+);

package/src/components/HelperText/__mocks__/HelperTextItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HelperTextItemProps } from '../';
+
+export const HelperTextItem = ({ children, variant }: HelperTextItemProps) => (
+  <>
+    <div data-testid="helper-text-item-children-container">{children}</div>
+    <p>{`variant: ${variant}`}</p>
+  </>
+);

package/src/components/HelperText/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from './HelperText';
+export * from './HelperTextItem';

package/src/components/Nav/NavItem.tsx

@@ -34,6 +34,8 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   onShowFlyout?: () => void;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the flyout nav item */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -56,6 +58,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaId,
   ouiaSafe,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef } = React.useContext(NavContext);
@@ -225,6 +228,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       isVisible={flyoutVisible}
       onDocumentKeyDown={handleFlyout}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
     />
   );
 

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -49,6 +49,8 @@ export interface OptionsMenuProps
   menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the options menu when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -68,6 +70,7 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
   ouiaId,
   ouiaSafe = true,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: OptionsMenuProps) => (
   <DropdownContext.Provider
@@ -96,6 +99,7 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
       toggle={toggle}
       menuAppendTo={menuAppendTo}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
       {...props}
     />
   </DropdownContext.Provider>

package/src/components/Progress/Progress.tsx

@@ -42,6 +42,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
+  /** @beta Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  helperText?: React.ReactNode;
 }
 
 export class Progress extends React.Component<ProgressProps> {
@@ -85,6 +89,7 @@ export class Progress extends React.Component<ProgressProps> {
       tooltipPosition,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      helperText,
       ...props
     } = this.props;
 
@@ -137,6 +142,7 @@ export class Progress extends React.Component<ProgressProps> {
           progressBarAriaProps={progressBarAriaProps}
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
+          helperText={helperText}
         />
       </div>
     );

package/src/components/Progress/ProgressContainer.tsx

@@ -6,6 +6,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
+import { ProgressHelperText } from './ProgressHelperText';
 
 export enum ProgressMeasureLocation {
   outside = 'outside',
@@ -53,6 +54,10 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  helperText?: React.ReactNode;
 }
 
 const variantToIcon = {
@@ -70,7 +75,8 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   variant = null,
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
-  tooltipPosition
+  tooltipPosition,
+  helperText
 }: ProgressContainerProps) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = React.useState('');
@@ -117,6 +123,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
       <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>
+      {helperText && <ProgressHelperText>{helperText}</ProgressHelperText>}
     </React.Fragment>
   );
 };

package/src/components/Progress/ProgressHelperText.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
+
+export interface ProgressHelperTextProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  children?: React.ReactNode;
+}
+
+export const ProgressHelperText: React.FunctionComponent<ProgressHelperTextProps> = ({
+  children,
+  ...props
+}: ProgressHelperTextProps) => (
+  <div className={progressStyle.progressHelperText} {...props}>
+    {children}
+  </div>
+);
+
+ProgressHelperText.displayName = 'ProgressHelperText';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Progress, ProgressSize } from '../Progress';
 import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';
 
@@ -97,3 +97,15 @@ test('progress component generates console warning when no accessible name is pr
   render(<Progress value={33} />);
   expect(consoleWarnMock).toHaveBeenCalled();
 });
+
+test('Does not render helper text by default', () => {
+  render(<Progress/>);
+
+  expect(screen.queryByText('Test helper text')).not.toBeInTheDocument();
+})
+
+test('Renders passed helper text', () => {
+  render(<Progress helperText="Test helper text" />);
+
+  expect(screen.getByText('Test helper text')).toBeVisible();
+});

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ProgressHelperText } from '../ProgressHelperText';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ProgressHelperText />
+    </div>
+  );
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ProgressHelperText>Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+  render(<ProgressHelperText>Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-progress__helper-text');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ProgressHelperText aria-label="Test label">Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ProgressHelperText>test</ProgressHelperText>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Progress/__tests__/__snapshots__/ProgressHelperText.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-progress__helper-text"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Progress/examples/Progress.md

@@ -74,3 +74,7 @@ propComponents: ['Progress']
 ### Title outside of progress bar
 ```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
 ```
+
+### Helper text
+```ts file="./ProgressHelperText.tsx" isBeta
+```

package/src/components/Progress/examples/ProgressHelperText.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Progress, ProgressProps, HelperText, HelperTextItem, Radio } from '@patternfly/react-core';
+
+export const ProgressHelperText: React.FunctionComponent = () => {
+  type ProgressVariant = ProgressProps['variant'];
+
+  const [selectedVariant, setSelectedVariant] = React.useState<ProgressVariant>(undefined);
+
+  const progressVariants: ProgressVariant[] = [undefined, 'success', 'warning', 'danger'];
+
+  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
+  const formatVariantName = (variant: ProgressVariant) => (variant ? capitalize(variant) : 'Default');
+
+  const variantOptions = progressVariants.map(variant => (
+    <Radio
+      id={`progress-helper-text-${variant}-selector`}
+      label={`${formatVariantName(variant)} variant`}
+      isChecked={variant === selectedVariant}
+      onChange={() => setSelectedVariant(variant)}
+      key={formatVariantName(variant)}
+      name="Progress variant options"
+    />
+  ));
+
+  const helperTextVariant = selectedVariant === 'danger' ? 'error' : selectedVariant;
+
+  const helperText = (
+    <HelperText>
+      <HelperTextItem variant={helperTextVariant}>
+        {`${formatVariantName(selectedVariant)} variant is being displayed`}
+      </HelperTextItem>
+    </HelperText>
+  );
+
+  return (
+    <>
+      {variantOptions}
+      <br />
+      <Progress value={33} title="Title" helperText={helperText} variant={selectedVariant} />
+    </>
+  );
+};

package/src/components/SearchInput/SearchInput.tsx

@@ -119,6 +119,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   previousNavigationButtonAriaLabel?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the advanced search form when appendTo is not inline. */
+  zIndex?: number;
   /** Label for the button which resets the advanced search form and clears the search input. */
   resetButtonLabel?: string;
   /** The number of search results returned. Either a total number of results,
@@ -160,6 +162,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   isDisabled = false,
   appendTo,
   removeFindDomNode = false,
+  zIndex = 9999,
   type = 'text',
   ...props
 }: SearchInputProps) => {
@@ -416,6 +419,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             enableFlip={true}
             appendTo={() => appendTo || searchInputRef.current}
             removeFindDomNode={removeFindDomNode}
+            zIndex={zIndex}
           />
         </div>
       );

package/src/components/Select/Select.tsx

@@ -186,6 +186,8 @@ export interface SelectProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the select menu when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -267,7 +269,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isCreateSelectOptionObject: false,
     shouldResetOnSelect: true,
     isFlipEnabled: true,
-    removeFindDomNode: false
+    removeFindDomNode: false,
+    zIndex: 9999
   };
 
   state: SelectState = {
@@ -1034,6 +1037,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       shouldResetOnSelect,
       isFlipEnabled,
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
     const {
@@ -1478,6 +1482,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                 isVisible={isOpen}
                 removeFindDomNode={removeFindDomNode}
+                zIndex={zIndex}
               />
             )}
           </SelectContext.Provider>

package/src/components/Tabs/OverflowTab.tsx

@@ -21,6 +21,8 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   toggleAriaLabel?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the overflow tab */
+  zIndex?: number;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
@@ -30,6 +32,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   defaultTitleText = 'More',
   toggleAriaLabel,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: OverflowTabProps) => {
   const menuRef = React.useRef<HTMLDivElement>();
@@ -139,6 +142,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
       popperMatchesTriggerWidth={false}
       appendTo={overflowLIRef.current}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
     />
   );
 };

package/src/components/TimePicker/TimePicker.tsx

@@ -73,6 +73,8 @@ export interface TimePickerProps
   setIsOpen?: (isOpen?: boolean) => void;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the time picker */
+  zIndex?: number;
 }
 
 interface TimePickerState {
@@ -111,7 +113,8 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     maxTime: '',
     isOpen: false,
     setIsOpen: () => {},
-    removeFindDomNode: false
+    removeFindDomNode: false,
+    zIndex: 9999
   };
 
   constructor(props: TimePickerProps) {
@@ -461,6 +464,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       includeSeconds,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
     const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
@@ -535,6 +539,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
                   popper={menuContainer}
                   isVisible={isTimeOptionsOpen}
                   removeFindDomNode={removeFindDomNode}
+                  zIndex={zIndex}
                 />
               </div>
             </div>

package/src/next/components/Dropdown/Dropdown.tsx

@@ -30,6 +30,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** z-index of the dropdown menu */
+  zIndex?: number;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -45,6 +47,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   innerRef,
   ouiaId,
   ouiaSafe = true,
+  zIndex = 9999,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -119,6 +122,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
+        zIndex={zIndex}
       />
     </div>
   );

package/src/next/components/Select/Select.tsx

@@ -26,6 +26,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   minWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLDivElement>;
+  /** z-index of the select menu */
+  zIndex?: number;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -39,6 +41,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   isPlain,
   minWidth,
   innerRef,
+  zIndex = 9999,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -117,6 +120,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
+        zIndex={zIndex}
       />
     </div>
   );