@patternfly/react-core 5.0.0-alpha.3 → 5.0.0-alpha.30

package/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -8,13 +8,20 @@ import {
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
   DualListSelectorControl,
-  SearchInput
+  SearchInput,
+  Title,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Option {
   text: string;
@@ -86,25 +93,23 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     }
   };
 
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => {
-    const onChange = (value: string) => {
-      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toFilter.forEach(option => {
-        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-      });
-    };
-
-    return (
-      <SearchInput
-        value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
-        onClear={() => onChange('')}
-      />
-    );
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach(option => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
   };
 
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
+    />
+  );
+
   // builds a sort control - passed to both dual list selector panes
   const buildSort = (isAvailable: boolean) => {
     const onSort = () => {
@@ -132,6 +137,21 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     );
   };
 
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyStateIcon icon={SearchIcon} />
+      <Title headingLevel="h4" size="md">
+        No results found
+      </Title>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStatePrimary>
+        <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+          Clear all filters
+        </Button>
+      </EmptyStatePrimary>
+    </EmptyState>
+  );
+
   return (
     <DualListSelector>
       <DualListSelectorPane
@@ -141,21 +161,27 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {availableFilter !== '' &&
+          availableOptions.filter(option => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
+        {availableOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-available-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, false)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
@@ -199,21 +225,25 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-chosen-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && buildEmptyState(false)}
+        {chosenOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-chosen-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     </DualListSelector>
   );

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -7,12 +7,20 @@ import {
   DualListSelectorControl,
   DualListSelectorTree,
   DualListSelectorTreeItemData,
-  SearchInput
+  SearchInput,
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface FoodNode {
   id: string;
@@ -161,7 +169,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
 
     return (
-      <SearchInput value={isChosen ? chosenFilter : availableFilter} onChange={onChange} onClear={() => onChange('')} />
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
     );
   };
 
@@ -235,19 +247,37 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
     ).length;
     const status = `${numSelected} of ${numOptions} options selected`;
+    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
     return (
       <DualListSelectorPane
         title={isChosen ? 'Chosen' : 'Available'}
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          <DualListSelectorTree
-            data={options}
-            onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
-          />
-        </DualListSelectorList>
+        {filterApplied && options.length === 0 && (
+          <EmptyState variant={EmptyStateVariant.small}>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md">
+              No results found
+            </Title>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <EmptyStatePrimary>
+              <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                Clear all filters
+              </Button>
+            </EmptyStatePrimary>
+          </EmptyState>
+        )}
+        {options.length > 0 && (
+          <DualListSelectorList>
+            <DualListSelectorTree
+              data={options}
+              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
+            />
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     );
   };

package/src/components/EmptyState/EmptyStatePrimary.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 export interface EmptyStatePrimaryProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the EmptyStatePrimary */
@@ -14,7 +13,7 @@ export const EmptyStatePrimary: React.FunctionComponent<EmptyStatePrimaryProps>
   className = '',
   ...props
 }: EmptyStatePrimaryProps) => (
-  <div className={css(styles.emptyStatePrimary, className)} {...props}>
+  <div className={css(className)} {...props}>
     {children}
   </div>
 );

package/src/components/EmptyState/EmptyStateSecondaryActions.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
-
 export interface EmptyStateSecondaryActionsProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the EmptyState */
   children?: React.ReactNode;
@@ -13,7 +11,7 @@ export const EmptyStateSecondaryActions: React.FunctionComponent<EmptyStateSecon
   className = '',
   ...props
 }: EmptyStateSecondaryActionsProps) => (
-  <div className={css(styles.emptyStateSecondary, className)} {...props}>
+  <div className={css(className)} {...props}>
     {children}
   </div>
 );

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

@@ -70,10 +70,11 @@ describe('EmptyState', () => {
     expect(screen.getByTestId('body-test-id')).toHaveClass('custom-empty-state-body pf-c-empty-state__body');
   });
 
