@patternfly/react-core 4.258.7 → 4.259.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.7",
+  "version": "4.259.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": "69c78cfc668577eb1b005710b0c77522cbabe9c6"
+  "gitHead": "7db13002a4532f26aa6982731a25c208224ae8da"
 }

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/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/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/TextArea/examples/TextArea.md

@@ -9,300 +9,52 @@ propComponents: ['TextArea']
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class SimpleTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return <TextArea value={value} onChange={this.handleTextAreaChange} aria-label="text area example" />;
-  }
-}
+```ts file="./TextAreaBasic.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleInvalidTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleInvalidTextAreaChange}
-        isRequired
-        validated={'error'}
-        aria-label="invalid text area example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaInvalid.tsx"
 ```
 
 ### Validated
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must have something to say',
-      validated: 'default',
-      helperText: 'Share your thoughts.'
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState(
-        {
-          value,
-          validated: 'default',
-          helperText: 'Validating...'
-        },
-        this.simulateNetworkCall(() => {
-          if (value && value.length > 0) {
-            if (value.length >= 10) {
-              this.setState({ validated: 'success', helperText: 'Thanks for your comments!' });
-            } else {
-              this.setState({
-                validated: 'error',
-                invalidText: 'Your being too brief, please enter at least 10 characters.'
-              });
-            }
-          } else {
-            this.setState({ validated: 'warning', helperText: 'You must have something to say' });
-          }
-        })
-      );
-    };
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Comments:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <TextArea
-            value={value}
-            onChange={this.handleTextAreaChange}
-            isRequired
-            validated={validated}
-            aria-label="invalid text area example"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./TextAreaValidated.tsx"
 ```
 
-### Vertically resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
+### Vertically resizable
 
-class VerticalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="vertical"
-        aria-label="text vertical resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaVerticallyResizable.tsx"
 ```
 
-### Horizontally resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class HorizontalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
+### Horizontally resizable
 
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="horizontal"
-        aria-label="text horizontal resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaHorizontallyResizable.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />;
+```ts file="./TextAreaUncontrolled.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="disabled text area example" isDisabled />;
+```ts file="./TextAreaDisabled.tsx"
 ```
 
 ### Read only
 
-```js
-import React from 'react';
-import { Checkbox, TextArea } from '@patternfly/react-core';
-
-const ReadOnlyTextArea = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
-
-  return (
-    <React.Fragment>
-      <div style={{ marginBottom: '12px' }}>
-        <Checkbox
-          id="isPlain"
-          key="isPlain"
-          label="Plain read only variant"
-          isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
-        />
-      </div>
-      <TextArea
-        aria-label="read only text area example"
-        value="read only text area example"
-        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
-      />
-    </React.Fragment>
-  );
-};
+```ts file="./TextAreaReadOnly.tsx"
 ```
 
 ### Auto resizing
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="auto resizing text area example" autoResize />;
+```ts file="./TextAreaAutoResizing.tsx"
 ```
 
 ### Icon sprite variants
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-IconSpriteTextArea = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={ValidatedOptions.success}
-        isIconSprite
-        type="text"
-        onChange={value => setSuccess(value)}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.warning}
-        isIconSprite
-        type="text"
-        onChange={value => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.error}
-        isIconSprite
-        type="text"
-        onChange={value => setError(value)}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};
+```ts isBeta file="./TextAreaIconSprite.tsx"
 ```

package/src/components/TextArea/examples/TextAreaAutoResizing.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaAutoResizing: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      aria-label="auto resizing text area example"
+      autoResize
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaBasic.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return <TextArea value={value} onChange={value => setValue(value)} aria-label="text area example" />;
+};

package/src/components/TextArea/examples/TextAreaDisabled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaDisabled: React.FunctionComponent = () => (
+  <TextArea aria-label="disabled text area example" isDisabled />
+);

package/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="horizontal"
+      aria-label="text area horizontal resize example"
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaIconSprite.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaIconSprite: React.FunctionComponent = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={'success'}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        value={success}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'warning'}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        value={warning}
+        aria-label="warning icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'error'}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        value={error}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};

package/src/components/TextArea/examples/TextAreaInvalid.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaInvalid: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      isRequired
+      validated={'error'}
+      aria-label="invalid text area example"
+    />
+  );
+};