@patternfly/react-core 4.222.1 → 4.222.4

package/dist/umd/react-core.css

@@ -11978,10 +11978,6 @@ ul.pf-c-list {
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
 
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
-
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -12024,7 +12020,7 @@ ul.pf-c-list {
 
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 

package/dist/umd/react-core.js

@@ -7632,7 +7632,8 @@
                         typeaheadFilteredChildren =
                             typeaheadInputValue.toString() !== ''
                                 ? React__namespace.Children.map(children, group => {
-                                    if (React__namespace.isValidElement(group) && group.type === SelectGroup) {
+                                    if (React__namespace.isValidElement(group) &&
+                                        group.type === SelectGroup) {
                                         const filteredGroupChildren = React__namespace.Children.toArray(group.props.children).filter(childFilter);
                                         if (filteredGroupChildren.length > 0) {
                                             return React__namespace.cloneElement(group, {
@@ -11654,18 +11655,19 @@
             const { availableOptions, chosenOptions, chosenOptionsSelected, availableOptionsSelected, chosenTreeOptionsChecked, availableTreeOptionsChecked } = this.state;
             const availableOptionsStatusToDisplay = availableOptionsStatus ||
                 (isTree
-                    ? `${filterFolders(availableOptions, availableTreeOptionsChecked).length} of ${flattenTree(availableOptions).length} items selected`
+                    ? `${filterFolders(availableOptions, availableTreeOptionsChecked)
+                    .length} of ${flattenTree(availableOptions).length} items selected`
                     : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
             const chosenOptionsStatusToDisplay = chosenOptionsStatus ||
                 (isTree
                     ? `${filterFolders(chosenOptions, chosenTreeOptionsChecked).length} of ${flattenTree(chosenOptions).length} items selected`
                     : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
-            const available = isTree
+            const available = (isTree
                 ? availableOptions.map(item => this.mapChecked(item, false))
-                : availableOptions;
-            const chosen = isTree
+                : availableOptions);
+            const chosen = (isTree
                 ? chosenOptions.map(item => this.mapChecked(item, true))
-                : chosenOptions;
+                : chosenOptions);
             return (React__namespace.createElement(DualListSelectorContext.Provider, { value: { isTree } },
                 React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelector, className), id: id }, props), children === '' ? (React__namespace.createElement(React__namespace.Fragment, null,
                     React__namespace.createElement(DualListSelectorPane, { isSearchable: isSearchable, onFilterUpdate: this.onFilterUpdate, searchInputAriaLabel: availableOptionsSearchAriaLabel, filterOption: filterOption, onSearchInputChanged: onAvailableOptionsSearchInputChanged, status: availableOptionsStatusToDisplay, title: availableOptionsTitle, options: available, selectedOptions: isTree ? availableTreeOptionsChecked : availableOptionsSelected, onOptionSelect: this.onOptionSelect, onOptionCheck: (e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false), actions: availableOptionsActions, id: `${id}-available-pane`, isDisabled: isDisabled }),

package/dist/umd/react-core.min.css

@@ -11978,10 +11978,6 @@ ul.pf-c-list {
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
 
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
-
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -12024,7 +12020,7 @@ ul.pf-c-list {
 
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.1",
+  "version": "4.222.4",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.1",
-    "@patternfly/react-styles": "^4.72.1",
-    "@patternfly/react-tokens": "^4.74.1",
+    "@patternfly/react-icons": "^4.73.4",
+    "@patternfly/react-styles": "^4.72.4",
+    "@patternfly/react-tokens": "^4.74.4",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.196.7",
+    "@patternfly/patternfly": "4.196.8",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "badaa87b0f9005b2daf2a64636260131cc053159"
+  "gitHead": "308f2c66a19104f4a1b0f56da3b4df95d7a2d919"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -144,6 +144,6 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
         {...props}
       />,
       container
-    );
+    ) as React.ReactElement;
   }
 }

package/src/components/DualListSelector/DualListSelector.tsx

@@ -134,10 +134,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
   private removeAllButtonRef = React.createRef<HTMLButtonElement>();
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    availableOptions: [] as React.ReactNode[],
+    availableOptions: [],
     availableOptionsTitle: 'Available options',
     availableOptionsSearchAriaLabel: 'Available search input',
-    chosenOptions: [] as React.ReactNode[],
+    chosenOptions: [],
     chosenOptionsTitle: 'Chosen options',
     chosenOptionsSearchAriaLabel: 'Chosen search input',
     id: getUniqueId('dual-list-selector'),
@@ -177,11 +177,11 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
   constructor(props: DualListSelectorProps) {
     super(props);
     this.state = {
-      availableOptions: [...this.props.availableOptions],
+      availableOptions: [...this.props.availableOptions] as React.ReactNode[],
       availableOptionsSelected: [],
       availableFilteredOptions: null,
       availableTreeFilteredOptions: null,
-      chosenOptions: [...this.props.chosenOptions],
+      chosenOptions: [...this.props.chosenOptions] as React.ReactNode[],
       chosenOptionsSelected: [],
       chosenFilteredOptions: null,
       chosenTreeFilteredOptions: null,
@@ -208,8 +208,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         JSON.stringify(this.state.chosenOptions, this.replacer)
     ) {
       this.setState({
-        availableOptions: [...this.props.availableOptions],
-        chosenOptions: [...this.props.chosenOptions]
+        availableOptions: [...this.props.availableOptions] as React.ReactNode[],
+        chosenOptions: [...this.props.chosenOptions] as React.ReactNode[]
       });
     }
   }
@@ -226,7 +226,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       }
       if (isTree) {
         this.setState({
-          availableTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
+          availableTreeFilteredOptions: flattenTreeWithFolders(
+            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+          )
         });
       } else {
         this.setState({
@@ -243,7 +245,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       }
       if (isTree) {
         this.setState({
-          chosenTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
+          chosenTreeFilteredOptions: flattenTreeWithFolders(
+            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+          )
         });
       } else {
         this.setState({
@@ -283,16 +287,20 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     this.setState(prevState => {
       const movedOptions =
         prevState.availableTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.availableOptions as DualListSelectorTreeItemData[]);
+        flattenTreeWithFolders((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const newAvailable = prevState.availableOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
+        .filter(item =>
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions)
+        ) as React.ReactNode[];
 
-      const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+      const currChosen = flattenTree((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(movedOptions);
       const newChosen = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
+        ) as React.ReactNode[];
 
       this.props.addAll && this.props.addAll(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -339,15 +347,17 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       const newAvailable = prevState.availableOptions
         .map(opt => Object.assign({}, opt))
         .filter(item =>
-          filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
         );
 
       // Get next chosen options from current + new nodes and remap from base
-      const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+      const currChosen = flattenTree((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
       const newChosen = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
+        ) as React.ReactNode[];
 
       this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -391,16 +401,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     this.setState(prevState => {
       const movedOptions =
         prevState.chosenTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+        flattenTreeWithFolders((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
 
       const newChosen = prevState.chosenOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
-      const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
+        .filter(item => filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions));
+      const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(movedOptions);
       const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
+        ) as React.ReactNode[];
 
       this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -444,14 +456,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       // Remove selected chosen nodes from current chosen nodes
       const newChosen = prevState.chosenOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked));
+        .filter(item =>
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked)
+        );
 
       // Get next chosen options from current and remap from base
-      const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
+      const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
       const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
+        ) as React.ReactNode[];
 
       this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -542,7 +558,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         panelOptions = chosenOptions
           .map(opt => Object.assign({}, opt))
           .filter(item =>
-            filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
+            filterTreeItemsWithoutFolders((item as unknown) as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
           );
       } else {
         panelOptions = chosenOptions;
@@ -552,7 +568,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         panelOptions = availableOptions
           .map(opt => Object.assign({}, opt))
           .filter(item =>
-            filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, availableTreeFilteredOptions)
+            filterTreeItemsWithoutFolders(
+              (item as unknown) as DualListSelectorTreeItemData,
+              availableTreeFilteredOptions
+            )
           );
       } else {
         panelOptions = availableOptions;
@@ -560,8 +579,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     }
     const checkedOptionTree = panelOptions
       .map(opt => Object.assign({}, opt))
-      .filter(item => filterTreeItems(item as DualListSelectorTreeItemData, [itemData.id]));
-    const flatTree = flattenTreeWithFolders(checkedOptionTree as DualListSelectorTreeItemData[]);
+      .filter(item => filterTreeItems((item as unknown) as DualListSelectorTreeItemData, [itemData.id]));
+    const flatTree = flattenTreeWithFolders((checkedOptionTree as unknown) as DualListSelectorTreeItemData[]);
 
     const prevChecked = isChosen ? this.state.chosenTreeOptionsChecked : this.state.availableTreeOptionsChecked;
     let updatedChecked = [] as string[];
@@ -638,23 +657,24 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       availableOptionsStatus ||
       (isTree
         ? `${
-            filterFolders(availableOptions as DualListSelectorTreeItemData[], availableTreeOptionsChecked).length
-          } of ${flattenTree(availableOptions as DualListSelectorTreeItemData[]).length} items selected`
+            filterFolders((availableOptions as unknown) as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
+              .length
+          } of ${flattenTree((availableOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
         : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
     const chosenOptionsStatusToDisplay =
       chosenOptionsStatus ||
       (isTree
-        ? `${filterFolders(chosenOptions as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length} of ${
-            flattenTree(chosenOptions as DualListSelectorTreeItemData[]).length
-          } items selected`
+        ? `${
+            filterFolders((chosenOptions as unknown) as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length
+          } of ${flattenTree((chosenOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
         : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
 
-    const available = isTree
-      ? availableOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, false))
-      : availableOptions;
-    const chosen = isTree
-      ? chosenOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, true))
-      : chosenOptions;
+    const available = (isTree
+      ? availableOptions.map(item => this.mapChecked((item as unknown) as DualListSelectorTreeItemData, false))
+      : availableOptions) as React.ReactNode[];
+    const chosen = (isTree
+      ? chosenOptions.map(item => this.mapChecked((item as unknown) as DualListSelectorTreeItemData, true))
+      : chosenOptions) as React.ReactNode[];
 
     return (
       <DualListSelectorContext.Provider value={{ isTree }}>

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -70,7 +70,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   onOptionSelect,
   onOptionCheck,
   title = '',
-  options = [] as React.ReactNode[],
+  options = [],
   selectedOptions = [],
   isSearchable = false,
   searchInputAriaLabel = '',
@@ -87,11 +87,11 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   // only called when search input is dynamically built
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    let filtered;
+    let filtered: React.ReactNode[];
     if (isTree) {
-      filtered = (options as DualListSelectorTreeItemData[])
+      filtered = options
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterInput(item as DualListSelectorTreeItemData, newValue));
+        .filter(item => filterInput((item as unknown) as DualListSelectorTreeItemData, newValue));
     } else {
       filtered = options.filter(option => {
         if (displayOption(option)) {
@@ -110,7 +110,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   // only called when options are passed via options prop and isTree === true
   const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
     if (filterOption) {
-      return filterOption(item, input);
+      return filterOption((item as unknown) as React.ReactNode, input);
     } else {
       if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
         return true;
@@ -200,10 +200,12 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <DualListSelectorTree
                   data={
                     isSearchable
-                      ? (options as DualListSelectorTreeItemData[])
+                      ? ((options
                           .map(opt => Object.assign({}, opt))
-                          .filter(item => filterInput(item as DualListSelectorTreeItemData, input))
-                      : (options as DualListSelectorTreeItemData[])
+                          .filter(item =>
+                            filterInput((item as unknown) as DualListSelectorTreeItemData, input)
+                          ) as unknown) as DualListSelectorTreeItemData[])
+                      : ((options as unknown) as DualListSelectorTreeItemData[])
                   }
                   onOptionCheck={onOptionCheck}
                   id={`${id}-tree`}

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'
 ```