-  test('Secondary Action', () => {
+  // TODO: update this with issue #8555
+  xtest('Secondary Action', () => {
     render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
     expect(screen.getByTestId('actions-test-id')).toHaveClass(
-      'custom-empty-state-secondary pf-c-empty-state__secondary'
+      'pf-c-empty-state__secondary'
     );
   });
 
@@ -96,7 +97,8 @@ describe('EmptyState', () => {
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
-  test('Primary div', () => {
+  // TODO: update this with issue #8555
+  xtest('Primary div', () => {
     render(
       <EmptyStatePrimary data-testid="primary-test-id">
         <Button variant="link">Link</Button>

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
     height="1em"
     role="img"
     style="vertical-align: -0.125em;"
-    viewBox="0 0 448 512"
+    viewBox="0 0 830 1024"
     width="1em"
   >
     <title
@@ -19,7 +19,7 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       string
     </title>
     <path
-      d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
+      d="M0,1024 C7.8,907.1 37.3,664.2 147.8,568.3 C147.8,568.3 207.5,511.5 298.4,511.996718 L530.3,511.996718 C621.3,511.996718 680.9,568.3 680.9,568.3 C680.9,568.3 813.9,680.1 830,1024 L0,1024 Z M639.4,224 C639.4,347.7 539.1,448 415.4,448 C291.7,448 191.4,347.7 191.4,224 C191.4,100.3 291.9,0 415.6,0 C539.3,0 639.4,100.3 639.4,224 L639.4,224 Z"
     />
   </svg>
 </DocumentFragment>

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__primary ''"
+    class="''"
   >
     <div>
       ReactNode

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__secondary ''"
+    class="''"
   >
     ReactNode
   </div>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`EmptyState Main 1`] = `
         New HTTP Proxy
       </button>
       <div
-        class="pf-c-empty-state__secondary"
+        class=""
       >
         <button
           aria-disabled="false"

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,6 +4,8 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
+import { debounce } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
   default = 'default',
@@ -61,6 +63,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
 
 interface ExpandableSectionState {
   isExpanded: boolean;
+  hasToggle: boolean;
+  previousWidth: number;
 }
 
 const setLineClamp = (lines: number, element: HTMLDivElement) => {
@@ -77,11 +81,15 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     super(props);
 
     this.state = {
-      isExpanded: props.isExpanded
+      isExpanded: props.isExpanded,
+      hasToggle: true,
+      previousWidth: undefined
     };
   }
 
   expandableContentRef = React.createRef<HTMLDivElement>();
+  observer: any = () => {};
+
   static defaultProps: PickOptional<ExpandableSectionProps> = {
     className: '',
     toggleText: '',
@@ -114,9 +122,16 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
   }
 
   componentDidMount() {
-    if (this.props.variant === ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
       const expandableContent = this.expandableContentRef.current;
-      setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.setState({ previousWidth: expandableContent.offsetWidth });
+      this.observer = getResizeObserver(expandableContent, this.handleResize, false);
+
+      if (this.props.truncateMaxLines) {
+        setLineClamp(this.props.truncateMaxLines, expandableContent);
+      }
+
+      this.checkToggleVisibility();
     }
   }
 
@@ -127,9 +142,38 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.checkToggleVisibility();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
+      this.observer();
     }
   }
 
+  checkToggleVisibility = () => {
+    if (this.expandableContentRef?.current) {
+      const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
+      const totalLines =
+        this.expandableContentRef.current.scrollHeight /
+        parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+
+      this.setState({
+        hasToggle: totalLines > maxLines
+      });
+    }
+  };
+
+  resize = () => {
+    const { offsetWidth } = this.expandableContentRef.current;
+    if (this.state.previousWidth !== offsetWidth) {
+      this.setState({ previousWidth: offsetWidth });
+      this.checkToggleVisibility();
+    }
+  };
+  handleResize = debounce(this.resize, 250);
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -210,7 +254,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         >
           {children}
         </div>
-        {variant === ExpandableSectionVariant.truncate && expandableToggle}
+        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
       </div>
     );
   }

package/src/components/FileUpload/FileUpload.tsx

@@ -64,7 +64,7 @@ export interface FileUploadProps
   // Props available in FileUpload but not FileUploadField:
 
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneOptions;
+  dropzoneProps?: Partial<DropzoneOptions>;
   /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -89,7 +89,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
           label={stateKey}
           aria-label={stateKey}
           isChecked={checkedState[index]}
-          onChange={checked => handleOnChange(checked, stateKey, index)}
+          onChange={(_event, checked) => handleOnChange(checked, stateKey, index)}
         />
       ))}
       <br />

package/src/components/HelperText/HelperText.tsx

@@ -18,6 +18,8 @@ export interface HelperTextProps extends React.HTMLProps<HTMLDivElement | HTMLUL
    * expect or intend for any helper text items within the container to be dynamically updated.
    */
   isLiveRegion?: boolean;
+  /** Adds an accessible label to the helper text when component is a "ul". */
+  'aria-label'?: string;
 }
 
 export const HelperText: React.FunctionComponent<HelperTextProps> = ({
@@ -26,6 +28,7 @@ export const HelperText: React.FunctionComponent<HelperTextProps> = ({
   component = 'div',
   id,
   isLiveRegion = false,
+  'aria-label': ariaLabel,
   ...props
 }: HelperTextProps) => {
   const Component = component as any;
@@ -34,6 +37,7 @@ export const HelperText: React.FunctionComponent<HelperTextProps> = ({
       id={id}
       className={css(styles.helperText, className)}
       {...(isLiveRegion && { 'aria-live': 'polite' })}
+      {...(component === 'ul' && { role: 'list', 'aria-label': ariaLabel })}
       {...props}
     >
       {children}

package/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap

@@ -191,6 +191,7 @@ exports[`HelperText variant comonent helper text renders properly 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-helper-text"
+    role="list"
   >
     <li
       class="pf-c-helper-text__item"

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -14,7 +14,7 @@ import {
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -13,7 +13,7 @@ import {
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/Icon/Icon.tsx

@@ -39,11 +39,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   defaultProgressArialabel = 'Loading...',
   ...props
 }: IconComponentProps) => {
-  const _progressIcon = progressIcon ? (
-    progressIcon
-  ) : (
-    <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />
-  );
+  const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
 
   return (
     <span

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -10,13 +10,13 @@ export const IconProgress: React.FunctionComponent = () => {
         <Checkbox
           label="Toggle in progress state"
           isChecked={isInProgress}
-          onChange={checked => setIsInProgress(checked)}
+          onChange={(_event, checked) => setIsInProgress(checked)}
           aria-label="Set icon progress state"
           id="toggle-icon-progress-custom"
           name="toggle-icon-progress-custom"
         />
       </div>
-      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" isSVG aria-label="Loading..." />}>
+      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
         <CheckCircleIcon />
       </Icon>
     </React.Fragment>

package/src/components/Icon/examples/IconProgress.tsx

@@ -10,7 +10,7 @@ export const IconProgress: React.FunctionComponent = () => {
         <Checkbox
           label="Toggle in progress state"
           isChecked={isInProgress}
-          onChange={checked => setIsInProgress(checked)}
+          onChange={(_event, checked) => setIsInProgress(checked)}
           aria-label="Set icon progress state"
           id="toggle-icon-progress"
           name="toggle-icon-progress"

package/src/components/InputGroup/InputGroup.tsx

@@ -11,16 +11,16 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the input group. */
   children: React.ReactNode;
   /** @hide A reference object to attach to the input box */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
 }
 
-export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
+export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   className = '',
   children,
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
   const idItem = React.Children.toArray(children).find(
     (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
   ) as React.ReactElement<{ id: string }>;
@@ -42,4 +42,8 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
     </div>
   );
 };
+
+export const InputGroup = React.forwardRef((props: InputGroupProps, ref: React.Ref<HTMLDivElement>) => (
+  <InputGroupBase innerRef={ref} {...props} />
+));
 InputGroup.displayName = 'InputGroup';

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

@@ -4,7 +4,7 @@ import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem }
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/JumpLinks/JumpLinks.tsx

@@ -19,7 +19,7 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   label?: React.ReactNode;
   /** Flag to always show the label when using `expandable` */
   alwaysShowLabel?: boolean;
-  /** Aria-label to add to nav element. Defaults to label. */
+  /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
   /** Selector for the scrollable element to spy on. Not passing a selector disables spying. */
   scrollableSelector?: string;
@@ -72,12 +72,7 @@ const getScrollItems = (children: React.ReactNode, res: HTMLElement[]) => {
 
 function isResponsive(jumpLinks: HTMLElement) {
   // https://github.com/patternfly/patternfly/blob/main/src/patternfly/components/JumpLinks/jump-links.scss#L103
-  return (
-    jumpLinks &&
-    getComputedStyle(jumpLinks)
-      .getPropertyValue(cssToggleDisplayVar.name)
-      .includes('block')
-  );
+  return jumpLinks && getComputedStyle(jumpLinks).getPropertyValue(cssToggleDisplayVar.name).includes('block');
 }
 
 export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
@@ -245,7 +240,9 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           )}
           {label && alwaysShowLabel && <div className={css(styles.jumpLinksLabel)}>{label}</div>}
         </div>
-        <ul className={styles.jumpLinksList}>{cloneChildren(children)}</ul>
+        <ul className={styles.jumpLinksList} role="list">
+          {cloneChildren(children)}
+        </ul>
       </div>
     </nav>
   );

package/src/components/JumpLinks/JumpLinksList.tsx

@@ -14,7 +14,7 @@ export const JumpLinksList: React.FunctionComponent<JumpLinksListProps> = ({
   className,
   ...props
 }: JumpLinksListProps) => (
-  <ul className={css(styles.jumpLinksList, className)} {...props}>
+  <ul className={css(styles.jumpLinksList, className)} role="list" {...props}>
     {children}
   </ul>
 );