@patternfly/react-core 4.221.17 → 4.222.2

package/src/components/InputGroup/examples/InputGroup.md

@@ -8,256 +8,24 @@ import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import {
-  Button,
-  ButtonVariant,
-  TextArea,
-  InputGroup,
-  InputGroupText,
-  TextInput,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  Popover,
-  PopoverPosition
-} from '@patternfly/react-core';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
-import {
-  Button,
-  InputGroup,
-  InputGroupText,
-  InputGroupTextVariant,
-  TextInput,
-  ValidatedOptions
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <TextInput id="textInput6" type="email" aria-label="email input field" />
-          <InputGroupText id="email-example">@example.com</InputGroupText>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <InputGroupText id="username">
-            <AtIcon />
-          </InputGroupText>
-          <TextInput validated={ValidatedOptions.error} id="textInput7" type="email" aria-label="Error state username example" />
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
-          <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>%</InputGroupText>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupBasic.tsx'
 ```
 
 ### With textarea
-```js
-import React from 'react';
-import {
-  Button,
-  TextArea,
-  InputGroup
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
-          <Button id="textAreaButton2" variant="control">
-            Button
-          </Button>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupWithTextarea.tsx'
 ```
 
 ### With dropdown
-```js
-import React from 'react';
-import {
-  Button,
-  InputGroup,
-  TextInput,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      selected: ''
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: false,
-        selected: event.currentTarget.value
-      });
-    };
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <Dropdown
-            onSelect={this.onSelect}
-            toggle={
-              <DropdownToggle onToggle={this.onToggle}>
-                {this.state.selected ? this.state.selected : 'Dropdown'}
-              </DropdownToggle>
-            }
-            isOpen={this.state.isOpen}
-            dropdownItems={[
-              <DropdownItem key="opt-1" value="Option 1" component="button">
-                Option 1
-              </DropdownItem>,
-              <DropdownItem key="opt-2" value="Option 2" component="button">
-                Option 2
-              </DropdownItem>,
-              <DropdownItem key="opt-3" value="Option 3" component="button">
-                Option 3
-              </DropdownItem>
-            ]}
-          />
-          <TextInput id="textInput3" aria-label="input with dropdown and button" />
-          <Button id="inputDropdownButton1" variant="control">Button</Button>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupWithDropdown.tsx'
 ```
 
 ### With popover
-```js
-import React from 'react';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import {
-  Button,
-  InputGroup,
-  TextInput,
-  Popover,
-  PopoverPosition
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
-          <Popover
-            aria-label="popover example"
-            position={PopoverPosition.top}
-            bodyContent="This field is an example of an input group with a popover."
-          >
-            <Button variant="control" aria-label="popover for input">
-              <QuestionCircleIcon />
-            </Button>
-          </Popover>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
-          <Popover
-            aria-label="popover example"
-            position={PopoverPosition.top}
-            bodyContent="This field is an example of an input group with a popover."
-          >
-            <Button variant="plain" aria-label="Popover for input">
-              <QuestionCircleIcon />
-            </Button>
-          </Popover>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file ='./InputGroupWithPopover.tsx'
 ```
 
-
 ### With multiple group siblings
-```js
-import React from 'react';
-import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import {
-  Button,
-  TextArea,
-  InputGroup,
-  InputGroupText,
-  TextInput
-} from '@patternfly/react-core';
-
-class SimpleInputGroups extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <InputGroup>
-          <Button id="textAreaButton1" variant="control">
-            Button
-          </Button>
-          <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
-          <Button variant="control">Button</Button>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <Button id="textAreaButton3" variant="control">
-            Button
-          </Button>
-          <Button variant="control">Button</Button>
-          <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
-          <Button variant="control">Button</Button>
-        </InputGroup>
-        <br />
-        <InputGroup>
-          <InputGroupText>
-            <DollarSignIcon />
-          </InputGroupText>
-          <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
-          <InputGroupText>.00</InputGroupText>
-        </InputGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./InputGroupWithSiblings.tsx'
 ```

package/src/components/InputGroup/examples/InputGroupBasic.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
+import { InputGroup, InputGroupText, InputGroupTextVariant, TextInput, ValidatedOptions } from '@patternfly/react-core';
+
+export const InputGroupBasic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextInput id="textInput6" type="email" aria-label="email input field" />
+      <InputGroupText id="email-example">@example.com</InputGroupText>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <InputGroupText id="username">
+        <AtIcon />
+      </InputGroupText>
+      <TextInput
+        validated={ValidatedOptions.error}
+        id="textInput7"
+        type="email"
+        aria-label="Error state username example"
+      />
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
+      <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
+        %
+      </InputGroupText>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+
+export const InputGroupWithDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="opt-1" value="Option 1" component="button">
+      Option 1
+    </DropdownItem>,
+    <DropdownItem key="opt-2" value="Option 2" component="button">
+      Option 2
+    </DropdownItem>,
+    <DropdownItem key="opt-3" value="Option 3" component="button">
+      Option 3
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <InputGroup>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
+          isOpen={isOpen}
+          dropdownItems={dropdownItems}
+        />
+        <TextInput id="textInput3" aria-label="input with dropdown and button" />
+        <Button id="inputDropdownButton1" variant="control">
+          Button
+        </Button>
+      </InputGroup>
+    </React.Fragment>
+  );
+};

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
+
+export const InputGroupWithPopover: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
+      <Popover
+        aria-label="popover example"
+        position={PopoverPosition.top}
+        bodyContent="This field is an example of an input group with a popover."
+      >
+        <Button variant="control" aria-label="popover for input">
+          <QuestionCircleIcon />
+        </Button>
+      </Popover>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
+      <Popover
+        aria-label="popover example"
+        position={PopoverPosition.top}
+        bodyContent="This field is an example of an input group with a popover."
+      >
+        <Button variant="plain" aria-label="Popover for input">
+          <QuestionCircleIcon />
+        </Button>
+      </Popover>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
+import { Button, TextArea, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+
+export const InputGroupWithSiblings: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <Button id="textAreaButton1" variant="control">
+        Button
+      </Button>
+      <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
+      <Button variant="control">Button</Button>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <Button id="textAreaButton3" variant="control">
+        Button
+      </Button>
+      <Button variant="control">Button</Button>
+      <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
+      <Button variant="control">Button</Button>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <InputGroupText>
+        <DollarSignIcon />
+      </InputGroupText>
+      <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
+      <InputGroupText>.00</InputGroupText>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/InputGroup/examples/InputGroupWithTextarea.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, TextArea, InputGroup } from '@patternfly/react-core';
+
+export const InputGroupWithTextarea: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
+      <Button id="textAreaButton2" variant="control">
+        Button
+      </Button>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/Select/Select.tsx

@@ -297,11 +297,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       this.setState({ viewMoreNextIndex: -1 });
     }
 
-    const hasUpdatedChildren =
-      prevProps.children.length !== this.props.children.length ||
-      prevProps.children.some((prevChild: React.ReactElement, index: number) => {
+    const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
+      prevChildren.some((prevChild: React.ReactElement, index: number) => {
         const prevChildProps = prevChild.props;
-        const currChild = this.props.children[index];
+        const currChild = currChildren[index];
         const { props: currChildProps } = currChild;
 
         if (prevChildProps && currChildProps) {
@@ -316,6 +315,19 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         }
       });
 
+    const hasUpdatedChildren =
+      prevProps.children.length !== this.props.children.length ||
+      checkUpdatedChildren(prevProps.children, this.props.children) ||
+      (this.props.isGrouped &&
+        prevProps.children.some(
+          (prevChild: React.ReactElement, index: number) =>
+            prevChild.type === SelectGroup &&
+            prevChild.props.children &&
+            this.props.children[index].props.children &&
+            (prevChild.props.children.length !== this.props.children[index].props.children.length ||
+              checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
+        ));
+
     if (hasUpdatedChildren) {
       this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
     }