@patternfly/react-core 4.258.7 → 4.259.0

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox, TextArea } from '@patternfly/react-core';
+
+export const TextAreaReadOnly: React.FunctionComponent = () => {
+  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>
+  );
+};

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

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+
+export const TextAreaValidated: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must have something to say');
+  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const simulateNetworkCall = (callback: Function) => {
+    setTimeout(callback, 2000);
+  };
+
+  const handleTextAreaChange = (value: string) => {
+    setValue(value);
+    setValidated('default');
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value.length > 0) {
+        if (value.length >= 10) {
+          setValidated('success');
+          setHelperText('Thanks for your comments!');
+        } else {
+          setValidated('error');
+          setInvalidText("You're being too brief, please enter at least 10 characters.");
+        }
+      } else {
+        setValidated('warning');
+        setHelperText('You must have something to say');
+      }
+    });
+  };
+  return (
+    <Form>
+      <FormGroup
+        label="Comments:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <TextArea
+          value={value}
+          onChange={value => handleTextAreaChange(value)}
+          isRequired
+          validated={validated}
+          aria-label="invalid text area example"
+        />
+      </FormGroup>
+    </Form>
+  );
+};

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

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

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

@@ -14,207 +14,21 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
 ## Examples
 
 ### Default with multiple selectable
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
-
-class DefaultToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        first: false,
-        second: false,
-        disableAll: false
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-    this.disableAllClick = () => {
-      this.setState(prevState => ({ disableAll: !prevState.disableAll }));
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <Button onClick={this.disableAllClick}>
-            {this.state.disableAll ? "Enable back" : "Disable all"}
-          </Button>
-        </StackItem>
-        <StackItem>
-          <ToggleGroup areAllGroupsDisabled={this.state.disableAll} aria-label="Default with multiple selectable">
-            <ToggleGroupItem text="Option 1" key={0} buttonId="first" isSelected={isSelected.first} onChange={this.handleItemClick} />
-            <ToggleGroupItem text="Option 2" key={1} buttonId="second" isSelected={isSelected.second} onChange={this.handleItemClick} />
-            <ToggleGroupItem text="Option 3" key={2} isDisabled/>
-          </ToggleGroup>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="./ToggleGroupDefaultMultiple.tsx"
 ```
 
 ### Default with single selectable
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-
-class DefaultAsRadioToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: ""
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState({ isSelected: id });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem text="Option 1" buttonId="firstRadio" isSelected={isSelected === "firstRadio"} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 2" buttonId="secondRadio" isSelected={isSelected === "secondRadio"} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 3" buttonId="thirdRadio" isSelected={isSelected === "thirdRadio"} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupDefaultSingle.tsx"
 ```
 
 ### Icons
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
-
-class IconToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "icons-1": false,
-        "icons-2": false,
-        "icons-3": true
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-    return (
-      <ToggleGroup aria-label="Icon variant toggle group">
-        <ToggleGroupItem icon={<CopyIcon />} aria-label="copy icon button" buttonId="icons-1" isSelected={isSelected["icons-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<UndoIcon />} aria-label="undo icon button" buttonId="icons-2" isSelected={isSelected["icons-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<ShareSquareIcon />} aria-label="share square icon button" buttonId="icons-3" isSelected={isSelected["icons-3"]} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupIcon.tsx"
 ```
 
 ### Text and icons
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
-
-class TextIconToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "text-icons-1": false,
-        "text-icons-2": false,
-        "text-icons-3": true
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-    return (
-      <ToggleGroup aria-label="Icon variant toggle group">
-        <ToggleGroupItem icon={<CopyIcon />} text="Copy" aria-label="copy icon button" buttonId="text-icons-1" isSelected={isSelected["text-icons-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<UndoIcon />} text="Undo" aria-label="undo icon button" buttonId="text-icons-2" isSelected={isSelected["text-icons-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<ShareSquareIcon />} text="Share" aria-label="share square icon button" buttonId="text-icons-3" isSelected={isSelected["text-icons-3"]} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupTextIcon.tsx"
 ```
 
 ### Compact variant
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem, ToggleGroupVariant } from '@patternfly/react-core';
-
-class CompactToggleGroupExample extends React.Component {
-constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "compact-1": false,
-        "compact-2": false
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <ToggleGroup isCompact aria-label="Compact variant toggle group">
-        <ToggleGroupItem text="Option 1" buttonId="compact-1" isSelected={isSelected["compact-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 2" buttonId="compact-2" isSelected={isSelected["compact-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 3" isDisabled />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupCompact.tsx"
 ```

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupCompact: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-compact-1': false,
+    'toggle-group-compact-2': false
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup isCompact aria-label="Compact variant toggle group">
+      <ToggleGroupItem
+        text="Option 1"
+        buttonId="toggle-group-compact-1"
+        isSelected={isSelected['toggle-group-compact-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 2"
+        buttonId="toggle-group-compact-2"
+        isSelected={isSelected['toggle-group-compact-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem text="Option 3" isDisabled />
+    </ToggleGroup>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
+
+export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-multiple-1': false,
+    'toggle-group-multiple-2': false
+  });
+  const [disableAll, setDisableAll] = React.useState(false);
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  const disableAllClick = () => {
+    setDisableAll(!disableAll);
+  };
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
+      </StackItem>
+      <StackItem>
+        <ToggleGroup areAllGroupsDisabled={disableAll} aria-label="Default with multiple selectable">
+          <ToggleGroupItem
+            text="Option 1"
+            key={0}
+            buttonId="toggle-group-multiple-1"
+            isSelected={isSelected['toggle-group-multiple-1']}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem
+            text="Option 2"
+            key={1}
+            buttonId="toggle-group-multiple-2"
+            isSelected={isSelected['toggle-group-multiple-2']}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem text="Option 3" key={2} isDisabled />
+        </ToggleGroup>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState('');
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(id);
+  };
+  return (
+    <ToggleGroup aria-label="Default with single selectable">
+      <ToggleGroupItem
+        text="Option 1"
+        buttonId="toggle-group-single-1"
+        isSelected={isSelected === 'toggle-group-single-1'}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 2"
+        buttonId="toggle-group-single-2"
+        isSelected={isSelected === 'toggle-group-single-2'}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 3"
+        buttonId="toggle-group-single-3"
+        isSelected={isSelected === 'toggle-group-single-3'}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+
+export const ToggleGroupIcon: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-icons-1': false,
+    'toggle-group-icons-2': false,
+    'toggle-group-icons-3': true
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup aria-label="Icon variant toggle group">
+      <ToggleGroupItem
+        icon={<CopyIcon />}
+        aria-label="copy"
+        buttonId="toggle-group-icons-1"
+        isSelected={isSelected['toggle-group-icons-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<UndoIcon />}
+        aria-label="undo"
+        buttonId="toggle-group-icons-2"
+        isSelected={isSelected['toggle-group-icons-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<ShareSquareIcon />}
+        aria-label="share square"
+        buttonId="toggle-group-icons-3"
+        isSelected={isSelected['toggle-group-icons-3']}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+
+export const ToggleGroupIcon: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'text-icons-1': false,
+    'text-icons-2': false,
+    'text-icons-3': true
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup aria-label="Text and icon toggle group">
+      <ToggleGroupItem
+        icon={<CopyIcon />}
+        text="Copy"
+        buttonId="toggle-group-text-icons-1"
+        isSelected={isSelected['toggle-group-text-icons-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<UndoIcon />}
+        text="Undo"
+        buttonId="toggle-group-text-icons-2"
+        isSelected={isSelected['toggle-group-text-icons-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<ShareSquareIcon />}
+        text="Share"
+        buttonId="toggle-group-text-icons-3"
+        isSelected={isSelected['toggle-group-text-icons-3']}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};

package/src/demos/Card/Card.md

@@ -426,11 +426,12 @@ class CardViewBasic extends React.Component {
                 aria-label={anySelected ? 'Deselect all' : 'Select all'}
                 isChecked={areAllSelected}
                 onClick={this.splitCheckboxSelectAll.bind(this)}
-              ></DropdownToggleCheckbox>
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
           >
-            {numSelected !== 0 && <React.Fragment>{numSelected} selected</React.Fragment>}
           </DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}

package/src/demos/PrimaryDetail.md

@@ -1369,14 +1369,12 @@ class PrimaryDetailCardView extends React.Component {
                 aria-label={anySelected ? 'Deselect all' : 'Select all'}
                 isChecked={areAllSelected}
                 onClick={this.splitCheckboxSelectAll}
-              ></DropdownToggleCheckbox>
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
-          >
-            {numSelected !== 0 && (
-              <React.Fragment>{allSelected ? this.state.totalItemCount : numSelected} selected</React.Fragment>
-            )}
-          </DropdownToggle>
+          ></DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}
         dropdownItems={splitButtonDropdownItems}

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